Release fix: decrease visual clutter

Update config-database.md

.github/ISSUE_TEMPLATE/maintainers-release.md

@@ -27,7 +27,7 @@ assignees: enricoros
   - [ ] Copy the highlights to the [docs/changelog.md](/docs/changelog.md)
 - Release:
   - [ ] merge onto main `git checkout main && git merge --no-ff release-1.2.3`
-  - [ ] re-tag `git tag -f v1.2.3 && git push opensource --tags -f'
+  - [ ] re-tag `git tag -f v1.2.3 && git push opensource --tags -f`
   - [ ] verify deployment on Vercel
   - [ ] verify container on GitHub Packages
   - [ ] update the GitHub release
@@ -39,14 +39,13 @@ assignees: enricoros
 ### 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
+- GitHub release: https://github.com/enricoros/big-AGI/releases/tag/v1.2.3
+- Former release task: #...
 
 ## Artifacts Generation
 
 ```markdown
-You help me generate the following collateral for the new release of my opensource application
-called big-AGI. The new release is 1.2.3.
+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.
 ```
 
@@ -55,8 +54,7 @@ To familiarize yourself with the application, the following are the Website and
 
 ```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).
+For reference, the following was the collateral for 1.1.0 (Discord announcement, GitHub Release, in-app-news file news.data.tsx).
 ```
 
 - paste the former: `discord announcement`,
@@ -66,20 +64,24 @@ GitHub Release, in-app-news file news.data.tsx, changelog.md).
 
 ```markdown
 The following are the new developments for 1.2.3:
+
+- ...
+- git log --pretty=format:"%h %an %B" v1.1.0..v1.2.3 | clip
 ```
 
 - paste the link to the milestone (closed) and each individual issue (content will be downloaded)
-- paste the git changelog  `git log v1.1.0..v1.2.3 | clip`
+- paste the output of the git log command
 
 ### news.data.tsx
 
 ```markdown
 I need the following from you:
 
-1. a table summarizing all the new features in 1.2.3 (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
+1. a table summarizing all the new features in 1.2.3 with the following columns: 4 words description (exactly what it is), short description, usefulness (what it does for the user), significance, link to the issue number (not the commit)), which will be used for the artifacts later
+2. then double-check the git log to see if there are any features of significance that are not in the table
+3. then score each feature in terms of importance for users (1-10), relative impact of the feature (1-10, where 10 applies to the broadest user base), and novelty and uniqueness (1-10, where 10 is truly unique and novel from what exists already) 
+4. then improve the table, in decreasing order of importance for features, fixing any detail that's missing, in particular check if there are commits of significance from a user or developer point of view, which are not contained in the table
+5. then I want you then to update the news.data.tsx for the new release
 ```
 
 ### Readme (and Changelog)
@@ -92,9 +94,9 @@ Attaching the in-app news, with my language for you to improve on, but keep the
 ### GitHub release
 
 ```markdown
-Please create the 1.2.3 Release Notes for GitHub.
+Please create the 1.2.3 Release Notes for GitHub, following the format of the 1.1.0 GitHub release notes attached before.
 Use a truthful and honest tone, understanding that people's time and attention span is short.
-Today is 2024-1-1.
+Today is 2024-XXXX-YYYY.
 ```
 
 Now paste-attachment the former release notes (or 1.5.0 which was accurate and great), including the new contributors and

.github/ISSUE_TEMPLATE/roadmap-request.md

@@ -8,10 +8,11 @@ assignees: ''
 ---
 
 **Why**
-The reason behind the request - we love it to be framed for "users will be able to do x" rather than quick-aging hype-tech-of-the-day requests
+(replace this text with yours) The reason behind the request - we love it to be framed for "users will be able to do x" rather than quick-aging hype-tech-of-the-day requests
 
-**Concise description**
-A clear and concise description of what you want to happen.
+**Description**
+Clear and concise description of what you want to happen.
 
 **Requirements**
-If you can, please detail the changes you expect in UX, user workflows, technology, architecture (if not, the reviewers will do it for you)
+If you can, Please break-down the changes use cases, UX, technology, architecture, etc.
+- [ ] ...

README.md

@@ -21,6 +21,31 @@ 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.13.0 · Feb 8, 2024 · Multi + Mind
+
+https://github.com/enricoros/big-AGI/assets/32999/01732528-730e-41dc-adc7-511385686b13
+
+- **Side-by-Side Split Windows**: multitask with parallel conversations. [#208](https://github.com/enricoros/big-AGI/issues/208)
+- **Multi-Chat Mode**: message everyone, all at once. [#388](https://github.com/enricoros/big-AGI/issues/388)
+- **Export tables as CSV** - big thanks to @aj47. [#392](https://github.com/enricoros/big-AGI/pull/392)
+- **Adjustable Text Size**: enjoy denser chats. [#399](https://github.com/enricoros/big-AGI/issues/399)
+- Dev2 Persona Technology Preview
+- Better looking chats with improved spacing, fonts, and menus
+- More: new video player, [LM Studio tutorial](https://github.com/enricoros/big-AGI/blob/main/docs/config-lmstudio.md), [MongoDB support](https://github.com/enricoros/big-AGI/blob/main/docs/config-database.md) (thanks @ranfysvalle02), and speedups
+
+### What's New in 1.12.0 · Jan 26, 2024 · AGI Hotline
+
+https://github.com/enricoros/big-AGI/assets/32999/95ceb03c-945d-4fdd-9a9f-3317beb54f3f
+
+- **Voice Calls**: real-time voice call your personas out of the blue or in relation to a chat [#354](https://github.com/enricoros/big-AGI/issues/354)
+- Support **OpenAI 0125** Models. [#364](https://github.com/enricoros/big-AGI/issues/364)
+- Rename or Auto-Rename chats.  [#222](https://github.com/enricoros/big-AGI/issues/222), [#360](https://github.com/enricoros/big-AGI/issues/360)
+- More control over **Link Sharing** [#356](https://github.com/enricoros/big-AGI/issues/356)
+- **Accessibility** to screen readers [#358](https://github.com/enricoros/big-AGI/issues/358)
+- Export chats to Markdown [#337](https://github.com/enricoros/big-AGI/issues/337)
+- Paste tables from Excel [#286](https://github.com/enricoros/big-AGI/issues/286)
+- Ollama model updates and context window detection fixes [#309](https://github.com/enricoros/big-AGI/issues/309)
+
 ### What's New in 1.11.0 · Jan 16, 2024 · Singularity
 
 https://github.com/enricoros/big-AGI/assets/1590910/a6b8e172-0726-4b03-a5e5-10cfcb110c68
@@ -32,33 +57,11 @@ https://github.com/enricoros/big-AGI/assets/1590910/a6b8e172-0726-4b03-a5e5-10cf
 - Enable adding up to five custom OpenAI-compatible endpoints
 - Developer enhancements: new 'Actiles' framework
 
-### What's New in 1.10.0 · Jan 6, 2024 · The Year of AGI
-
-https://github.com/enricoros/big-AGI/assets/32999/fbb1be49-5c38-49c8-86fa-3705700f6c39
-
-- **New UI**: for both desktop and mobile, sets the stage for future scale. [#201](https://github.com/enricoros/big-AGI/issues/201)
-- **Conversation Folders**: enhanced conversation organization. [#321](https://github.com/enricoros/big-AGI/issues/321)
-- **[LM Studio](https://lmstudio.ai/)** support and improved token management
-- Resizable panes in split-screen conversations.
-- Large performance optimizations
-- Developer enhancements: new UI framework, updated documentation for proxy settings on browserless/docker
-
-### What's New in 1.9.0 · Dec 28, 2023 · Creative Horizons
-
-- **DALL·E 3 integration** for enhanced image generation. [#212](https://github.com/enricoros/big-AGI/issues/212)
-- **Perfect scrolling mechanics** across devices. [#304](https://github.com/enricoros/big-AGI/issues/304)
-- Persona creation now supports **text input**. [#287](https://github.com/enricoros/big-AGI/pull/287)
-- Openrouter updates for better model management and rate limit handling
-- Image drawing UX improvements
-- Layout fix for Firefox users
-- Developer enhancements: Text2Image subsystem, Optima layout, ScrollToBottom library, Panes library, and Llms subsystem updates.
-
 For full details and former releases, check out the [changelog](docs/changelog.md).
 
 ## ✨ Key Features 👊
 
-![Ask away, paste a ton, copy the gems](docs/pixels/big-AGI-compo1.png)
-[More](docs/pixels/big-AGI-compo2b.png), [screenshots](docs/pixels).
+![big-AGI screenshot](docs/pixels/big-AGI-compo-20240201_small.png)
 
 - **AI Personas**: Tailor your AI interactions with customizable personas
 - **Sleek UI/UX**: A smooth, intuitive, and mobile-responsive interface
@@ -112,7 +115,7 @@ after installing the required dependencies.
 ```bash
 # .. repeat the steps above up to `npm install`, then:
 npm run build
-npm run start --port 3000
+next start --port 3000
 ```
 
 The app will be running on the specified port, e.g. `http://localhost:3000`.

docs/changelog.md

@@ -5,16 +5,43 @@ by release.
 
 - For the live roadmap, please see [the GitHub project](https://github.com/users/enricoros/projects/4/views/2)
 
-### 1.12.0 - Jan 2024
+### 1.13.0 - Feb 2024
 
-- milestone: [1.12.0](https://github.com/enricoros/big-agi/milestone/12)
+- milestone: [1.13.0](https://github.com/enricoros/big-agi/milestone/13)
 - 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.13.0 · Feb 8, 2024 · Multi + Mind
+
+https://github.com/enricoros/big-AGI/assets/32999/01732528-730e-41dc-adc7-511385686b13
+
+- **Side-by-Side Split Windows**: multitask with parallel conversations. [#208](https://github.com/enricoros/big-AGI/issues/208)
+- **Multi-Chat Mode**: message everyone, all at once. [#388](https://github.com/enricoros/big-AGI/issues/388)
+- **Export tables as CSV** - big thanks to @aj47. [#392](https://github.com/enricoros/big-AGI/pull/392)
+- **Adjustable Text Size**: enjoy denser chats. [#399](https://github.com/enricoros/big-AGI/issues/399)
+- Dev2 Persona Technology Preview
+- Better looking chats with improved spacing, fonts, and menus
+- More: new video player, [LM Studio tutorial](https://github.com/enricoros/big-AGI/blob/main/docs/config-lmstudio.md), [MongoDB support](https://github.com/enricoros/big-AGI/blob/main/docs/config-database.md) (thanks @ranfysvalle02), and speedups
+
+## What's New in 1.12.0 · Jan 26, 2024 · AGI Hotline
+
+https://github.com/enricoros/big-AGI/assets/32999/95ceb03c-945d-4fdd-9a9f-3317beb54f3f
+
+- **Voice Calls**: real-time voice call your personas out of the blue or in relation to a chat [#354](https://github.com/enricoros/big-AGI/issues/354)
+- Support **OpenAI 0125** Models. [#364](https://github.com/enricoros/big-AGI/issues/364)
+- Rename or Auto-Rename chats.  [#222](https://github.com/enricoros/big-AGI/issues/222), [#360](https://github.com/enricoros/big-AGI/issues/360)
+- More control over **Link Sharing** [#356](https://github.com/enricoros/big-AGI/issues/356)
+- **Accessibility** to screen readers [#358](https://github.com/enricoros/big-AGI/issues/358)
+- Export chats to Markdown [#337](https://github.com/enricoros/big-AGI/issues/337)
+- Paste tables from Excel [#286](https://github.com/enricoros/big-AGI/issues/286)
+- Ollama model updates and context window detection fixes [#309](https://github.com/enricoros/big-AGI/issues/309)
+
 ### What's New in 1.11.0 · Jan 16, 2024 · Singularity
 
+https://github.com/enricoros/big-AGI/assets/1590910/a6b8e172-0726-4b03-a5e5-10cfcb110c68
+
 - **Find chats**: search in titles and content, with frequency ranking. [#329](https://github.com/enricoros/big-AGI/issues/329)
 - **Commands**: command auto-completion (type '/'). [#327](https://github.com/enricoros/big-AGI/issues/327)
-- **[Together AI](https://www.together.ai/products#inference)** inference platform support. [#346](https://github.com/enricoros/big-AGI/issues/346)
+- **[Together AI](https://www.together.ai/products#inference)** inference platform support (good speed and newer models). [#346](https://github.com/enricoros/big-AGI/issues/346)
 - Persona Creator history, deletion, custom creation, fix llm API timeouts
 - Enable adding up to five custom OpenAI-compatible endpoints
 - Developer enhancements: new 'Actiles' framework

docs/config-database.md

@@ -0,0 +1,65 @@
+**Connecting Your Database for Enhanced Features:**
+
+This guide outlines the database options and setup steps for enabling features like Chat Link Sharing in your application.
+
+### Choose Your Database:
+
+**1. Serverless Postgres (default):**
+
+- Available on Vercel, Neon, and other platforms.
+- Less feature-rich but a suitable option depending on your needs.
+- **Connection String:** Replace placeholders with your Postgres credentials.
+    - `postgres://USER:PASS@SOMEHOST.postgres.vercel-storage.com/SOMEDB?pgbouncer=true&connect_timeout=15`
+
+**2. MongoDB Atlas (alternative):**
+
+- **Highly Recommended:** More than a database, it's a data platform. MongoDB Atlas is a robust cloud-based platform that offers scalability, security, and a suite of developer tools. No need for a separate vector database, you can query your vector embeddings right within your operational database! 
+- **Additional Features:** MongoDB Atlas is packed with unique features designed to streamline the development process such as: Atlas App Services, Atlas search (with vector search), Atlas charts, Data Federation, and more. 
+- **Connection String:** Replace placeholders with your Atlas credentials.
+    - `mongodb://USER:PASS@CLUSTER-NAME.mongodb.net/DATABASE-NAME?retryWrites=true&w=majority`
+
+### Environment Variables:
+
+#### Postgres:
+| Variable           |                                                                                                                                                                              |
+|--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `POSTGRES_PRISMA_URL`  | `postgres://USER:PASS@SOMEHOST.postgres.vercel-storage.com/SOMEDB?pgbouncer=true&connect_timeout=15`                                                                                                  |
+| `POSTGRES_URL_NON_POOLING` (optional) | URL for the Postgres database without pooling (specific use cases)                                                                                                               |
+
+
+#### MongoDB:
+| Variable           |                                                                                                                                                                              |
+|--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `MDB_URI`  | `mongodb://USER:PASS@CLUSTER-NAME.mongodb.net/DATABASE-NAME?retryWrites=true&w=majority`                                                                                                                |
+
+### MongoDB Atlas + Prisma
+When using MongoDB Atlas, you'll need to make the below changes to the file `prisma.schema`
+
+```
+...
+datasource db {
+  provider  = "mongodb"
+  url       = env("MDB_URI")
+}
+
+//
+// Storage of Linked Data
+//
+model LinkStorage {
+  id String @id @default(uuid()) @map("_id")
+
+// ...rest of file
+```
+
+### Initial Setup Steps:
+
+1. **Run `npx prisma db:push`:** Create or update the database schema (run once after connecting).
+
+
+### Additional Resources:
+
+- Prisma documentation: [https://www.prisma.io/docs/](https://www.prisma.io/docs/)
+- MongoDB Atlas: [https://www.mongodb.com/atlas/database](https://www.mongodb.com/atlas/database)
+- Atlas App Services: [https://www.mongodb.com/docs/atlas/app-services/](https://www.mongodb.com/docs/atlas/app-services/)
+- Atlas vector search: [https://www.mongodb.com/products/platform/atlas-vector-search/](https://www.mongodb.com/products/platform/atlas-vector-search)
+- Atlas Data Federation: [https://www.mongodb.com/products/platform/atlas-data-federation](https://www.mongodb.com/products/platform/atlas-data-federation)

docs/config-lmstudio.md

@@ -0,0 +1,51 @@
+# Integrating LM Studio with big-AGI
+
+Quickly set up LM Studio with big-AGI to run local and open LLMs on your computer for enhanced privacy and control over AI interactions.
+
+## Video Tutorial
+
+For a visual step-by-step guide, watch our [YouTube tutorial](https://www.youtube.com/watch?v=MqXzxVokMDk).
+
+[![Running big-AGI locally with LM Studio YouTube Tutorial](http://img.youtube.com/vi/MqXzxVokMDk/0.jpg)](http://www.youtube.com/watch?v=MqXzxVokMDk "Running big-AGI locally with LM Studio")
+
+
+## Quick Setup Guide
+
+### Installing big-AGI
+
+Clone and set up big-AGI:
+
+```bash
+git clone https://github.com/enricoros/big-agi.git && cd big-agi
+npm install # Or: yarn install
+npm run dev # Or: yarn dev
+# If missing dependencies:
+npm install @mui/material # Or: yarn add @mui/material
+```
+
+### Configuring LM Studio
+
+Ensure LM Studio is running (default: [http://localhost:1234](http://localhost:1234)).
+Check the URL and modify if different.
+1. Download local models in LM Studio
+2. Start the LM Studio server
+3. Optionally. Check the logs
+
+### Integration in big-AGI
+
+1. In big-AGI, navigate to **Models** > **Add** > **LM Studio**
+2. Enter the API URL: `http://localhost:1234` (modify if different)
+3. Refresh by clicking on the `Models` button to load models from LM Studio
+
+## Troubleshooting
+
+- **Missing @mui/material**: Execute `npm install @mui/material` or `yarn add @mui/material`
+- **Connection Issues**: Check LM Studio's URL and ensure it's operational
+
+
+## Further Assistance
+
+Advanced configurations and more:
+
+- big-AGI Community: [Discord](https://discord.gg/MkH4qj2Jp9)
+- LM Studio: [LM Studio home page](https://lmstudio.ai/)

docs/environment-variables.md

@@ -12,10 +12,13 @@ Environment variables can be set by creating a `.env` file in the root directory
 The following is an example `.env` for copy-paste convenience:
 
 ```bash
-# Database
+# Database (Postgres)
 POSTGRES_PRISMA_URL=
 POSTGRES_URL_NON_POOLING=
 
+# Database (MongoDB)
+MDB_URI=
+
 # LLMs
 OPENAI_API_KEY=
 OPENAI_API_HOST=
@@ -57,16 +60,9 @@ HTTP_BASIC_AUTH_PASSWORD=
 
 ### Database
 
-To enable features such as Chat Link Shring, you need to connect the backend to a database. We require
-serverless Postgres, which is available on Vercel, Neon and more.
+For Database configuration see [config-database.md](config-database.md).
 
-Also make sure that you run `npx prisma db:push` to create the initial schema on the database for the
-first time (or update it on a later stage).
-
-| Variable                   | Description                                                                                                                                                     |
-|----------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `POSTGRES_PRISMA_URL`      | The URL of the Postgres database used by Prisma - example: `postgres://USER:PASS@SOMEHOST.postgres.vercel-storage.com/SOMEDB?pgbouncer=true&connect_timeout=15` |
-| `POSTGRES_URL_NON_POOLING` | The URL of the Postgres database without pooling                                                                                                                |
+To enable features such as Chat Link Sharing, you need to connect the backend to a database. We currently support Postgres and MongoDB.
 
 ### LLMs
 

next.config.mjs

@@ -26,6 +26,11 @@ let nextConfig = {
 
     return config;
   },
+
+  // Uncomment the following leave console messages in production
+  // compiler: {
+  //   removeConsole: false,
+  // },
 };
 
 // Validate environment variables, if set at build time. Will be actually read and used at runtime.

package.json

@@ -1,74 +1,77 @@
 {
   "name": "big-agi",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "env:pull": "npx vercel env pull .env.development.local",
     "postinstall": "prisma generate",
     "db:push": "prisma db push",
-    "db:studio": "prisma studio"
+    "db:studio": "prisma studio",
+    "vercel:env:pull": "npx vercel env pull .env.development.local"
   },
   "dependencies": {
-    "@dqbd/tiktoken": "^1.0.7",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.3",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.2",
-    "@mui/joy": "^5.0.0-beta.20",
-    "@next/bundle-analyzer": "^14.0.4",
-    "@prisma/client": "^5.7.1",
+    "@mui/icons-material": "^5.15.8",
+    "@mui/joy": "5.0.0-beta.25",
+    "@next/bundle-analyzer": "^14.1.0",
+    "@prisma/client": "^5.9.1",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@t3-oss/env-nextjs": "^0.7.1",
+    "@t3-oss/env-nextjs": "^0.8.0",
     "@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",
-    "@vercel/speed-insights": "^1.0.2",
+    "@vercel/analytics": "^1.1.3",
+    "@vercel/speed-insights": "^1.0.9",
     "browser-fs-access": "^0.35.0",
     "eventsource-parser": "^1.1.1",
     "idb-keyval": "^6.2.1",
-    "next": "^14.0.4",
+    "next": "^14.1.0",
     "nprogress": "^0.2.0",
-    "pdfjs-dist": "4.0.269",
+    "pdfjs-dist": "4.0.379",
     "plantuml-encoder": "^1.4.0",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
+    "react-csv": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-katex": "^3.0.1",
     "react-markdown": "^9.0.1",
-    "react-resizable-panels": "^1.0.5",
+    "react-player": "^2.14.1",
+    "react-resizable-panels": "^2.0.3",
     "react-timeago": "^7.2.0",
     "remark-gfm": "^4.0.0",
     "superjson": "^2.2.1",
     "tesseract.js": "^5.0.4",
+    "tiktoken": "^1.0.13",
     "uuid": "^9.0.1",
     "zod": "^3.22.4",
-    "zustand": "^4.4.7"
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@cloudflare/puppeteer": "^0.0.5",
-    "@types/node": "^20.10.6",
+    "@types/node": "^20.11.16",
     "@types/nprogress": "^0.2.3",
     "@types/plantuml-encoder": "^1.4.2",
     "@types/prismjs": "^1.26.3",
-    "@types/react": "^18.2.46",
+    "@types/react": "^18.2.55",
     "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-csv": "^1.1.10",
     "@types/react-dom": "^18.2.18",
     "@types/react-katex": "^3.0.4",
     "@types/react-timeago": "^4.1.7",
-    "@types/uuid": "^9.0.7",
+    "@types/uuid": "^9.0.8",
     "eslint": "^8.56.0",
-    "eslint-config-next": "^14.0.4",
-    "prettier": "^3.1.1",
-    "prisma": "^5.7.1",
+    "eslint-config-next": "^14.1.0",
+    "prettier": "^3.2.5",
+    "prisma": "^5.9.1",
     "typescript": "^5.3.3"
   },
   "engines": {

pages/_app.tsx

@@ -45,7 +45,7 @@ const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
     </ProviderTheming>
 
     <VercelAnalytics debug={false} />
-    <VercelSpeedInsights debug={false} />
+    <VercelSpeedInsights debug={false} sampleRate={1 / 10} />
 
   </>;
 

pages/_document.tsx

@@ -24,7 +24,7 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
         <link rel='shortcut icon' href='/favicon.ico' />
         <link rel='icon' type='image/png' sizes='32x32' href='/icons/favicon-32x32.png' />
         <link rel='icon' type='image/png' sizes='16x16' href='/icons/favicon-16x16.png' />
-        <link rel='apple-touch-icon' sizes='180x180' href='/icons/apple-touch-icon.png' />
+        <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
         <link rel='manifest' href='/manifest.json' />
         <meta name='apple-mobile-web-app-capable' content='yes' />
         <meta name='apple-mobile-web-app-status-bar-style' content='black' />

pages/draw.tsx

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

pages/link/callback_openrouter.tsx

@@ -7,7 +7,6 @@ import { useModelsStore } from '~/modules/llms/store-llms';
 import { InlineError } from '~/common/components/InlineError';
 import { apiQuery } from '~/common/util/trpc.client';
 import { navigateToIndex, useRouterQuery } from '~/common/app.routes';
-import { themeBgApp } from '~/common/app.theme';
 import { withLayout } from '~/common/layout/withLayout';
 
 
@@ -42,7 +41,6 @@ function CallbackOpenRouterPage(props: { openRouterCode: string | undefined }) {
   return (
     <Box sx={{
       flexGrow: 1,
-      backgroundColor: themeBgApp,
       overflowY: 'auto',
       display: 'flex', justifyContent: 'center',
       p: { xs: 3, md: 6 },

pages/link/chat/[chatLinkId].tsx

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

pages/link/share_target.tsx

@@ -10,7 +10,6 @@ import { callBrowseFetchPage } from '~/modules/browse/browse.client';
 import { LogoProgress } from '~/common/components/LogoProgress';
 import { asValidURL } from '~/common/util/urlUtils';
 import { navigateToIndex, useRouterQuery } from '~/common/app.routes';
-import { themeBgApp } from '~/common/app.theme';
 import { withLayout } from '~/common/layout/withLayout';
 
 
@@ -92,7 +91,6 @@ function AppShareTarget() {
   return (
 
     <Box sx={{
-      backgroundColor: themeBgApp,
       display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
       flexGrow: 1,
     }}>

pages/workspace.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+import { Box } from '@mui/joy';
+
+// import { AppWorkspace } from '../src/apps/personas/AppWorkspace';
+
+import { withLayout } from '~/common/layout/withLayout';
+
+
+export default function PersonasPage() {
+  return withLayout({ type: 'optima' }, <Box />);
+}

src/apps/AppPlaceholder.tsx

@@ -3,14 +3,13 @@ import * as React from 'react';
 import { Box, Typography } from '@mui/joy';
 
 import { capitalizeFirstLetter } from '~/common/util/textUtils';
-import { themeBgApp } from '~/common/app.theme';
 import { useRouterRoute } from '~/common/app.routes';
 
 
 /**
  * https://github.com/enricoros/big-AGI/issues/299
  */
-export function AppPlaceholder() {
+export function AppPlaceholder(props: { text?: string }) {
 
   // external state
   const route = useRouterRoute();
@@ -21,7 +20,6 @@ export function AppPlaceholder() {
   return (
     <Box sx={{
       flexGrow: 1,
-      backgroundColor: themeBgApp,
       overflowY: 'auto',
       p: { xs: 3, md: 6 },
       border: '1px solid blue',
@@ -38,7 +36,7 @@ export function AppPlaceholder() {
           {placeholderAppName}
         </Typography>
         <Typography>
-          Intelligent applications to help you learn, think, and do
+          {props.text || 'Intelligent applications to help you learn, think, and do'}
         </Typography>
 
       </Box>

src/apps/call/AppCall.tsx

@@ -2,41 +2,76 @@ import * as React from 'react';
 
 import { Container, Sheet } from '@mui/joy';
 
-import { AppCallQueryParams, useRouterQuery } from '~/common/app.routes';
-import { InlineError } from '~/common/components/InlineError';
+import type { DConversationId } from '~/common/state/store-chats';
+import { useRouterQuery } from '~/common/app.routes';
 
-import { CallUI } from './CallUI';
 import { CallWizard } from './CallWizard';
+import { Contacts } from './Contacts';
+import { Telephone } from './Telephone';
+import { useAppCallStore } from './state/store-app-call';
+
+
+/**
+ * Used to define the intent of the call from other apps (via query params) or
+ * from the contacts list (via the 'call' button).
+ */
+export interface AppCallIntent {
+  conversationId: DConversationId | null;
+  personaId: string;
+  backTo: 'app-chat' | 'app-call-contacts';
+}
 
 
 export function AppCall() {
 
-  // external state
-  const { conversationId, personaId } = useRouterQuery<AppCallQueryParams>();
+  // state
+  const [callIntent, setCallIntent] = React.useState<AppCallIntent | null>(null);
 
-  // derived state
-  const validInput = !!conversationId && !!personaId;
+  // external state
+  const grayUI = useAppCallStore(state => state.grayUI);
+  const query = useRouterQuery<Partial<AppCallIntent>>();
+
+
+  // [effect] set intent from the query parameters
+  React.useEffect(() => {
+    if (query.personaId) {
+      setCallIntent({
+        conversationId: query.conversationId ?? null,
+        personaId: query.personaId,
+        backTo: query.backTo || 'app-chat',
+      });
+    }
+  }, [query.backTo, query.conversationId, query.personaId]);
+
+
+  const hasIntent = !!callIntent && !!callIntent.personaId;
 
   return (
-    <Sheet variant='solid' color='neutral' invertedColors sx={{
-      display: 'flex', flexDirection: 'column', justifyContent: 'center',
-      flexGrow: 1,
-      overflowY: 'auto',
-      minHeight: 96,
-    }}>
+    <Sheet
+      variant={grayUI ? 'solid' : 'soft'}
+      invertedColors={grayUI ? true : undefined}
+      sx={{
+        // take the full V-area (we're inside PageWrapper) and scroll as needed
+        flexGrow: 1,
+        overflowY: 'auto',
 
-      <Container maxWidth='sm' sx={{
-        display: 'flex', flexDirection: 'column',
-        alignItems: 'center',
-        minHeight: '80dvh', justifyContent: 'space-evenly',
-        gap: { xs: 2, md: 4 },
+        // container will take the full v-area
+        display: 'grid',
       }}>
 
-        {!validInput && <InlineError error={`Something went wrong. ${conversationId}:${personaId}`} />}
+      <Container
+        maxWidth={hasIntent ? 'sm' : 'md'}
+        sx={{
+          display: 'flex', flexDirection: 'column', alignItems: 'center',
+          justifyContent: hasIntent ? 'space-evenly' : undefined,
+          gap: hasIntent ? 1 : undefined,
+        }}>
 
-        {validInput && (
-          <CallWizard conversationId={conversationId}>
-            <CallUI conversationId={conversationId} personaId={personaId} />
+        {!hasIntent ? (
+          <Contacts setCallIntent={setCallIntent} />
+        ) : (
+          <CallWizard conversationId={callIntent.conversationId}>
+            <Telephone callIntent={callIntent} backToContacts={() => setCallIntent(null)} />
           </CallWizard>
         )}
 

src/apps/call/CallWizard.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { keyframes } from '@emotion/react';
 
 import { Box, Button, Card, CardContent, IconButton, ListItemDecorator, Typography } from '@mui/joy';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
@@ -10,14 +9,15 @@ import MicIcon from '@mui/icons-material/Mic';
 import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 import WarningIcon from '@mui/icons-material/Warning';
 
+import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+import { cssRainbowColorKeyframes } from '~/common/app.theme';
 import { navigateBack } from '~/common/app.routes';
 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';
 
 
-const cssRainbowBackgroundKeyframes = keyframes`
+/*export const cssRainbowBackgroundKeyframes = keyframes`
     100%, 0% {
         background-color: rgb(128, 0, 0);
     }
@@ -53,7 +53,7 @@ const cssRainbowBackgroundKeyframes = keyframes`
     }
     91% {
         background-color: rgb(102, 0, 51);
-    }`;
+    }`;*/
 
 function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: string, button?: React.JSX.Element }) {
   return (
@@ -75,7 +75,8 @@ function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: s
 }
 
 
-export function CallWizard(props: { strict?: boolean, conversationId: string, children: React.ReactNode }) {
+export function CallWizard(props: { strict?: boolean, conversationId: string | null, children: React.ReactNode }) {
+
   // state
   const [chatEmptyOverride, setChatEmptyOverride] = React.useState(false);
   const [recognitionOverride, setRecognitionOverride] = React.useState(false);
@@ -85,12 +86,15 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
   const recognition = useCapabilityBrowserSpeechRecognition();
   const synthesis = useCapabilityElevenLabs();
   const chatIsEmpty = useChatStore(state => {
+    if (!props.conversationId)
+      return false;
     const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
     return !(conversation?.messages?.length);
   });
   const { novel, touch } = useUICounter('call-wizard');
 
   // derived state
+  const outOfTheBlue = !props.conversationId;
   const overriddenEmptyChat = chatEmptyOverride || !chatIsEmpty;
   const overriddenRecognition = recognitionOverride || recognition.mayWork;
   const allGood = overriddenEmptyChat && overriddenRecognition && synthesis.mayWork;
@@ -104,7 +108,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
   const handleOverrideRecognition = () => setRecognitionOverride(true);
 
   const handleConfigureElevenLabs = () => {
-    openPreferencesTab(3);
+    openPreferencesTab(PreferencesTab.Voice);
   };
 
   const handleFinishButton = () => {
@@ -118,16 +122,11 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
 
     <Box sx={{ flexGrow: 0.5 }} />
 
-    <Typography level='title-lg' sx={{ fontSize: '3rem', fontWeight: 200, lineHeight: '1.5em', textAlign: 'center' }}>
+    <Typography level='title-lg' sx={{ fontSize: '3rem', fontWeight: 200, textAlign: 'center' }}>
       Welcome to<br />
-      <Typography
-        component='span'
-        sx={{
-          backgroundColor: 'primary.solidActiveBg', mx: -0.5, px: 0.5,
-          animation: `${cssRainbowBackgroundKeyframes} 15s linear infinite`,
-        }}>
+      <Box component='span' sx={{ animation: `${cssRainbowColorKeyframes} 15s linear infinite` }}>
         your first call
-      </Typography>
+      </Box>
     </Typography>
 
     <Box sx={{ flexGrow: 0.5 }} />
@@ -138,7 +137,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
     </Typography>
 
     {/* Chat Empty status */}
-    <StatusCard
+    {!outOfTheBlue && <StatusCard
       icon={<ChatIcon />}
       hasIssue={!overriddenEmptyChat}
       text={overriddenEmptyChat ? 'Great! Your chat has messages.' : 'The chat is empty. Calls are effective when the caller has context.'}
@@ -147,7 +146,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
           Ignore
         </Button>
       )}
-    />
+    />}
 
     {/* Add the speech to text feature status */}
     <StatusCard
@@ -199,14 +198,21 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
       </Typography>
 
       <IconButton
-        size='lg' variant={allGood ? 'soft' : 'solid'} color={allGood ? 'success' : 'danger'}
-        onClick={handleFinishButton} sx={{ borderRadius: '50px', mr: 0.5 }}
+        size='lg'
+        variant='solid' color={allGood ? 'success' : 'danger'}
+        onClick={handleFinishButton}
+        sx={{
+          borderRadius: '50px',
+          mr: 0.5,
+          // animation: `${cssRainbowBackgroundKeyframes} 15s linear infinite`,
+          // boxShadow: allGood ? 'md' : 'none',
+        }}
       >
         {allGood ? <ArrowForwardIcon sx={{ fontSize: '1.5em' }} /> : <CloseIcon sx={{ fontSize: '1.5em' }} />}
       </IconButton>
     </Box>
 
-    <Box sx={{ flexGrow: 0.5 }} />
+    <Box sx={{ flexGrow: 2 }} />
 
   </>;
 }

src/apps/call/Contacts.tsx

@@ -0,0 +1,345 @@
+import * as React from 'react';
+import { shallow } from 'zustand/shallow';
+import { keyframes } from '@emotion/react';
+
+import type { SxProps } from '@mui/joy/styles/types';
+import { Avatar, Box, Card, CardContent, Chip, IconButton, Link as MuiLink, ListDivider, MenuItem, Sheet, Switch, Typography } from '@mui/joy';
+import CallIcon from '@mui/icons-material/Call';
+
+import { GitHubProjectIssueCard } from '~/common/components/GitHubProjectIssueCard';
+import { conversationTitle, DConversation, DConversationId, useChatStore } from '~/common/state/store-chats';
+import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+
+import type { AppCallIntent } from './AppCall';
+import { MockPersona, useMockPersonas } from './state/useMockPersonas';
+import { useAppCallStore } from './state/store-app-call';
+
+
+// number of conversations to show before collapsing
+const COLLAPSED_COUNT = 2;
+
+
+export const niceShadowKeyframes = keyframes`
+    100%, 0% {
+        //background-color: rgb(102, 0, 51);
+        box-shadow: 1px 1px 0 white, 2px 2px 12px rgb(183, 255, 0);
+    }
+    25% {
+        //background-color: rgb(76, 0, 76);
+        box-shadow: 1px 1px 0 white, 2px 2px 12px rgb(255, 251, 0);
+        //scale: 1.2;
+    }
+    50% {
+        //background-color: rgb(63, 0, 128);
+        box-shadow: 1px 1px 0 white, 2px 2px 12px rgba(0, 255, 81);
+        //scale: 0.8;
+    }
+    75% {
+        //background-color: rgb(0, 0, 128);
+        box-shadow: 1px 1px 0 white, 2px 2px 12px rgb(255, 153, 0);
+    }`;
+
+
+const ContactCardAvatar = (props: { size: string, symbol?: string, imageUrl?: string, onClick?: () => void, sx?: SxProps }) =>
+  <Avatar
+    // variant='outlined'
+    onClick={props.onClick}
+    src={props.imageUrl}
+    sx={{
+      '--Avatar-size': props.size,
+      fontSize: props.size,
+      backgroundColor: 'background.popup',
+      boxShadow: !props.imageUrl ? 'sm' : null,
+      ...props.sx,
+    }}
+  >
+    {/* As fallback, show the large Persona Symbol */}
+    {!props.imageUrl && <Box>{props.symbol}</Box>}
+  </Avatar>;
+
+
+const ContactCardConversationCall = (props: { conversation: DConversation, onConversationClicked: (conversationId: DConversationId) => void, }) =>
+  <Chip
+    variant='plain' color='primary' size='sm'
+    endDecorator={<CallIcon />}
+    onClick={() => props.onConversationClicked(props.conversation.id)}
+    slotProps={{
+      root: {
+        sx: {
+          maxWidth: 'unset',
+          mx: -1,
+          px: 1,
+          py: 0.25,
+        },
+      },
+    }}
+  >
+    {conversationTitle(props.conversation, 'Chat')}
+  </Chip>;
+
+
+function CallContactCard(props: {
+  persona: MockPersona,
+  callGrayUI: boolean,
+  conversations: DConversation[],
+  setCallIntent: (intent: AppCallIntent) => void,
+}) {
+
+  // state
+  const [conversationsExpanded, setConversationsExpanded] = React.useState(false);
+
+  // derived state
+  const { persona, setCallIntent } = props;
+  const conversations = props.conversations.slice(0, conversationsExpanded ? undefined : COLLAPSED_COUNT);
+  const hasConversations = !!conversations.length;
+  const showExpander = props.conversations.length > COLLAPSED_COUNT && !conversationsExpanded;
+
+
+  const handleCallPersona = React.useCallback(() => setCallIntent({
+    conversationId: null,
+    personaId: persona.personaId,
+    backTo: 'app-call-contacts',
+  }), [persona.personaId, setCallIntent]);
+
+  const handleCallPersonaRe = React.useCallback((conversationId: DConversationId | null) => setCallIntent({
+    conversationId: conversationId,
+    personaId: persona.personaId,
+    backTo: 'app-call-contacts',
+  }), [persona.personaId, setCallIntent]);
+
+  return (
+
+    <Box sx={{ mt: 3.5 }}>
+
+      <Card sx={{
+        // boxShadow: 'lg',
+        height: '100%',
+        gap: 0,
+      }}>
+
+        {/* Persona Symbol - Overlapping */}
+        <ContactCardAvatar
+          size='6rem'
+          symbol={persona.symbol}
+          imageUrl={persona?.imageUri}
+          sx={{
+            mx: 'auto',
+            mt: '-2.5rem',
+            zIndex: 1,
+          }}
+        />
+
+        <CardContent sx={{ my: 2, display: 'flex' }}>
+          {/* Persona Description */}
+          <Typography level='body-xs' sx={{ minHeight: '3em', mb: hasConversations ? 1.5 : undefined }}>
+            {typeof persona.description === 'string' ? persona.description : 'Custom persona'}
+          </Typography>
+
+          {/*{hasConversations && <Divider>*/}
+          {/*<Typography level='body-xs'>call about</Typography>*/}
+          {/*</Divider>}*/}
+
+          {/* Persona Recent Converstions */}
+          {conversations.map(conversation =>
+            <ContactCardConversationCall
+              key={conversation.id}
+              conversation={conversation}
+              onConversationClicked={handleCallPersonaRe}
+            />,
+          )}
+
+          {showExpander && <Chip
+            variant='plain' color='primary' size='sm'
+            onClick={() => setConversationsExpanded(true)}
+            slotProps={{
+              root: {
+                sx: {
+                  maxWidth: 'unset',
+                  mx: -1,
+                  px: 1,
+                  py: 0.25,
+                },
+              },
+            }}
+          >
+            {`+${props.conversations.length - COLLAPSED_COUNT} more`}
+          </Chip>}
+
+        </CardContent>
+
+        {/*<Divider />*/}
+
+        {/* Bottom Name and "Call" Button */}
+        <Sheet
+          variant='soft' color='primary'
+          invertedColors={props.callGrayUI ? undefined : true}
+          sx={{
+            // emulate CardOverflow, because CardOverflow doesn't work well with Sheet/Inverted
+            // (there's also a potential top-level inversion)
+            '--variant-borderWidth': '1px',
+            '--CardOverflow-offset': 'calc(-1 * var(--Card-padding))',
+            '--CardOverflow-radius': 'calc(var(--Card-radius) - var(--variant-borderWidth, 0px))',
+            margin: '0 var(--CardOverflow-offset) var(--CardOverflow-offset)',
+            borderRadius: '0 0 var(--CardOverflow-radius) var(--CardOverflow-radius)',
+            padding: '0.5rem var(--Card-padding)',
+
+            // contents
+            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+            gap: 1,
+          }}
+        >
+          <Typography level='title-md'>
+            {persona.title}
+          </Typography>
+          <MuiLink overlay onClick={handleCallPersona}>
+            <IconButton size='md' variant='soft' sx={{
+              // borderRadius: '50%',
+              ml: 'auto',
+              mr: -1,
+            }}>
+              <CallIcon />
+            </IconButton>
+          </MuiLink>
+        </Sheet>
+
+      </Card>
+
+    </Box>
+
+  );
+}
+
+
+function useConversationsByPersona() {
+  const conversations = useChatStore(state => state.conversations, shallow);
+
+  return React.useMemo(() => {
+    // group by personaId
+    const groupedConversations: { [personaId: string]: DConversation[] } = conversations.reduce((acc, conversation) => {
+      const personaId = conversation.systemPurposeId;
+      acc[personaId] = [...acc[personaId] || [], conversation];
+      return acc;
+    }, {} as { [personaId: string]: DConversation[] });
+
+    // sort conversations by time and limit to 3
+    Object.values(groupedConversations).forEach(conversations =>
+      conversations.sort((a, b) => (b.updated || b.created) - (a.updated || a.created)),
+    );
+
+    return groupedConversations;
+  }, [conversations]);
+}
+
+
+export function Contacts(props: { setCallIntent: (intent: AppCallIntent) => void }) {
+
+  // external state
+  const {
+    grayUI, toggleGrayUI,
+    showConversations, toggleShowConversations,
+    showSupport, toggleShowSupport,
+  } = useAppCallStore();
+  const { personas } = useMockPersonas();
+  const conversationsByPersona = useConversationsByPersona();
+
+
+  // pluggable UI
+
+  const menuItems = React.useMemo(() => <>
+
+    <MenuItem onClick={toggleShowConversations}>
+      Conversations
+      <Switch checked={showConversations} sx={{ ml: 'auto' }} />
+    </MenuItem>
+
+    <MenuItem onClick={toggleShowSupport}>
+      Support
+      <Switch checked={showSupport} sx={{ ml: 'auto' }} />
+    </MenuItem>
+
+    <MenuItem onClick={toggleGrayUI}>
+      Grayed UI
+      <Switch checked={grayUI} sx={{ ml: 'auto' }} />
+    </MenuItem>
+
+  </>, [grayUI, showConversations, showSupport, toggleGrayUI, toggleShowConversations, toggleShowSupport]);
+
+  usePluggableOptimaLayout(null, null, menuItems, 'CallUI');
+
+
+  return <>
+
+    {/* Header "Call AGI" */}
+    <Box sx={{
+      my: 6,
+      display: 'flex', alignItems: 'center',
+      gap: 3,
+    }}>
+      <IconButton
+        variant='soft' color='success'
+        sx={{
+          '--IconButton-size': { xs: '4.2rem', md: '5rem' },
+          borderRadius: '50%',
+          pointerEvents: 'none',
+          backgroundColor: 'background.popup',
+          animation: `${niceShadowKeyframes} 5s infinite`,
+        }}>
+        <CallIcon />
+      </IconButton>
+
+      <Box>
+        <Typography level='title-lg'>
+          Call AGI
+        </Typography>
+        <Typography level='title-sm' sx={{ mt: 1 }}>
+          Explore ideas and ignite creativity
+        </Typography>
+        <Chip variant='outlined' size='sm' sx={{ px: 1, py: 0.5, mt: 0.25, ml: -1, textWrap: 'wrap' }}>
+          Out-of-the-blue, or within a conversation
+        </Chip>
+      </Box>
+    </Box>
+
+    <ListDivider>
+      Personas
+    </ListDivider>
+
+    {/* Personas Cards */}
+    <Box
+      sx={{
+        width: '100%',
+        my: 5,
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
+        gap: { xs: 1, md: 2 },
+      }}
+    >
+      {personas.map((persona) =>
+        <CallContactCard
+          key={persona.personaId}
+          persona={persona}
+          callGrayUI={grayUI}
+          conversations={!showConversations ? [] : conversationsByPersona[persona.personaId] || []}
+          setCallIntent={props.setCallIntent}
+        />,
+      )}
+    </Box>
+
+    {showSupport && <ListDivider sx={{ my: 1 }} />}
+
+    {showSupport && <GitHubProjectIssueCard
+      issue={354}
+      text='Call App: Support thread and compatibility matrix'
+      note={<>
+        Voice input uses the HTML Web Speech API, and speech output requires an ElevenLabs API Key.
+      </>}
+      // note2='Please report any issues you encounter'
+      sx={{
+        width: '100%',
+        mb: 2,
+        mt: 5,
+      }}
+    />}
+
+  </>;
+}

src/apps/call/Telephone.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { Box, Card, ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
+import { Box, Card, ListDivider, ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import CallEndIcon from '@mui/icons-material/CallEnd';
 import CallIcon from '@mui/icons-material/Call';
-import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined';
 import MicIcon from '@mui/icons-material/Mic';
 import MicNoneIcon from '@mui/icons-material/MicNone';
 import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 
-import { useChatLLMDropdown } from '../chat/components/applayout/useLLMDropdown';
+import { ScrollToBottom } from '../chat/components/scroll-to-bottom/ScrollToBottom';
+import { ScrollToBottomButton } from '../chat/components/scroll-to-bottom/ScrollToBottomButton';
+import { useChatLLMDropdown } from '../chat/components/useLLMDropdown';
 
 import { EXPERIMENTAL_speakTextStream } from '~/modules/elevenlabs/elevenlabs.client';
 import { SystemPurposeId, SystemPurposes } from '../../data';
@@ -20,14 +21,16 @@ import { useElevenLabsVoiceDropdown } from '~/modules/elevenlabs/useElevenLabsVo
 import { Link } from '~/common/components/Link';
 import { SpeechResult, useSpeechRecognition } from '~/common/components/useSpeechRecognition';
 import { conversationTitle, createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
+import { launchAppChat, navigateToIndex } from '~/common/app.routes';
 import { playSoundUrl, usePlaySoundUrl } from '~/common/util/audioUtils';
 import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 
+import type { AppCallIntent } from './AppCall';
 import { CallAvatar } from './components/CallAvatar';
 import { CallButton } from './components/CallButton';
 import { CallMessage } from './components/CallMessage';
 import { CallStatus } from './components/CallStatus';
-import { launchAppChat, ROUTE_APP_CHAT } from '~/common/app.routes';
+import { useAppCallStore } from './state/store-app-call';
 
 
 function CallMenuItems(props: {
@@ -38,6 +41,7 @@ function CallMenuItems(props: {
 }) {
 
   // external state
+  const { grayUI, toggleGrayUI } = useAppCallStore();
   const { voicesDropdown } = useElevenLabsVoiceDropdown(false, !props.override);
 
   const handlePushToTalkToggle = () => props.setPushToTalk(!props.pushToTalk);
@@ -63,8 +67,14 @@ function CallMenuItems(props: {
       {voicesDropdown}
     </MenuItem>
 
+    <ListDivider />
+
+    <MenuItem onClick={toggleGrayUI}>
+      Grayed UI
+      <Switch checked={grayUI} sx={{ ml: 'auto' }} />
+    </MenuItem>
+
     <MenuItem component={Link} href='https://github.com/enricoros/big-agi/issues/175' target='_blank'>
-      <ListItemDecorator><ChatOutlinedIcon /></ListItemDecorator>
       Voice Calls Feedback
     </MenuItem>
 
@@ -72,9 +82,9 @@ function CallMenuItems(props: {
 }
 
 
-export function CallUI(props: {
-  conversationId: string,
-  personaId: string,
+export function Telephone(props: {
+  callIntent: AppCallIntent,
+  backToContacts: () => void,
 }) {
 
   // state
@@ -89,14 +99,16 @@ export function CallUI(props: {
 
   // external state
   const { chatLLMId, chatLLMDropdown } = useChatLLMDropdown();
-  const { chatTitle, messages } = useChatStore(state => {
-    const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
+  const { chatTitle, reMessages } = useChatStore(state => {
+    const conversation = props.callIntent.conversationId
+      ? state.conversations.find(conversation => conversation.id === props.callIntent.conversationId) ?? null
+      : null;
     return {
-      chatTitle: conversation ? conversationTitle(conversation) : 'no conversation',
-      messages: conversation ? conversation.messages : [],
+      chatTitle: conversation ? conversationTitle(conversation) : null,
+      reMessages: conversation ? conversation.messages : null,
     };
   }, shallow);
-  const persona = SystemPurposes[props.personaId as SystemPurposeId] ?? undefined;
+  const persona = SystemPurposes[props.callIntent.personaId as SystemPurposeId] ?? undefined;
   const personaCallStarters = persona?.call?.starters ?? undefined;
   const personaVoiceId = overridePersonaVoice ? undefined : (persona?.voices?.elevenLabs?.voiceId ?? undefined);
   const personaSystemMessage = persona?.systemMessage ?? undefined;
@@ -193,8 +205,8 @@ export function CallUI(props: {
     if (!chatLLMId) return;
 
     // temp fix: when the chat has no messages, only assume a single system message
-    const chatMessages: { role: VChatMessageIn['role'], text: string }[] = messages.length > 0
-      ? messages
+    const chatMessages: { role: VChatMessageIn['role'], text: string }[] = (reMessages && reMessages.length > 0)
+      ? reMessages
       : personaSystemMessage
         ? [{ role: 'system', text: personaSystemMessage }]
         : [];
@@ -223,16 +235,18 @@ export function CallUI(props: {
         error = err;
     }).finally(() => {
       setPersonaTextInterim(null);
-      setCallMessages(messages => [...messages, createDMessage('assistant', finalText + (error ? ` (ERROR: ${error.message || error.toString()})` : ''))]);
+      if (finalText || error)
+        setCallMessages(messages => [...messages, createDMessage('assistant', finalText + (error ? ` (ERROR: ${error.message || error.toString()})` : ''))]);
       // fire/forget
-      void EXPERIMENTAL_speakTextStream(finalText, personaVoiceId);
+      if (finalText?.length >= 1)
+        void EXPERIMENTAL_speakTextStream(finalText, personaVoiceId);
     });
 
     return () => {
       responseAbortController.current?.abort();
       responseAbortController.current = null;
     };
-  }, [isConnected, callMessages, chatLLMId, messages, personaVoiceId, personaSystemMessage]);
+  }, [isConnected, callMessages, chatLLMId, personaVoiceId, personaSystemMessage, reMessages]);
 
   // [E] Message interrupter
   const abortTrigger = isConnected && isRecordingSpeech;
@@ -294,76 +308,109 @@ export function CallUI(props: {
 
     <CallStatus
       callerName={isConnected ? undefined : personaName}
-      statusText={isRinging ? 'is calling you' : isDeclined ? 'call declined' : isEnded ? 'call ended' : callElapsedTime}
+      statusText={isRinging ? '' /*'is calling you'*/ : isDeclined ? 'call declined' : isEnded ? 'call ended' : callElapsedTime}
       regardingText={chatTitle}
       micError={!isMicEnabled} speakError={!isTTSEnabled}
     />
 
     {/* Live Transcript, w/ streaming messages, audio indication, etc. */}
     {(isConnected || isEnded) && (
-      <Card variant='soft' sx={{
+      <Card variant='outlined' sx={{
         flexGrow: 1,
-        minHeight: '15dvh', maxHeight: '24dvh',
-        overflow: 'auto',
+        maxHeight: '28%',
+        minHeight: '20%',
         width: '100%',
+
+        // style
+        // backgroundColor: 'background.surface',
         borderRadius: 'lg',
-        flexDirection: 'column-reverse',
+        // boxShadow: 'sm',
+
+        // children
+        padding: 0, // move this to the ScrollToBottom component
       }}>
 
-        {/* Messages in reverse order, for auto-scroll from the bottom */}
-        <Box sx={{ display: 'flex', flexDirection: 'column-reverse', gap: 1 }}>
+        <ScrollToBottom
+          // bootToBottom
+          stickToBottom
+          sx={{
+            // allows the content to be scrolled (all browsers)
+            overflowY: 'auto',
+            // actually make sure this scrolls & fills
+            height: '100%',
 
-          {/* Listening... */}
-          {isRecording && (
-            <CallMessage
-              text={<>{speechInterim?.transcript ? speechInterim.transcript + ' ' : ''}<i>{speechInterim?.interimTranscript}</i></>}
-              variant={isRecordingSpeech ? 'solid' : 'outlined'}
-              role='user'
-            />
-          )}
+            // content
+            display: 'grid',
+            padding: 1,
+          }}
+        >
 
-          {/* Persona streaming text... */}
-          {!!personaTextInterim && (
-            <CallMessage
-              text={personaTextInterim}
-              variant='solid' color='neutral'
-              role='assistant'
-            />
-          )}
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
 
-          {/* Messages (last 6 messages, in reverse order) */}
-          {callMessages.slice(-6).reverse().map((message) =>
-            <CallMessage
-              key={message.id}
-              text={message.text}
-              variant={message.role === 'assistant' ? 'solid' : 'soft'} color='neutral'
-              role={message.role} />,
-          )}
-        </Box>
+            {/* Call Messages [] */}
+            {callMessages.map((message) =>
+              <CallMessage
+                key={message.id}
+                text={message.text}
+                variant={message.role === 'assistant' ? 'solid' : 'soft'}
+                color={message.role === 'assistant' ? 'neutral' : 'primary'}
+                role={message.role} />,
+            )}
+
+            {/* Persona streaming text... */}
+            {!!personaTextInterim && (
+              <CallMessage
+                text={personaTextInterim}
+                variant='outlined'
+                color='neutral'
+                role='assistant'
+              />
+            )}
+
+            {/* Listening... */}
+            {isRecording && (
+              <CallMessage
+                text={<>{speechInterim?.transcript.trim() || null}{speechInterim?.interimTranscript.trim() ? <i> {speechInterim.interimTranscript}</i> : null}</>}
+                variant={(isRecordingSpeech || !!speechInterim?.transcript) ? 'soft' : 'outlined'}
+                color='primary'
+                role='user'
+              />
+            )}
+
+          </Box>
+
+          {/* Visibility and actions are handled via Context */}
+          <ScrollToBottomButton />
+
+        </ScrollToBottom>
       </Card>
     )}
 
     {/* Call Buttons */}
-    <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-evenly' }}>
+    <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-evenly', gap: 4 }}>
 
       {/* [ringing] Decline / Accept */}
-      {isRinging && <CallButton Icon={CallEndIcon} text='Decline' color='danger' onClick={() => setStage('declined')} />}
-      {isRinging && isEnabled && <CallButton Icon={CallIcon} text='Accept' color='success' variant='soft' onClick={() => setStage('connected')} />}
+      {isRinging && <CallButton Icon={CallEndIcon} text='Decline' color='danger' variant='solid' onClick={() => setStage('declined')} />}
+      {isRinging && isEnabled && <CallButton Icon={CallIcon} text='Accept' color='success' variant='solid' onClick={() => setStage('connected')} />}
 
       {/* [Calling] Hang / PTT (mute not enabled yet) */}
-      {isConnected && <CallButton Icon={CallEndIcon} text='Hang up' color='danger' onClick={handleCallStop} />}
-      {isConnected && (pushToTalk
-          ? <CallButton Icon={MicIcon} onClick={toggleRecording}
-                        text={isRecordingSpeech ? 'Listening...' : isRecording ? 'Listening' : 'Push To Talk'}
-                        variant={isRecordingSpeech ? 'solid' : isRecording ? 'soft' : 'outlined'} />
-          : null
+      {isConnected && <CallButton Icon={CallEndIcon} text='Hang up' color='danger' variant='soft' onClick={handleCallStop} />}
+      {isConnected && (pushToTalk ? (
+          <CallButton
+            Icon={MicIcon} onClick={toggleRecording}
+            text={isRecordingSpeech ? 'Listening...' : isRecording ? 'Listening' : 'Push To Talk'}
+            variant={isRecordingSpeech ? 'solid' : isRecording ? 'soft' : 'outlined'}
+            color='primary'
+            sx={!isRecording ? { backgroundColor: 'background.surface' } : undefined}
+          />
+        ) : null
         // <CallButton disabled={true} Icon={MicOffIcon} onClick={() => setMicMuted(muted => !muted)}
         //               text={micMuted ? 'Muted' : 'Mute'}
         //               color={micMuted ? 'warning' : undefined} variant={micMuted ? 'solid' : 'outlined'} />
       )}
 
       {/* [ended] Back / Call Again */}
-      {(isEnded || isDeclined) && <Link noLinkStyle href={ROUTE_APP_CHAT}><CallButton Icon={ArrowBackIcon} text='Back' variant='soft' /></Link>}
+      {(isEnded || isDeclined) && <CallButton Icon={ArrowBackIcon} text='Back' variant='soft' onClick={() => props.callIntent.backTo === 'app-chat' ? navigateToIndex() : props.backToContacts()} />}
       {(isEnded || isDeclined) && <CallButton Icon={CallIcon} text='Call Again' color='success' variant='soft' onClick={() => setStage('connected')} />}
 
     </Box>

src/apps/call/components/CallAvatar.tsx

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

src/apps/call/components/CallButton.tsx

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

src/apps/call/components/CallMessage.tsx

@@ -19,9 +19,9 @@ export function CallMessage(props: {
         alignSelf: props.role === 'user' ? 'end' : 'start',
         whiteSpace: 'break-spaces',
         borderRadius: 'lg',
-        mt: 'auto',
         // boxShadow: 'md',
         py: 1,
+        px: 1.5,
         ...(props.sx || {}),
       }}
     >

src/apps/call/components/CallStatus.tsx

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

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

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

src/apps/call/state/useMockPersonas.tsx

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

src/apps/chat/AppChat.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import ForkRightIcon from '@mui/icons-material/ForkRight';
-import { Panel, PanelGroup } from 'react-resizable-panels';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
 import { useTheme } from '@mui/joy';
 
@@ -15,18 +14,18 @@ import { useCapabilityTextToImage } from '~/modules/t2i/t2i.client';
 import { Brand } from '~/common/app.config';
 import { ConfirmationModal } from '~/common/components/ConfirmationModal';
 import { GlobalShortcutItem, ShortcutKeyName, useGlobalShortcuts } from '~/common/components/useGlobalShortcut';
-import { GoodPanelResizeHandler } from '~/common/components/panes/GoodPanelResizeHandler';
+import { PanelResizeInset } from '~/common/components/panes/GoodPanelResizeHandler';
 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 { themeBgAppChatComposer } from '~/common/app.theme';
 import { useFolderStore } from '~/common/state/store-folders';
+import { useIsMobile } from '~/common/components/useMatchMedia';
 import { useOptimaLayout, usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
-import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
 import type { ComposerOutputMultiPart } from './components/composer/composer.types';
-import { ChatDrawerContentMemo } from './components/applayout/ChatDrawerItems';
-import { ChatDropdowns } from './components/applayout/ChatDropdowns';
-import { ChatMenuItems } from './components/applayout/ChatMenuItems';
+import { ChatDrawerMemo } from './components/ChatDrawer';
+import { ChatDropdowns } from './components/ChatDropdowns';
+import { ChatPageMenuItems } from './components/ChatPageMenuItems';
 import { ChatMessageList } from './components/ChatMessageList';
 import { Composer } from './components/composer/Composer';
 import { Ephemerals } from './components/Ephemerals';
@@ -55,19 +54,22 @@ const SPECIAL_ID_WIPE_ALL: DConversationId = 'wipe-chats';
 export function AppChat() {
 
   // state
+  const [isComposerMulticast, setIsComposerMulticast] = React.useState(false);
   const [isMessageSelectionMode, setIsMessageSelectionMode] = React.useState(false);
   const [diagramConfig, setDiagramConfig] = React.useState<DiagramConfig | null>(null);
   const [tradeConfig, setTradeConfig] = React.useState<TradeConfig | null>(null);
   const [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 showNextTitleChange = React.useRef(false);
   const composerTextAreaRef = React.useRef<HTMLTextAreaElement>(null);
-  const [_selectedFolderId, setSelectedFolderId] = React.useState<string | null>(null);
+  const [_activeFolderId, setActiveFolderId] = React.useState<string | null>(null);
 
   // external state
   const theme = useTheme();
 
+  const isMobile = useIsMobile();
+
   const { openLlmOptions } = useOptimaLayout();
 
   const { chatLLM } = useChatLLM();
@@ -78,8 +80,7 @@ export function AppChat() {
     navigateHistoryInFocusedPane,
     openConversationInFocusedPane,
     openConversationInSplitPane,
-    paneIndex,
-    duplicatePane,
+    focusedPaneIndex,
     removePane,
     setFocusedPane,
   } = usePanesManager();
@@ -87,6 +88,7 @@ export function AppChat() {
   const {
     title: focusedChatTitle,
     chatIdx: focusedChatNumber,
+    isNoChat: isNoChat,
     isChatEmpty: isFocusedChatEmpty,
     areChatsEmpty,
     newConversationId,
@@ -101,20 +103,21 @@ export function AppChat() {
 
   const { mayWork: capabilityHasT2I } = useCapabilityTextToImage();
 
-  const { folderConversationsCount, selectedFolderId } = useFolderStore(state => {
-    const selectedFolderId = state.useFolders ? _selectedFolderId : null;
+  const { activeFolderId, activeFolderConversationsCount } = useFolderStore(({ enableFolders, folders }) => {
+    const activeFolderId = enableFolders ? _activeFolderId : null;
+    const activeFolder = activeFolderId ? folders.find(folder => folder.id === activeFolderId) : null;
     return {
-      folderConversationsCount: selectedFolderId
-        ? state.folders.find(folder => folder.id === selectedFolderId)?.conversationIds.length || 0
-        : conversationsLength,
-      selectedFolderId,
+      activeFolderId: activeFolder?.id ?? null,
+      activeFolderConversationsCount: activeFolder ? activeFolder.conversationIds.length : conversationsLength,
     };
   });
 
   // Window actions
 
-  const panesConversationIDs = chatPanes.length > 0 ? chatPanes.map((pane) => pane.conversationId) : [null];
-  const isSplitPane = chatPanes.length > 1;
+  const isMultiPane = chatPanes.length >= 2;
+  const isMultiAddable = chatPanes.length < 4;
+  const isMultiConversationId = isMultiPane && new Set(chatPanes.map((pane) => pane.conversationId)).size >= 2;
+  const willMulticast = isComposerMulticast && isMultiConversationId;
 
   const setFocusedConversationId = React.useCallback((conversationId: DConversationId | null) => {
     conversationId && openConversationInFocusedPane(conversationId);
@@ -124,21 +127,14 @@ export function AppChat() {
     conversationId && openConversationInSplitPane(conversationId);
   }, [openConversationInSplitPane]);
 
-  const toggleSplitPane = React.useCallback(() => {
-    if (isSplitPane)
-      removePane(paneIndex ?? chatPanes.length - 1);
-    else
-      duplicatePane(paneIndex ?? chatPanes.length - 1);
-  }, [chatPanes.length, duplicatePane, isSplitPane, paneIndex, removePane]);
-
   const handleNavigateHistory = React.useCallback((direction: 'back' | 'forward') => {
     if (navigateHistoryInFocusedPane(direction))
-      showNextTitle.current = true;
+      showNextTitleChange.current = true;
   }, [navigateHistoryInFocusedPane]);
 
   React.useEffect(() => {
-    if (showNextTitle.current) {
-      showNextTitle.current = false;
+    if (showNextTitleChange.current) {
+      showNextTitleChange.current = false;
       const title = (focusedChatNumber >= 0 ? `#${focusedChatNumber + 1} · ` : '') + (focusedChatTitle || 'New Chat');
       const id = addSnackbar({ key: 'focused-title', message: title, type: 'title' });
       return () => removeSnackbar(id);
@@ -147,7 +143,7 @@ export function AppChat() {
 
   // Execution
 
-  const _handleExecute = React.useCallback(async (chatModeId: ChatModeId, conversationId: DConversationId, history: DMessage[]) => {
+  const _handleExecute = React.useCallback(async (chatModeId: ChatModeId, conversationId: DConversationId, history: DMessage[]): Promise<void> => {
     const chatLLMId = getChatLLMId();
     if (!chatModeId || !conversationId || !chatLLMId) return;
 
@@ -170,6 +166,13 @@ export function AppChat() {
             return await runReActUpdatingState(conversationId, chatCommand.params!, chatLLMId);
 
           case 'chat-alter':
+            if (chatCommand.command === '/clear') {
+              if (chatCommand.params === 'all')
+                return setMessages(conversationId, []);
+              const helpMessage = createDMessage('assistant', 'This command requires the \'all\' parameter to confirm the operation.');
+              helpMessage.originLLM = Brand.Title.Base;
+              return setMessages(conversationId, [...history, helpMessage]);
+            }
             Object.assign(lastMessage, {
               role: chatCommand.command.startsWith('/s') ? 'system' : chatCommand.command.startsWith('/a') ? 'assistant' : 'user',
               sender: 'Bot',
@@ -235,21 +238,30 @@ export function AppChat() {
     }
     const userText = multiPartMessage[0].text;
 
-    // find conversation
-    const conversation = getConversation(conversationId);
-    if (!conversation)
-      return false;
+    // multicast: send the message to all the panes
+    const uniqueIds = new Set([conversationId]);
+    if (willMulticast)
+      chatPanes.forEach(pane => pane.conversationId && uniqueIds.add(pane.conversationId));
 
-    // start execution (async)
-    void _handleExecute(chatModeId, conversationId, [
-      ...conversation.messages,
-      createDMessage('user', userText),
-    ]);
-    return true;
+    // we loop to handle both the normal and multicast modes
+    let enqueued = false;
+    for (const _cId of uniqueIds) {
+      const _conversation = getConversation(_cId);
+      if (_conversation) {
+        // start execution fire/forget
+        void _handleExecute(chatModeId, _cId, [
+          ..._conversation.messages,
+          createDMessage('user', userText),
+        ]);
+        enqueued = true;
+      }
+    }
+    return enqueued;
   };
 
-  const handleConversationExecuteHistory = async (conversationId: DConversationId, history: DMessage[]) =>
+  const handleConversationExecuteHistory = React.useCallback(async (conversationId: DConversationId, history: DMessage[]): Promise<void> => {
     await _handleExecute('generate-text', conversationId, history);
+  }, [_handleExecute]);
 
   const handleMessageRegenerateLast = React.useCallback(async () => {
     const focusedConversation = getConversation(focusedConversationId);
@@ -262,9 +274,9 @@ export function AppChat() {
     }
   }, [focusedConversationId, _handleExecute]);
 
-  const handleTextDiagram = async (diagramConfig: DiagramConfig | null) => setDiagramConfig(diagramConfig);
+  const handleTextDiagram = React.useCallback((diagramConfig: DiagramConfig | null) => setDiagramConfig(diagramConfig), []);
 
-  const handleTextImagine = async (conversationId: DConversationId, messageText: string) => {
+  const handleTextImagine = React.useCallback(async (conversationId: DConversationId, messageText: string): Promise<void> => {
     const conversation = getConversation(conversationId);
     if (!conversation)
       return;
@@ -273,56 +285,56 @@ export function AppChat() {
       ...conversation.messages,
       createDMessage('user', imaginedPrompt),
     ]);
-  };
+  }, [_handleExecute]);
 
-  const handleTextSpeak = async (text: string) => {
+  const handleTextSpeak = React.useCallback(async (text: string): Promise<void> => {
     await speakText(text);
-  };
+  }, []);
 
   // Chat actions
 
-  const handleConversationNew = React.useCallback(() => {
+  const handleConversationNew = React.useCallback((forceNoRecycle?: boolean) => {
 
     // activate an existing new conversation if present, or create another
-    const conversationId = newConversationId
+    const conversationId = (newConversationId && !forceNoRecycle)
       ? newConversationId
       : prependNewConversation(focusedSystemPurposeId ?? undefined);
     setFocusedConversationId(conversationId);
 
-    // if a folder is selected, add the new conversation to the folder
-    if (selectedFolderId && conversationId)
-      useFolderStore.getState().addConversationToFolder(selectedFolderId, conversationId);
+    // if a folder is active, add the new conversation to the folder
+    if (activeFolderId && conversationId)
+      useFolderStore.getState().addConversationToFolder(activeFolderId, conversationId);
 
     // focus the composer
     composerTextAreaRef.current?.focus();
 
-  }, [focusedSystemPurposeId, newConversationId, prependNewConversation, selectedFolderId, setFocusedConversationId]);
+  }, [activeFolderId, focusedSystemPurposeId, newConversationId, prependNewConversation, setFocusedConversationId]);
 
-  const handleConversationImportDialog = () => setTradeConfig({ dir: 'import' });
+  const handleConversationImportDialog = React.useCallback(() => setTradeConfig({ dir: 'import' }), []);
 
-  const handleConversationExport = (conversationId: DConversationId | null) => setTradeConfig({ dir: 'export', conversationId });
+  const handleConversationExport = React.useCallback((conversationId: DConversationId | null, exportAll: boolean) => {
+    setTradeConfig({ dir: 'export', conversationId, exportAll });
+  }, []);
 
-  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)
+  const handleConversationBranch = React.useCallback((srcConversationId: DConversationId, messageId: string | null): DConversationId | null => {
+    // clone data
+    const branchedConversationId = branchConversation(srcConversationId, messageId);
+
+    // if a folder is active, add the new conversation to the folder
+    if (activeFolderId && branchedConversationId)
+      useFolderStore.getState().addConversationToFolder(activeFolderId, branchedConversationId);
+
+    // replace/open a new pane with this
+    showNextTitleChange.current = true;
+    if (isMultiAddable)
       openSplitConversationId(branchedConversationId);
     else
       setFocusedConversationId(branchedConversationId);
-    return branchedConversationId;
-  }, [branchConversation, openSplitConversationId, setFocusedConversationId]);
 
-  const handleConversationFlatten = (conversationId: DConversationId) => setFlattenConversationId(conversationId);
+    return branchedConversationId;
+  }, [activeFolderId, branchConversation, isMultiAddable, openSplitConversationId, setFocusedConversationId]);
+
+  const handleConversationFlatten = React.useCallback((conversationId: DConversationId) => setFlattenConversationId(conversationId), []);
 
   const handleConfirmedClearConversation = React.useCallback(() => {
     if (clearConversationId) {
@@ -331,29 +343,26 @@ export function AppChat() {
     }
   }, [clearConversationId, setMessages]);
 
-  const handleConversationClear = (conversationId: DConversationId) => setClearConversationId(conversationId);
+  const handleConversationClear = React.useCallback((conversationId: DConversationId) => setClearConversationId(conversationId), []);
 
-  const handleConfirmedDeleteConversation = () => {
-    if (deleteConversationId) {
-      let nextConversationId: DConversationId | null;
-      if (deleteConversationId === SPECIAL_ID_WIPE_ALL)
-        nextConversationId = wipeAllConversations(focusedSystemPurposeId ?? undefined, selectedFolderId);
-      else
-        nextConversationId = deleteConversation(deleteConversationId);
-      setFocusedConversationId(nextConversationId);
-      setDeleteConversationId(null);
-    }
-  };
+  const handleConversationsDeleteAll = React.useCallback(() => setDeleteConversationId(SPECIAL_ID_WIPE_ALL), []);
 
-  const handleConversationsDeleteAll = () => setDeleteConversationId(SPECIAL_ID_WIPE_ALL);
+  const handleConversationDelete = React.useCallback((conversationId: DConversationId, bypassConfirmation: boolean) => {
+    // show dialog if not bypassed
+    if (!bypassConfirmation)
+      return setDeleteConversationId(conversationId);
 
-  const handleConversationDelete = React.useCallback(
-    (conversationId: DConversationId, bypassConfirmation: boolean) => {
-      if (bypassConfirmation) setFocusedConversationId(deleteConversation(conversationId));
-      else setDeleteConversationId(conversationId);
-    },
-    [deleteConversation, setFocusedConversationId],
-  );
+    const nextConversationId = conversationId === SPECIAL_ID_WIPE_ALL
+      ? wipeAllConversations(activeFolderId /* restricted to this folder (or null for all) */, /*focusedSystemPurposeId ??*/ undefined)
+      : deleteConversation(conversationId, /*focusedSystemPurposeId ??*/ undefined);
+    setFocusedConversationId(nextConversationId);
+
+    setDeleteConversationId(null);
+  }, [activeFolderId, deleteConversation, setFocusedConversationId, wipeAllConversations]);
+
+  const handleConfirmedDeleteConversation = React.useCallback(() => {
+    deleteConversationId && handleConversationDelete(deleteConversationId, true);
+  }, [deleteConversationId, handleConversationDelete]);
 
   // Shortcuts
 
@@ -372,7 +381,7 @@ export function AppChat() {
     ['d', true, false, true, () => focusedConversationId && handleConversationDelete(focusedConversationId, false)],
     [ShortcutKeyName.Left, true, false, true, () => handleNavigateHistory('back')],
     [ShortcutKeyName.Right, true, false, true, () => handleNavigateHistory('forward')],
-  ], [focusedConversationId, handleConversationBranch, handleConversationDelete, handleConversationNew, handleMessageRegenerateLast, handleNavigateHistory, handleOpenChatLlmOptions, isFocusedChatEmpty]);
+  ], [focusedConversationId, handleConversationBranch, handleConversationClear, handleConversationDelete, handleConversationNew, handleMessageRegenerateLast, handleNavigateHistory, handleOpenChatLlmOptions, isFocusedChatEmpty]);
   useGlobalShortcuts(shortcuts);
 
   // Pluggable ApplicationBar components
@@ -380,41 +389,41 @@ export function AppChat() {
   const centerItems = React.useMemo(() =>
       <ChatDropdowns
         conversationId={focusedConversationId}
-        isSplitPanes={isSplitPane}
-        onToggleSplitPanes={toggleSplitPane}
       />,
-    [focusedConversationId, isSplitPane, toggleSplitPane],
+    [focusedConversationId],
   );
 
   const drawerContent = React.useMemo(() =>
-      <ChatDrawerContentMemo
+      <ChatDrawerMemo
         activeConversationId={focusedConversationId}
-        disableNewButton={isFocusedChatEmpty}
+        activeFolderId={activeFolderId}
+        chatPanesConversationIds={chatPanes.map(pane => pane.conversationId).filter(Boolean) as DConversationId[]}
+        disableNewButton={isFocusedChatEmpty && !isNoChat}
         onConversationActivate={setFocusedConversationId}
         onConversationDelete={handleConversationDelete}
         onConversationExportDialog={handleConversationExport}
         onConversationImportDialog={handleConversationImportDialog}
         onConversationNew={handleConversationNew}
         onConversationsDeleteAll={handleConversationsDeleteAll}
-        selectedFolderId={selectedFolderId}
-        setSelectedFolderId={setSelectedFolderId}
+        setActiveFolderId={setActiveFolderId}
       />,
-    [focusedConversationId, handleConversationDelete, handleConversationNew, isFocusedChatEmpty, selectedFolderId, setFocusedConversationId],
+    [activeFolderId, chatPanes, focusedConversationId, handleConversationDelete, handleConversationExport, handleConversationImportDialog, handleConversationNew, handleConversationsDeleteAll, isFocusedChatEmpty, isNoChat, setFocusedConversationId],
   );
 
   const menuItems = React.useMemo(() =>
-      <ChatMenuItems
+      <ChatPageMenuItems
+        isMobile={isMobile}
         conversationId={focusedConversationId}
+        disableItems={!focusedConversationId || isFocusedChatEmpty}
         hasConversations={!areChatsEmpty}
-        isConversationEmpty={isFocusedChatEmpty}
         isMessageSelectionMode={isMessageSelectionMode}
-        setIsMessageSelectionMode={setIsMessageSelectionMode}
         onConversationBranch={handleConversationBranch}
         onConversationClear={handleConversationClear}
-        onConversationExport={handleConversationExport}
         onConversationFlatten={handleConversationFlatten}
+        // onConversationNew={handleConversationNew}
+        setIsMessageSelectionMode={setIsMessageSelectionMode}
       />,
-    [areChatsEmpty, focusedConversationId, handleConversationBranch, isFocusedChatEmpty, isMessageSelectionMode],
+    [areChatsEmpty, focusedConversationId, handleConversationBranch, handleConversationClear, handleConversationFlatten, /*handleConversationNew,*/ isFocusedChatEmpty, isMessageSelectionMode, isMobile],
   );
 
   usePluggableOptimaLayout(drawerContent, centerItems, menuItems, 'AppChat');
@@ -422,32 +431,45 @@ export function AppChat() {
   return <>
 
     <PanelGroup
-      direction='horizontal'
+      direction={isMobile ? 'vertical' : 'horizontal'}
       id='app-chat-panels'
     >
 
-      {panesConversationIDs.map((_conversationId, idx, panels) =>
-        <React.Fragment key={`chat-pane-${idx}-${panels.length}-${_conversationId}`}>
+      {chatPanes.map((pane, idx) => {
+        const _paneConversationId = pane.conversationId;
+        const _panesCount = chatPanes.length;
+        const _keyAndId = `chat-pane-${idx}-${_paneConversationId}`;
+        const _sepId = `sep-pane-${idx}-${_paneConversationId}`;
+        return <React.Fragment key={_keyAndId}>
+
           <Panel
-            id={'chat-pane-' + _conversationId}
+            id={_keyAndId}
             order={idx}
-            collapsible
-            defaultSize={panels.length > 0 ? Math.round(100 / panels.length) : undefined}
+            collapsible={chatPanes.length === 2}
+            defaultSize={(_panesCount === 3 && idx === 1) ? 34 : Math.round(100 / _panesCount)}
             minSize={20}
             onClick={(event) => {
               const setFocus = chatPanes.length < 2 || !event.altKey;
               setFocusedPane(setFocus ? idx : -1);
             }}
-            onCollapse={() => setTimeout(() => removePane(idx), 50)}
+            onCollapse={() => {
+              // NOTE: despite the delay to try to let the draggin settle, there seems to be an issue with the Pane locking the screen
+              // setTimeout(() => removePane(idx), 50);
+              // more than 2 will result in an assertion from the framework
+              if (chatPanes.length === 2) removePane(idx);
+            }}
             style={{
               // for anchoring the scroll button in place
               position: 'relative',
-              // 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}` }),
+              ...(isMultiPane ? {
+                borderRadius: '0.375rem',
+                border: `2px solid ${idx === focusedPaneIndex
+                  ? ((willMulticast || !isMultiConversationId) ? theme.palette.primary.solidBg : theme.palette.primary.solidBg)
+                  : ((willMulticast || !isMultiConversationId) ? theme.palette.warning.softActiveBg : theme.palette.background.level1)}`,
+                filter: (!willMulticast && idx !== focusedPaneIndex)
+                  ? (!isMultiConversationId ? 'grayscale(66.67%)' /* clone of the same */ : 'grayscale(66.67%)')
+                  : undefined,
+              } : {}),
             }}
           >
 
@@ -463,10 +485,11 @@ export function AppChat() {
             >
 
               <ChatMessageList
-                conversationId={_conversationId}
+                conversationId={_paneConversationId}
                 capabilityHasT2I={capabilityHasT2I}
                 chatLLMContextTokens={chatLLM?.contextTokens ?? null}
                 isMessageSelectionMode={isMessageSelectionMode}
+                isMobile={isMobile}
                 setIsMessageSelectionMode={setIsMessageSelectionMode}
                 onConversationBranch={handleConversationBranch}
                 onConversationExecuteHistory={handleConversationExecuteHistory}
@@ -474,13 +497,12 @@ export function AppChat() {
                 onTextImagine={handleTextImagine}
                 onTextSpeak={handleTextSpeak}
                 sx={{
-                  backgroundColor: themeBgApp,
                   minHeight: '100%', // ensures filling of the blank space on newer chats
                 }}
               />
 
               <Ephemerals
-                conversationId={_conversationId}
+                conversationId={_paneConversationId}
                 sx={{
                   // TODO: Fixme post panels?
                   // flexGrow: 0.1,
@@ -496,20 +518,28 @@ export function AppChat() {
           </Panel>
 
           {/* Panel Separators & Resizers */}
-          {idx < panels.length - 1 && <GoodPanelResizeHandler />}
+          {idx < _panesCount - 1 && (
+            <PanelResizeHandle id={_sepId}>
+              <PanelResizeInset />
+            </PanelResizeHandle>
+          )}
 
-        </React.Fragment>)}
+        </React.Fragment>;
+      })}
 
     </PanelGroup>
 
     <Composer
+      isMobile={isMobile}
       chatLLM={chatLLM}
       composerTextAreaRef={composerTextAreaRef}
       conversationId={focusedConversationId}
       capabilityHasT2I={capabilityHasT2I}
+      isMulticast={!isMultiConversationId ? null : isComposerMulticast}
       isDeveloperMode={focusedSystemPurposeId === 'Developer'}
       onAction={handleComposerAction}
       onTextImagine={handleTextImagine}
+      setIsMulticast={setIsComposerMulticast}
       sx={{
         zIndex: 21, // position: 'sticky', bottom: 0,
         backgroundColor: themeBgAppChatComposer,
@@ -555,10 +585,10 @@ export function AppChat() {
     {!!deleteConversationId && <ConfirmationModal
       open onClose={() => setDeleteConversationId(null)} onPositive={handleConfirmedDeleteConversation}
       confirmationText={deleteConversationId === SPECIAL_ID_WIPE_ALL
-        ? `Are you absolutely sure you want to delete ${selectedFolderId ? 'ALL conversations in this folder' : 'ALL conversations'}? This action cannot be undone.`
+        ? `Are you absolutely sure you want to delete ${activeFolderId ? 'ALL conversations in this folder' : 'ALL conversations'}? This action cannot be undone.`
         : 'Are you sure you want to delete this conversation?'}
       positiveActionText={deleteConversationId === SPECIAL_ID_WIPE_ALL
-        ? `Yes, delete all ${folderConversationsCount} conversations`
+        ? `Yes, delete all ${activeFolderConversationsCount} conversations`
         : 'Delete conversation'}
     />}
   </>;

src/apps/chat/commands/CommandsAlter.tsx

@@ -1,8 +1,10 @@
+import ClearIcon from '@mui/icons-material/Clear';
+
 import type { ICommandsProvider } from './ICommandsProvider';
 
 export const CommandsAlter: ICommandsProvider = {
   id: 'chat-alter',
-  rank: 20,
+  rank: 25,
 
   getCommands: () => [{
     primary: '/assistant',
@@ -14,6 +16,11 @@ export const CommandsAlter: ICommandsProvider = {
     alternatives: ['/s'],
     arguments: ['text'],
     description: 'Injects system message',
+  }, {
+    primary: '/clear',
+    arguments: ['all'],
+    description: 'Clears the chat (removes all messages)',
+    Icon: ClearIcon,
   }],
 
 };

src/apps/chat/commands/CommandsBrowse.tsx

@@ -4,7 +4,7 @@ import type { ICommandsProvider } from './ICommandsProvider';
 
 export const CommandsBrowse: ICommandsProvider = {
   id: 'ass-browse',
-  rank: 25,
+  rank: 20,
 
   getCommands: () => [{
     primary: '/browse',

src/apps/chat/commands/CommandsReact.tsx

@@ -9,7 +9,7 @@ export const CommandsReact: ICommandsProvider = {
   getCommands: () => [{
     primary: '/react',
     arguments: ['prompt'],
-    description: 'Use the AI ReAct strategy to answer your query (as sidebar)',
+    description: 'Use the AI ReAct strategy to answer your query',
     Icon: PsychologyIcon,
   }],
 

src/apps/chat/components/ChatDrawer.tsx

@@ -0,0 +1,387 @@
+import * as React from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { Box, IconButton, ListDivider, ListItem, ListItemButton, ListItemDecorator, Tooltip } from '@mui/joy';
+import AddIcon from '@mui/icons-material/Add';
+import ClearIcon from '@mui/icons-material/Clear';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';
+import FolderIcon from '@mui/icons-material/Folder';
+import FolderOpenOutlinedIcon from '@mui/icons-material/FolderOpenOutlined';
+import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
+
+import DebounceInput from '~/common/components/DebounceInput';
+import { CloseableMenu } from '~/common/components/CloseableMenu';
+import { DFolder, useFolderStore } from '~/common/state/store-folders';
+import { PageDrawerHeader } from '~/common/layout/optima/components/PageDrawerHeader';
+import { PageDrawerList, PageDrawerTallItemSx } from '~/common/layout/optima/components/PageDrawerList';
+import { conversationTitle, DConversationId, useChatStore } from '~/common/state/store-chats';
+import { themeZIndexOverMobileDrawer } from '~/common/app.theme';
+import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers';
+import { useUIPreferencesStore } from '~/common/state/store-ui';
+
+import { ChatDrawerItemMemo, ChatNavigationItemData, FolderChangeRequest } from './ChatDrawerItem';
+import { ChatFolderList } from './folders/ChatFolderList';
+import { ClearFolderText } from './folders/useFolderDropdown';
+
+
+// this is here to make shallow comparisons work on the next hook
+const noFolders: DFolder[] = [];
+
+/*
+ * Lists folders and returns the active folder
+ */
+export const useFolders = (activeFolderId: string | null) => useFolderStore(({ enableFolders, folders, toggleEnableFolders }) => {
+
+  // finds the active folder if any
+  const activeFolder = (enableFolders && activeFolderId)
+    ? folders.find(folder => folder.id === activeFolderId) ?? null
+    : null;
+
+  return {
+    activeFolder,
+    allFolders: enableFolders ? folders : noFolders,
+    enableFolders,
+    toggleEnableFolders,
+  };
+}, shallow);
+
+
+/*
+ * Returns a string with the pane indices where the conversation is also open, or false if it's not
+ */
+function findOpenInViewNumbers(chatPanesConversationIds: DConversationId[], ourId: DConversationId): string | false {
+  if (chatPanesConversationIds.length <= 1) return false;
+  return chatPanesConversationIds.reduce((acc: string[], id, idx) => {
+    if (id === ourId)
+      acc.push((idx + 1).toString());
+    return acc;
+  }, []).join(', ') || false;
+}
+
+
+/*
+ * Optimization: return a reduced version of the DConversation object for 'Drawer Items' purposes,
+ * to avoid unnecessary re-renders on each new character typed by the assistant
+ */
+export const useChatNavigationItemsData = (activeFolder: DFolder | null, allFolders: DFolder[], activeConversationId: DConversationId | null, chatPanesConversationIds: DConversationId[]): ChatNavigationItemData[] =>
+  useChatStore(({ conversations }) => {
+
+    const activeConversations = activeFolder
+      ? conversations.filter(_c => activeFolder.conversationIds.includes(_c.id))
+      : conversations;
+
+    return activeConversations.map((_c): ChatNavigationItemData => ({
+      conversationId: _c.id,
+      isActive: _c.id === activeConversationId,
+      isAlsoOpen: findOpenInViewNumbers(chatPanesConversationIds, _c.id),
+      isEmpty: !_c.messages.length && !_c.userTitle,
+      title: conversationTitle(_c),
+      folder: !allFolders.length
+        ? undefined                             // don't show folder select if folders are disabled
+        : _c.id === activeConversationId        // only show the folder for active conversation(s)
+          ? allFolders.find(folder => folder.conversationIds.includes(_c.id)) ?? null
+          : null,
+      messageCount: _c.messages.length,
+      assistantTyping: !!_c.abortController,
+      systemPurposeId: _c.systemPurposeId,
+    }));
+
+  }, (a, b) => {
+    // custom equality function to avoid unnecessary re-renders
+    return a.length === b.length && a.every((_a, i) => shallow(_a, b[i]));
+  });
+
+
+export const ChatDrawerMemo = React.memo(ChatDrawer);
+
+function ChatDrawer(props: {
+  activeConversationId: DConversationId | null,
+  activeFolderId: string | null,
+  chatPanesConversationIds: DConversationId[],
+  disableNewButton: boolean,
+  onConversationActivate: (conversationId: DConversationId) => void,
+  onConversationDelete: (conversationId: DConversationId, bypassConfirmation: boolean) => void,
+  onConversationExportDialog: (conversationId: DConversationId | null, exportAll: boolean) => void,
+  onConversationImportDialog: () => void,
+  onConversationNew: (forceNoRecycle: boolean) => void,
+  onConversationsDeleteAll: () => void,
+  setActiveFolderId: (folderId: string | null) => void,
+}) {
+
+  const { onConversationActivate, onConversationDelete, onConversationExportDialog, onConversationNew } = props;
+
+  // local state
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = React.useState('');
+  const [folderChangeRequest, setFolderChangeRequest] = React.useState<FolderChangeRequest | null>(null);
+
+  // external state
+  const { closeDrawer, closeDrawerOnMobile } = useOptimaDrawers();
+  const { activeFolder, allFolders, enableFolders, toggleEnableFolders } = useFolders(props.activeFolderId);
+  const chatNavItems = useChatNavigationItemsData(activeFolder, allFolders, props.activeConversationId, props.chatPanesConversationIds);
+  const showSymbols = useUIPreferencesStore(state => state.zenMode !== 'cleaner');
+
+  // derived state
+  const selectConversationsCount = chatNavItems.length;
+  const nonEmptyChats = selectConversationsCount > 1 || (selectConversationsCount === 1 && !chatNavItems[0].isEmpty);
+  const softMaxReached = selectConversationsCount >= 40 && showSymbols;
+
+
+  const isMultiPane = props.chatPanesConversationIds.length >= 2;
+  const handleButtonNew = React.useCallback(() => {
+    onConversationNew(isMultiPane);
+    closeDrawerOnMobile();
+  }, [closeDrawerOnMobile, isMultiPane, onConversationNew]);
+
+
+  const handleConversationActivate = React.useCallback((conversationId: DConversationId, closeMenu: boolean) => {
+    onConversationActivate(conversationId);
+    if (closeMenu)
+      closeDrawerOnMobile();
+  }, [closeDrawerOnMobile, onConversationActivate]);
+
+
+  const handleConversationDelete = React.useCallback((conversationId: DConversationId) => {
+    conversationId && onConversationDelete(conversationId, true);
+  }, [onConversationDelete]);
+
+
+  // Folder change request
+
+  const handleConversationFolderChange = React.useCallback((folderChangeRequest: FolderChangeRequest) => setFolderChangeRequest(folderChangeRequest), []);
+
+  const handleConversationFolderCancel = React.useCallback(() => setFolderChangeRequest(null), []);
+
+  const handleConversationFolderSet = React.useCallback((conversationId: DConversationId, nextFolderId: string | null) => {
+    // Remove conversation from existing folders
+    const { addConversationToFolder, folders, removeConversationFromFolder } = useFolderStore.getState();
+    folders.forEach(folder => folder.conversationIds.includes(conversationId) && removeConversationFromFolder(folder.id, conversationId));
+
+    // Add conversation to the selected folder
+    nextFolderId && addConversationToFolder(nextFolderId, conversationId);
+
+    // Close the menu
+    setFolderChangeRequest(null);
+  }, []);
+
+
+  // Filter chatNavItems based on the search query and rank them by search frequency
+  const filteredChatNavItems = React.useMemo(() => {
+    if (!debouncedSearchQuery) return chatNavItems;
+    return chatNavItems
+      .map(item => {
+        // Get the conversation by ID
+        const conversation = useChatStore.getState().conversations.find(c => c.id === item.conversationId);
+        // Calculate the frequency of the search term in the title and messages
+        const titleFrequency = (item.title.toLowerCase().match(new RegExp(debouncedSearchQuery.toLowerCase(), 'g')) || []).length;
+        const messageFrequency = conversation?.messages.reduce((count, message) => {
+          return count + (message.text.toLowerCase().match(new RegExp(debouncedSearchQuery.toLowerCase(), 'g')) || []).length;
+        }, 0) || 0;
+        // Return the item with the searchFrequency property
+        return {
+          ...item,
+          searchFrequency: titleFrequency + messageFrequency,
+        };
+      })
+      // Exclude items with a searchFrequency of 0
+      .filter(item => item.searchFrequency > 0)
+      // Sort the items by searchFrequency in descending order
+      .sort((a, b) => b.searchFrequency! - a.searchFrequency!);
+  }, [chatNavItems, debouncedSearchQuery]);
+
+
+  // basis for the underline bar
+  const bottomBarBasis = filteredChatNavItems.reduce((longest, _c) => Math.max(longest, _c.searchFrequency ?? _c.messageCount), 1);
+
+
+  // grouping
+  /*let sortedIds = conversationIDs;
+  if (grouping === 'persona') {
+    const conversations = useChatStore.getState().conversations;
+
+    // group conversations by persona
+    const groupedConversations: { [personaId: string]: string[] } = {};
+    conversations.forEach(conversation => {
+      const persona = conversation.systemPurposeId;
+      if (persona) {
+        if (!groupedConversations[persona])
+          groupedConversations[persona] = [];
+        groupedConversations[persona].push(conversation.id);
+      }
+    });
+
+    // flatten grouped conversations
+    sortedIds = Object.values(groupedConversations).flat();
+  }*/
+
+  return <>
+
+    {/* Drawer Header */}
+    <PageDrawerHeader title='Chats' onClose={closeDrawer}>
+      <Tooltip title={enableFolders ? 'Hide Folders' : 'Use Folders'}>
+        <IconButton onClick={toggleEnableFolders}>
+          {enableFolders ? <FolderOpenOutlinedIcon /> : <FolderOutlinedIcon />}
+        </IconButton>
+      </Tooltip>
+    </PageDrawerHeader>
+
+    {/* Folders List */}
+    {/*<Box sx={{*/}
+    {/*  display: 'grid',*/}
+    {/*  gridTemplateRows: !enableFolders ? '0fr' : '1fr',*/}
+    {/*  transition: 'grid-template-rows 0.42s cubic-bezier(.17,.84,.44,1)',*/}
+    {/*  '& > div': {*/}
+    {/*    padding: enableFolders ? 2 : 0,*/}
+    {/*    transition: 'padding 0.42s cubic-bezier(.17,.84,.44,1)',*/}
+    {/*    overflow: 'hidden',*/}
+    {/*  },*/}
+    {/*}}>*/}
+    {enableFolders && (
+      <ChatFolderList
+        folders={allFolders}
+        activeFolderId={props.activeFolderId}
+        onFolderSelect={props.setActiveFolderId}
+      />
+    )}
+    {/*</Box>*/}
+
+    {/* Chats List */}
+    <PageDrawerList variant='plain' noTopPadding noBottomPadding tallRows>
+
+      {enableFolders && <ListDivider sx={{ mb: 0 }} />}
+
+      {/* Search Input Field */}
+      <DebounceInput
+        minChars={2}
+        onDebounce={setDebouncedSearchQuery}
+        debounceTimeout={300}
+        placeholder='Search...'
+        aria-label='Search'
+        sx={{ m: 2 }}
+      />
+
+      <ListItem sx={{ '--ListItem-minHeight': '2.75rem' }}>
+        <ListItemButton disabled={props.disableNewButton && !isMultiPane} onClick={handleButtonNew} sx={PageDrawerTallItemSx}>
+          <ListItemDecorator><AddIcon /></ListItemDecorator>
+          <Box sx={{
+            // style
+            fontSize: 'sm',
+            fontWeight: 'lg',
+            // content
+            flexGrow: 1,
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: 1,
+          }}>
+            New chat
+            {/*<KeyStroke combo='Ctrl + Alt + N' sx={props.disableNewButton ? { opacity: 0.5 } : undefined} />*/}
+          </Box>
+        </ListItemButton>
+      </ListItem>
+
+      {/*<ListDivider sx={{ mt: 0 }} />*/}
+
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+        {/*<ListItem sticky sx={{ justifyContent: 'space-between', boxShadow: 'sm' }}>*/}
+        {/*  <Typography level='body-sm'>*/}
+        {/*    Conversations*/}
+        {/*  </Typography>*/}
+        {/*  <ToggleButtonGroup variant='soft' size='sm' value={grouping} onChange={(_event, newValue) => newValue && setGrouping(newValue)}>*/}
+        {/*    <IconButton value='off'>*/}
+        {/*      <AccessTimeIcon />*/}
+        {/*    </IconButton>*/}
+        {/*    <IconButton value='persona'>*/}
+        {/*      <PersonIcon />*/}
+        {/*    </IconButton>*/}
+        {/*  </ToggleButtonGroup>*/}
+        {/*</ListItem>*/}
+
+        {filteredChatNavItems.map(item =>
+          <ChatDrawerItemMemo
+            key={'nav-' + item.conversationId}
+            item={item}
+            showSymbols={showSymbols}
+            bottomBarBasis={(softMaxReached || debouncedSearchQuery) ? bottomBarBasis : 0}
+            onConversationActivate={handleConversationActivate}
+            onConversationDelete={handleConversationDelete}
+            onConversationExport={onConversationExportDialog}
+            onConversationFolderChange={handleConversationFolderChange}
+          />)}
+      </Box>
+
+      <ListDivider sx={{ mt: 0 }} />
+
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <ListItemButton onClick={props.onConversationImportDialog} sx={{ flex: 1 }}>
+          <ListItemDecorator>
+            <FileUploadOutlinedIcon />
+          </ListItemDecorator>
+          Import
+          {/*<OpenAIIcon sx={{  ml: 'auto' }} />*/}
+        </ListItemButton>
+
+        <ListItemButton disabled={!nonEmptyChats} onClick={() => props.onConversationExportDialog(props.activeConversationId, true)} sx={{ flex: 1 }}>
+          <ListItemDecorator>
+            <FileDownloadOutlinedIcon />
+          </ListItemDecorator>
+          Export
+        </ListItemButton>
+      </Box>
+
+      <ListItemButton disabled={!nonEmptyChats} onClick={props.onConversationsDeleteAll}>
+        <ListItemDecorator>
+          <DeleteOutlineIcon />
+        </ListItemDecorator>
+        Delete {selectConversationsCount >= 2 ? `all ${selectConversationsCount} chats` : 'chat'}
+      </ListItemButton>
+
+    </PageDrawerList>
+
+
+    {/* [Menu] Chat Item Folder Change */}
+    {!!folderChangeRequest?.anchorEl && (
+      <CloseableMenu
+        bigIcons
+        open anchorEl={folderChangeRequest.anchorEl} onClose={handleConversationFolderCancel}
+        placement='bottom-start'
+        zIndex={themeZIndexOverMobileDrawer /* need to be on top of the Modal on Mobile */}
+        sx={{ minWidth: 200 }}
+      >
+
+        {/* Folder Assignment Buttons */}
+        {allFolders.map(folder => {
+          const isRequestFolder = folder === folderChangeRequest.currentFolder;
+          return (
+            <ListItem
+              key={folder.id}
+              variant={isRequestFolder ? 'soft' : 'plain'}
+              onClick={() => handleConversationFolderSet(folderChangeRequest.conversationId, folder.id)}
+            >
+              <ListItemButton>
+                <ListItemDecorator>
+                  <FolderIcon sx={{ color: folder.color }} />
+                </ListItemDecorator>
+                {folder.title}
+              </ListItemButton>
+            </ListItem>
+          );
+        })}
+
+        {/* Remove Folder Assignment */}
+        {!!folderChangeRequest.currentFolder && (
+          <ListItem onClick={() => handleConversationFolderSet(folderChangeRequest.conversationId, null)}>
+            <ListItemButton>
+              <ListItemDecorator>
+                <ClearIcon />
+              </ListItemDecorator>
+              {ClearFolderText}
+            </ListItemButton>
+          </ListItem>
+        )}
+
+      </CloseableMenu>
+    )}
+
+  </>;
+}

src/apps/chat/components/ChatDrawerItem.tsx

@@ -0,0 +1,364 @@
+import * as React from 'react';
+
+import { Avatar, Box, IconButton, ListItem, ListItemButton, ListItemDecorator, Sheet, styled, Tooltip, Typography } from '@mui/joy';
+import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
+import CloseIcon from '@mui/icons-material/Close';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import EditIcon from '@mui/icons-material/Edit';
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import FolderIcon from '@mui/icons-material/Folder';
+import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
+
+import { SystemPurposeId, SystemPurposes } from '../../../data';
+
+import { conversationAutoTitle } from '~/modules/aifn/autotitle/autoTitle';
+
+import type { DFolder } from '~/common/state/store-folders';
+import { DConversationId, useChatStore } from '~/common/state/store-chats';
+import { InlineTextarea } from '~/common/components/InlineTextarea';
+import { isDeepEqual } from '~/common/util/jsUtils';
+
+
+// set to true to display the conversation IDs
+// const DEBUG_CONVERSATION_IDS = false;
+
+
+export const FadeInButton = styled(IconButton)({
+  opacity: 0.667,
+  transition: 'opacity 0.2s',
+  '&:hover': { opacity: 1 },
+});
+
+
+export const ChatDrawerItemMemo = React.memo(ChatDrawerItem, (prev, next) =>
+  // usign a custom function because `ChatNavigationItemData` is a complex object and memo won't work
+  isDeepEqual(prev.item, next.item) &&
+  prev.showSymbols === next.showSymbols &&
+  prev.bottomBarBasis === next.bottomBarBasis &&
+  prev.onConversationActivate === next.onConversationActivate &&
+  prev.onConversationDelete === next.onConversationDelete &&
+  prev.onConversationExport === next.onConversationExport &&
+  prev.onConversationFolderChange === next.onConversationFolderChange,
+);
+
+export interface ChatNavigationItemData {
+  conversationId: DConversationId;
+  isActive: boolean;
+  isAlsoOpen: string | false;
+  isEmpty: boolean;
+  title: string;
+  folder: DFolder | null | undefined; // null: 'All', undefined: do not show folder select
+  messageCount: number;
+  assistantTyping: boolean;
+  systemPurposeId: SystemPurposeId;
+  searchFrequency?: number;
+}
+
+export interface FolderChangeRequest {
+  conversationId: DConversationId;
+  anchorEl: HTMLButtonElement;
+  currentFolder: DFolder | null;
+}
+
+function ChatDrawerItem(props: {
+  // NOTE: always update the Memo comparison if you add or remove props
+  item: ChatNavigationItemData,
+  showSymbols: boolean,
+  bottomBarBasis: number,
+  onConversationActivate: (conversationId: DConversationId, closeMenu: boolean) => void,
+  onConversationDelete: (conversationId: DConversationId) => void,
+  onConversationExport: (conversationId: DConversationId, exportAll: boolean) => void,
+  onConversationFolderChange: (folderChangeRequest: FolderChangeRequest) => void,
+}) {
+
+  // state
+  const [isEditingTitle, setIsEditingTitle] = React.useState(false);
+  const [deleteArmed, setDeleteArmed] = React.useState(false);
+
+  // derived state
+  const { onConversationExport, onConversationFolderChange } = props;
+  const { conversationId, isActive, isAlsoOpen, title, folder, messageCount, assistantTyping, systemPurposeId, searchFrequency } = props.item;
+  const isNew = messageCount === 0;
+
+
+  // [effect] auto-disarm when inactive
+  const shallClose = deleteArmed && !isActive;
+  React.useEffect(() => {
+    if (shallClose)
+      setDeleteArmed(false);
+  }, [shallClose]);
+
+
+  // Activate
+
+  const handleConversationActivate = () => props.onConversationActivate(conversationId, true);
+
+
+  // export
+
+  const handleConversationExport = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    conversationId && onConversationExport(conversationId, false);
+  }, [conversationId, onConversationExport]);
+
+
+  // Folder change
+
+  const handleFolderChangeBegin = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    onConversationFolderChange({
+      conversationId,
+      anchorEl: event.currentTarget,
+      currentFolder: folder ?? null,
+    });
+  }, [conversationId, folder, onConversationFolderChange]);
+
+
+  // Title Edit
+
+  const handleTitleEditBegin = React.useCallback(() => setIsEditingTitle(true), []);
+
+  const handleTitleEditCancel = React.useCallback(() => {
+    setIsEditingTitle(false);
+  }, []);
+
+  const handleTitleEditChange = React.useCallback((text: string) => {
+    setIsEditingTitle(false);
+    useChatStore.getState().setUserTitle(conversationId, text.trim());
+  }, [conversationId]);
+
+  const handleTitleEditAuto = React.useCallback(() => {
+    conversationAutoTitle(conversationId, true);
+  }, [conversationId]);
+
+
+  // Delete
+
+  const handleDeleteButtonShow = React.useCallback(() => setDeleteArmed(true), []);
+
+  const handleDeleteButtonHide = React.useCallback(() => setDeleteArmed(false), []);
+
+  const handleConversationDelete = React.useCallback((event: React.MouseEvent) => {
+    if (deleteArmed) {
+      setDeleteArmed(false);
+      event.stopPropagation();
+      props.onConversationDelete(conversationId);
+    }
+  }, [conversationId, deleteArmed, props]);
+
+
+  const textSymbol = SystemPurposes[systemPurposeId]?.symbol || '❓';
+
+  const progress = props.bottomBarBasis ? 100 * (searchFrequency ?? messageCount) / props.bottomBarBasis : 0;
+
+
+  const titleRowComponent = React.useMemo(() => <>
+
+    {/* Symbol, if globally enabled */}
+    {props.showSymbols && <ListItemDecorator>
+      {assistantTyping
+        ? (
+          <Avatar
+            alt='typing' variant='plain'
+            src='https://i.giphy.com/media/jJxaUysjzO9ri/giphy.webp'
+            sx={{
+              width: '1.5rem',
+              height: '1.5rem',
+              borderRadius: 'var(--joy-radius-sm)',
+            }}
+          />
+        ) : (
+          <Typography sx={isNew ? { opacity: 0.4, filter: 'grayscale(0.75)' } : undefined}>
+            {/*{isNew ? '' : textSymbol}*/}
+            {textSymbol}
+          </Typography>
+        )}
+    </ListItemDecorator>}
+
+    {/* Title */}
+    {!isEditingTitle ? (
+      <Typography
+        // level={isActive ? 'title-md' : 'body-md'}
+        onDoubleClick={handleTitleEditBegin}
+        sx={{
+          color: isActive ? 'text.primary' : 'text.secondary',
+          flex: 1,
+        }}
+      >
+        {/*{DEBUG_CONVERSATION_IDS && `${conversationId} - `}*/}
+        {title.trim() ? title : 'Chat'}{assistantTyping && '...'}
+      </Typography>
+    ) : (
+      <InlineTextarea
+        invertedColors
+        initialText={title}
+        onEdit={handleTitleEditChange}
+        onCancel={handleTitleEditCancel}
+        sx={{
+          flexGrow: 1,
+          ml: -1.5, mr: -0.5,
+        }}
+      />
+    )}
+
+    {/* Display search frequency if it exists and is greater than 0 */}
+    {searchFrequency && searchFrequency > 0 && (
+      <Box sx={{ ml: 1 }}>
+        <Typography level='body-sm'>
+          {searchFrequency}
+        </Typography>
+      </Box>
+    )}
+
+  </>, [assistantTyping, handleTitleEditBegin, handleTitleEditCancel, handleTitleEditChange, isActive, isEditingTitle, isNew, props.showSymbols, searchFrequency, textSymbol, title]);
+
+  const progressBarFixedComponent = React.useMemo(() =>
+    progress > 0 && (
+      <Box sx={{
+        backgroundColor: 'neutral.softBg',
+        position: 'absolute', left: 0, bottom: 0, width: progress + '%', height: 4,
+      }} />
+    ), [progress]);
+
+  return (isActive || isAlsoOpen) ? (
+
+    // Active or Also Open
+    <Sheet
+      variant={isActive ? 'solid' : 'outlined'}
+      invertedColors={isActive}
+      onClick={!isActive ? handleConversationActivate : undefined}
+      sx={{
+        // common
+        // position: 'relative', // for the progress bar (now disabled)
+        '--ListItem-minHeight': '2.75rem',
+
+        // differences between primary and secondary variants
+        ...(isActive ? {
+          border: 'none', // there's a default border of 1px and invisible.. hmm
+        } : {
+          // '--variant-borderWidth': '0.125rem',
+          cursor: 'pointer',
+        }),
+
+        // style
+        backgroundColor: isActive ? 'neutral.solidActiveBg' : 'neutral.softBg',
+        borderRadius: 'md',
+        mx: '0.25rem',
+        '&:hover > button': {
+          opacity: 1, // fade in buttons when hovering, but by default wash them out a bit
+        },
+      }}
+    >
+
+      <ListItem sx={{ border: 'none', display: 'grid', gap: 0, px: 'calc(var(--ListItem-paddingX) - 0.25rem)' }}>
+
+        {/* Title row */}
+        <Box sx={{ display: 'flex', gap: 'var(--ListItem-gap)', minHeight: '2.25rem', alignItems: 'center' }}>
+          {titleRowComponent}
+        </Box>
+
+        {/* buttons row */}
+        {isActive && (
+          <Box sx={{ display: 'flex', gap: 1, minHeight: '2.25rem', alignItems: 'center' }}>
+            <ListItemDecorator />
+
+            {/* Current Folder color, and change initiator */}
+            {(folder !== undefined) && <>
+              <Tooltip disableInteractive title={folder ? `Change Folder (${folder.title})` : 'Add to Folder'}>
+                {folder ? (
+                  <IconButton size='sm' onClick={handleFolderChangeBegin}>
+                    <FolderIcon style={{ color: folder.color || 'inherit' }} />
+                  </IconButton>
+                ) : (
+                  <FadeInButton size='sm' onClick={handleFolderChangeBegin}>
+                    <FolderOutlinedIcon />
+                  </FadeInButton>
+                )}
+              </Tooltip>
+
+              {/*<Divider orientation='vertical' sx={{ my: 1, opacity: 0.5 }} />*/}
+            </>}
+
+            <Tooltip disableInteractive title='Rename'>
+              <FadeInButton size='sm' disabled={isEditingTitle} onClick={handleTitleEditBegin}>
+                <EditIcon />
+              </FadeInButton>
+            </Tooltip>
+
+            {!isNew && <>
+              <Tooltip disableInteractive title='Auto-Title'>
+                <FadeInButton size='sm' disabled={isEditingTitle} onClick={handleTitleEditAuto}>
+                  <AutoFixHighIcon />
+                </FadeInButton>
+              </Tooltip>
+
+              {/*<Divider orientation='vertical' sx={{ my: 1, opacity: 0.5 }} />*/}
+
+              <Tooltip disableInteractive title='Export Chat'>
+                <FadeInButton size='sm' onClick={handleConversationExport}>
+                  <FileDownloadOutlinedIcon />
+                </FadeInButton>
+              </Tooltip>
+            </>}
+
+            {/* --> */}
+            <Box sx={{ flex: 1 }} />
+
+            {/* Delete [armed, arming] buttons */}
+            {!searchFrequency && <>
+              {deleteArmed && (
+                <Tooltip disableInteractive title='Confirm Deletion'>
+                  <FadeInButton key='btn-del' variant='solid' color='success' size='sm' onClick={handleConversationDelete} sx={{ opacity: 1 }}>
+                    <DeleteForeverIcon sx={{ color: 'danger.solidBg' }} />
+                  </FadeInButton>
+                </Tooltip>
+              )}
+
+              <Tooltip disableInteractive title={deleteArmed ? 'Cancel Delete' : 'Delete'}>
+                <FadeInButton key='btn-arm' size='sm' onClick={deleteArmed ? handleDeleteButtonHide : handleDeleteButtonShow} sx={deleteArmed ? { opacity: 1 } : {}}>
+                  {deleteArmed ? <CloseIcon /> : <DeleteOutlineIcon />}
+                </FadeInButton>
+              </Tooltip>
+            </>}
+          </Box>
+        )}
+
+        {/* View places row */}
+        {isAlsoOpen && (
+          <Typography level='body-xs' sx={{ mx: 'auto' }}>
+            <em>In view {isAlsoOpen}</em>
+          </Typography>
+        )}
+
+      </ListItem>
+
+      {/* Optional progress bar, underlay */}
+      {/* NOTE: disabled on 20240204: quite distracting on the active chat sheet */}
+      {/*{progressBarFixedComponent}*/}
+
+    </Sheet>
+
+  ) : (
+
+    // Inactive Conversation - click to activate
+    <ListItem sx={{ '--ListItem-minHeight': '2.75rem' }}>
+
+      <ListItemButton
+        onClick={handleConversationActivate}
+        sx={{
+          border: 'none', // there's a default border of 1px and invisible.. hmm
+          position: 'relative', // for the progress bar
+        }}
+      >
+
+        {titleRowComponent}
+
+        {/* Optional progress bar, underlay */}
+        {progressBarFixedComponent}
+
+      </ListItemButton>
+
+    </ListItem>
+  );
+}

src/apps/chat/components/ChatDropdowns.tsx

@@ -1,20 +1,14 @@
 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';
-import { useFolderDropdown } from './folder/useFolderDropdown';
+import { useFolderDropdown } from './folders/useFolderDropdown';
 
 
 export function ChatDropdowns(props: {
   conversationId: DConversationId | null
-  isSplitPanes: boolean
-  onToggleSplitPanes: () => void
 }) {
 
   // state
@@ -22,9 +16,6 @@ export function ChatDropdowns(props: {
   const { personaDropdown } = usePersonaIdDropdown(props.conversationId);
   const { folderDropdown } = useFolderDropdown(props.conversationId);
 
-  // external state
-  const labsSplitBranching = useUXLabsStore(state => state.labsSplitBranching);
-
   return <>
 
     {/* Persona selector */}
@@ -36,16 +27,5 @@ export function ChatDropdowns(props: {
     {/* Folder selector */}
     {folderDropdown}
 
-    {/* Split Panes button */}
-    {labsSplitBranching && <IconButton
-      variant={props.isSplitPanes ? 'solid' : undefined}
-      onClick={props.onToggleSplitPanes}
-      // sx={{
-      //   ml: 'auto',
-      // }}
-    >
-      <VerticalSplitIcon />
-    </IconButton>}
-
   </>;
 }

src/apps/chat/components/ChatMessageList.tsx

@@ -6,11 +6,11 @@ import { SxProps } from '@mui/joy/styles/types';
 
 import type { DiagramConfig } from '~/modules/aifn/digrams/DiagramsModal';
 
-import { ShortcutKeyName, useGlobalShortcut } from '~/common/components/useGlobalShortcut';
 import { InlineError } from '~/common/components/InlineError';
+import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+import { ShortcutKeyName, useGlobalShortcut } from '~/common/components/useGlobalShortcut';
 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 { ChatMessageMemo } from './message/ChatMessage';
 import { CleanerMessage, MessagesSelectionHeader } from './message/CleanerMessage';
@@ -26,12 +26,14 @@ export function ChatMessageList(props: {
   conversationId: DConversationId | null,
   capabilityHasT2I: boolean,
   chatLLMContextTokens: number | null,
-  isMessageSelectionMode: boolean, setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
+  isMessageSelectionMode: boolean,
+  isMobile: boolean,
   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>,
+  onConversationExecuteHistory: (conversationId: DConversationId, history: DMessage[]) => Promise<void>,
+  onTextDiagram: (diagramConfig: DiagramConfig | null) => void,
+  onTextImagine: (conversationId: DConversationId, selectedText: string) => Promise<void>,
+  onTextSpeak: (selectedText: string) => Promise<void>,
+  setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
   sx?: SxProps,
 }) {
 
@@ -62,8 +64,9 @@ export function ChatMessageList(props: {
 
   // text actions
 
-  const handleRunExample = (text: string) =>
-    conversationId && onConversationExecuteHistory(conversationId, [...conversationMessages, createDMessage('user', text)]);
+  const handleRunExample = React.useCallback(async (text: string) => {
+    conversationId && await onConversationExecuteHistory(conversationId, [...conversationMessages, createDMessage('user', text)]);
+  }, [conversationId, conversationMessages, onConversationExecuteHistory]);
 
 
   // message menu methods proxy
@@ -72,11 +75,11 @@ export function ChatMessageList(props: {
     conversationId && onConversationBranch(conversationId, messageId);
   }, [conversationId, onConversationBranch]);
 
-  const handleConversationRestartFrom = React.useCallback((messageId: string, offset: number) => {
+  const handleConversationRestartFrom = React.useCallback(async (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 && await onConversationExecuteHistory(conversationId, truncatedHistory);
     }
   }, [conversationId, onConversationExecuteHistory]);
 
@@ -97,12 +100,12 @@ export function ChatMessageList(props: {
   }, [conversationId, editMessage]);
 
   const handleTextDiagram = React.useCallback(async (messageId: string, text: string) => {
-    conversationId && await onTextDiagram({ conversationId: conversationId, messageId, text });
+    conversationId && onTextDiagram({ conversationId: conversationId, messageId, text });
   }, [conversationId, onTextDiagram]);
 
   const handleTextImagine = React.useCallback(async (text: string) => {
     if (!capabilityHasT2I)
-      return openPreferencesTab(2);
+      return openPreferencesTab(PreferencesTab.Draw);
     if (conversationId) {
       setIsImagining(true);
       await onTextImagine(conversationId, text);
@@ -112,7 +115,7 @@ export function ChatMessageList(props: {
 
   const handleTextSpeak = React.useCallback(async (text: string) => {
     if (!isSpeakable)
-      return openPreferencesTab(3);
+      return openPreferencesTab(PreferencesTab.Voice);
     setIsSpeaking(true);
     await onTextSpeak(text);
     setIsSpeaking(false);
@@ -147,17 +150,17 @@ export function ChatMessageList(props: {
   });
 
 
-  // text-diff functionality, find the messages to diff with
+  // text-diff functionality: only diff the last message and when it's complete (not typing), and they're similar in size
 
-  const { diffMessage, diffText } = React.useMemo(() => {
+  const { diffTargetMessage, diffPrevText } = React.useMemo(() => {
     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;
       if (lenA > 80 && lenB > 80 && lenA > lenB / 3 && lenB > lenA / 3)
-        return { diffMessage: msgB, diffText: textA };
+        return { diffTargetMessage: msgB, diffPrevText: textA };
     }
-    return { diffMessage: undefined, diffText: undefined };
+    return { diffTargetMessage: undefined, diffPrevText: undefined };
   }, [conversationMessages]);
 
 
@@ -218,9 +221,11 @@ export function ChatMessageList(props: {
           <ChatMessageMemo
             key={'msg-' + message.id}
             message={message}
-            diffPreviousText={message === diffMessage ? diffText : undefined}
+            diffPreviousText={message === diffTargetMessage ? diffPrevText : undefined}
             isBottom={idx === count - 1}
-            isImagining={isImagining} isSpeaking={isSpeaking}
+            isImagining={isImagining}
+            isMobile={props.isMobile}
+            isSpeaking={isSpeaking}
             onConversationBranch={handleConversationBranch}
             onConversationRestartFrom={handleConversationRestartFrom}
             onConversationTruncate={handleConversationTruncate}

src/apps/chat/components/ChatPageMenuItems.tsx

@@ -1,41 +1,62 @@
 import * as React from 'react';
 
-import { Box, ListDivider, ListItemDecorator, MenuItem, Switch } from '@mui/joy';
+import { Box, IconButton, ListDivider, ListItemDecorator, MenuItem, Switch, Tooltip } from '@mui/joy';
+import AddIcon from '@mui/icons-material/Add';
 import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
 import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
 import ClearIcon from '@mui/icons-material/Clear';
 import CompressIcon from '@mui/icons-material/Compress';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import ForkRightIcon from '@mui/icons-material/ForkRight';
-import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';
+import HorizontalSplitIcon from '@mui/icons-material/HorizontalSplit';
+import HorizontalSplitOutlinedIcon from '@mui/icons-material/HorizontalSplitOutlined';
+import SettingsSuggestOutlinedIcon from '@mui/icons-material/SettingsSuggestOutlined';
+import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
+import VerticalSplitOutlinedIcon from '@mui/icons-material/VerticalSplitOutlined';
 
 import type { DConversationId } from '~/common/state/store-chats';
 import { KeyStroke } from '~/common/components/KeyStroke';
 import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers';
-import { useUICounter } from '~/common/state/store-ui';
 
-import { useChatShowSystemMessages } from '../../store-app-chat';
+import { useChatShowSystemMessages } from '../store-app-chat';
+import { usePaneDuplicateOrClose } from './panes/usePanesManager';
 
 
-export function ChatMenuItems(props: {
+export function ChatPageMenuItems(props: {
+  isMobile: boolean,
   conversationId: DConversationId | null,
+  disableItems: boolean,
   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,
+  // onConversationNew: (forceNoRecycle: boolean) => void,
+  setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
 }) {
 
   // external state
   const { closePageMenu } = useOptimaDrawers();
-  const { touch: shareTouch } = useUICounter('export-share');
+  const { canAddPane, isMultiPane, duplicateFocusedPane, removeOtherPanes } = usePaneDuplicateOrClose();
   const [showSystemMessages, setShowSystemMessages] = useChatShowSystemMessages();
 
-  // derived state
-  const disabled = !props.conversationId || props.isConversationEmpty;
+
+  const handleIncreaseMultiPane = React.useCallback((event?: React.MouseEvent) => {
+    event?.stopPropagation();
+
+    // create a new pane with the current conversation
+    duplicateFocusedPane();
+
+    // load a brand new conversation inside
+    // FIXME: still testing this
+    // props.onConversationNew(true);
+  }, [duplicateFocusedPane]);
+
+  const handleToggleMultiPane = React.useCallback((_event: React.MouseEvent) => {
+    if (isMultiPane)
+      removeOtherPanes();
+    else
+      handleIncreaseMultiPane(undefined);
+  }, [handleIncreaseMultiPane, isMultiPane, removeOtherPanes]);
 
 
   const closeMenu = (event: React.MouseEvent) => {
@@ -53,12 +74,6 @@ export function ChatMenuItems(props: {
     props.conversationId && props.onConversationBranch(props.conversationId, null);
   };
 
-  const handleConversationExport = (event: React.MouseEvent<HTMLDivElement>) => {
-    closeMenu(event);
-    props.onConversationExport(!disabled ? props.conversationId : null);
-    shareTouch();
-  };
-
   const handleConversationFlatten = (event: React.MouseEvent<HTMLDivElement>) => {
     closeMenu(event);
     props.conversationId && props.onConversationFlatten(props.conversationId);
@@ -74,51 +89,63 @@ export function ChatMenuItems(props: {
 
   return <>
 
-    {/*<ListItem>*/}
-    {/*  <Typography level='body-sm'>*/}
-    {/*    Conversation*/}
-    {/*  </Typography>*/}
-    {/*</ListItem>*/}
-
+    {/* System Message(s) */}
     <MenuItem onClick={handleToggleSystemMessages}>
-      <ListItemDecorator><SettingsSuggestIcon /></ListItemDecorator>
-      System message
+      <ListItemDecorator><SettingsSuggestOutlinedIcon /></ListItemDecorator>
+      System messages
       <Switch checked={showSystemMessages} onChange={handleToggleSystemMessages} sx={{ ml: 'auto' }} />
     </MenuItem>
 
-    <ListDivider inset='startContent' />
+    {/* Un /Split */}
+    <MenuItem onClick={handleToggleMultiPane}>
+      <ListItemDecorator>{props.isMobile
+        ? (isMultiPane ? <HorizontalSplitIcon /> : <HorizontalSplitOutlinedIcon />)
+        : (isMultiPane ? <VerticalSplitIcon /> : <VerticalSplitOutlinedIcon />)
+      }</ListItemDecorator>
+      {/* Unsplit / Split text*/}
+      {isMultiPane ? 'Unsplit' : props.isMobile ? 'Split Down' : 'Split Right'}
+      {/* '+' */}
+      {isMultiPane && (
+        <Tooltip title='Add Another Split'>
+          <IconButton
+            size='sm'
+            variant='outlined'
+            disabled={!canAddPane}
+            onClick={handleIncreaseMultiPane}
+            sx={{ ml: 'auto', /*mr: '2px',*/ my: '-0.25rem' /* absorb the menuItem padding */ }}
+          >
+            <AddIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+    </MenuItem>
 
-    <MenuItem disabled={disabled} onClick={handleConversationBranch}>
+    <MenuItem disabled={props.disableItems} onClick={handleConversationBranch}>
       <ListItemDecorator><ForkRightIcon /></ListItemDecorator>
       Branch
     </MenuItem>
 
-    <MenuItem disabled={disabled} onClick={handleConversationFlatten}>
-      <ListItemDecorator><CompressIcon color='success' /></ListItemDecorator>
-      Flatten
-    </MenuItem>
+    <ListDivider />
 
-    <ListDivider inset='startContent' />
-
-    <MenuItem disabled={disabled} onClick={handleToggleMessageSelectionMode}>
+    <MenuItem disabled={props.disableItems} onClick={handleToggleMessageSelectionMode}>
       <ListItemDecorator>{props.isMessageSelectionMode ? <CheckBoxOutlinedIcon /> : <CheckBoxOutlineBlankOutlinedIcon />}</ListItemDecorator>
       <span style={props.isMessageSelectionMode ? { fontWeight: 800 } : {}}>
         Cleanup ...
       </span>
     </MenuItem>
 
-    <MenuItem disabled={!props.hasConversations} onClick={handleConversationExport}>
-      <ListItemDecorator>
-        <FileDownloadIcon />
-      </ListItemDecorator>
-      Share / Export ...
+    <MenuItem disabled={props.disableItems} onClick={handleConversationFlatten}>
+      <ListItemDecorator><CompressIcon color='success' /></ListItemDecorator>
+      Compress ...
     </MenuItem>
 
-    <MenuItem disabled={disabled} onClick={handleConversationClear}>
+    <ListDivider />
+
+    <MenuItem disabled={props.disableItems} onClick={handleConversationClear}>
       <ListItemDecorator><ClearIcon /></ListItemDecorator>
       <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
         Reset Chat
-        {!disabled && <KeyStroke combo='Ctrl + Alt + X' />}
+        {!props.disableItems && <KeyStroke combo='Ctrl + Alt + X' />}
       </Box>
     </MenuItem>
 

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

@@ -1,297 +0,0 @@
-import * as React from 'react';
-import { shallow } from 'zustand/shallow';
-
-import { Box, IconButton, ListDivider, ListItemButton, ListItemDecorator, Tooltip } from '@mui/joy';
-import AddIcon from '@mui/icons-material/Add';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import FileUploadIcon from '@mui/icons-material/FileUpload';
-import FolderOpenOutlinedIcon from '@mui/icons-material/FolderOpenOutlined';
-import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
-
-import { DFolder, useFoldersToggle, useFolderStore } from '~/common/state/store-folders';
-import { PageDrawerHeader } from '~/common/layout/optima/components/PageDrawerHeader';
-import { PageDrawerList, PageDrawerTallItemSx } from '~/common/layout/optima/components/PageDrawerList';
-import { conversationTitle, DConversationId, useChatStore } from '~/common/state/store-chats';
-import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers';
-import { useUIPreferencesStore } from '~/common/state/store-ui';
-import { useUXLabsStore } from '~/common/state/store-ux-labs';
-import DebounceInput from '~/common/components/DebounceInput';
-
-import { ChatFolderList } from './folder/ChatFolderList';
-import { ChatDrawerItemMemo, ChatNavigationItemData } from './ChatNavigationItem';
-
-
-// type ListGrouping = 'off' | 'persona';
-
-/*
- * Optimization: return a reduced version of the DConversation object for 'Drawer Items' purposes,
- * to avoid unnecessary re-renders on each new character typed by the assistant
- */
-export const useChatNavigationItems = (activeConversationId: DConversationId | null, folderId: string | null): {
-  chatNavItems: ChatNavigationItemData[],
-  folders: DFolder[],
-} => {
-
-  // monitor folder changes
-  // NOTE: we're not checking for state.useFolders, as we strongly assume folderId to be null when folders are disabled
-  const { currentFolder, folders } = useFolderStore(state => {
-    const currentFolder = folderId ? state.folders.find(_f => _f.id === folderId) ?? null : null;
-    return {
-      folders: state.folders,
-      currentFolder,
-    };
-  }, shallow);
-
-  // transform (folder) selected conversation into optimized 'navigation item' data
-  const chatNavItems: ChatNavigationItemData[] = useChatStore(state => {
-
-    const selectConversations = currentFolder
-      ? state.conversations.filter(_c => currentFolder.conversationIds.includes(_c.id))
-      : state.conversations;
-
-    return selectConversations.map(_c => ({
-      conversationId: _c.id,
-      isActive: _c.id === activeConversationId,
-      isEmpty: !_c.messages.length && !_c.userTitle,
-      title: conversationTitle(_c),
-      messageCount: _c.messages.length,
-      assistantTyping: !!_c.abortController,
-      systemPurposeId: _c.systemPurposeId,
-    }));
-
-  }, (a: ChatNavigationItemData[], b: ChatNavigationItemData[]) => {
-    // custom equality function to avoid unnecessary re-renders
-    return a.length === b.length && a.every((_a, i) => shallow(_a, b[i]));
-  });
-
-  return { chatNavItems, folders };
-};
-
-
-export const ChatDrawerContentMemo = React.memo(ChatDrawerItems);
-
-function ChatDrawerItems(props: {
-  activeConversationId: DConversationId | null,
-  disableNewButton: boolean,
-  onConversationActivate: (conversationId: DConversationId) => void,
-  onConversationDelete: (conversationId: DConversationId, bypassConfirmation: boolean) => void,
-  onConversationExportDialog: (conversationId: DConversationId | null) => void,
-  onConversationImportDialog: () => void,
-  onConversationNew: () => void,
-  onConversationsDeleteAll: () => void,
-  selectedFolderId: string | null,
-  setSelectedFolderId: (folderId: string | null) => void,
-}) {
-
-  // local state
-  const [debouncedSearchQuery, setDebouncedSearchQuery] = React.useState('');
-
-  // const [grouping] = React.useState<ListGrouping>('off');
-  const { onConversationDelete, onConversationNew, onConversationActivate } = props;
-
-  // external state
-  const { closeDrawer, closeDrawerOnMobile } = useOptimaDrawers();
-  const { useFolders, toggleUseFolders } = useFoldersToggle();
-  const { chatNavItems, folders } = useChatNavigationItems(props.activeConversationId, props.selectedFolderId);
-  const showSymbols = useUIPreferencesStore(state => state.zenMode !== 'cleaner');
-  const labsEnhancedUI = useUXLabsStore(state => state.labsEnhancedUI);
-
-  // derived state
-  const selectConversationsCount = chatNavItems.length;
-  const nonEmptyChats = selectConversationsCount > 1 || (selectConversationsCount === 1 && !chatNavItems[0].isEmpty);
-  const singleChat = selectConversationsCount === 1;
-  const softMaxReached = selectConversationsCount >= 50;
-
-
-  const handleButtonNew = React.useCallback(() => {
-    onConversationNew();
-    closeDrawerOnMobile();
-  }, [closeDrawerOnMobile, onConversationNew]);
-
-  const handleConversationActivate = React.useCallback((conversationId: DConversationId, closeMenu: boolean) => {
-    onConversationActivate(conversationId);
-    if (closeMenu)
-      closeDrawerOnMobile();
-  }, [closeDrawerOnMobile, onConversationActivate]);
-
-  const handleConversationDelete = React.useCallback((conversationId: DConversationId) => {
-    !singleChat && conversationId && onConversationDelete(conversationId, true);
-  }, [onConversationDelete, singleChat]);
-
-
-  // Filter chatNavItems based on the search query and rank them by search frequency
-  const filteredChatNavItems = React.useMemo(() => {
-    if (!debouncedSearchQuery) return chatNavItems;
-    return chatNavItems
-      .map(item => {
-        // Get the conversation by ID
-        const conversation = useChatStore.getState().conversations.find(c => c.id === item.conversationId);
-        // Calculate the frequency of the search term in the title and messages
-        const titleFrequency = (item.title.toLowerCase().match(new RegExp(debouncedSearchQuery.toLowerCase(), 'g')) || []).length;
-        const messageFrequency = conversation?.messages.reduce((count, message) => {
-          return count + (message.text.toLowerCase().match(new RegExp(debouncedSearchQuery.toLowerCase(), 'g')) || []).length;
-        }, 0) || 0;
-        // Return the item with the searchFrequency property
-        return {
-          ...item,
-          searchFrequency: titleFrequency + messageFrequency,
-        };
-      })
-      // Exclude items with a searchFrequency of 0
-      .filter(item => item.searchFrequency > 0)
-      // Sort the items by searchFrequency in descending order
-      .sort((a, b) => b.searchFrequency! - a.searchFrequency!);
-  }, [chatNavItems, debouncedSearchQuery]);
-
-
-  // basis for the underline bar
-  const bottomBarBasis = filteredChatNavItems.reduce((longest, _c) => Math.max(longest, _c.searchFrequency ?? _c.messageCount), 1);
-
-
-  // grouping
-  /*let sortedIds = conversationIDs;
-  if (grouping === 'persona') {
-    const conversations = useChatStore.getState().conversations;
-
-    // group conversations by persona
-    const groupedConversations: { [personaId: string]: string[] } = {};
-    conversations.forEach(conversation => {
-      const persona = conversation.systemPurposeId;
-      if (persona) {
-        if (!groupedConversations[persona])
-          groupedConversations[persona] = [];
-        groupedConversations[persona].push(conversation.id);
-      }
-    });
-
-    // flatten grouped conversations
-    sortedIds = Object.values(groupedConversations).flat();
-  }*/
-
-  return <>
-
-    {/* Drawer Header */}
-    <PageDrawerHeader
-      title='Chats'
-      onClose={closeDrawer}
-      startButton={
-        <Tooltip title={useFolders ? 'Hide Folders' : 'Use Folders'}>
-          <IconButton onClick={toggleUseFolders}>
-            {useFolders ? <FolderOpenOutlinedIcon /> : <FolderOutlinedIcon />}
-          </IconButton>
-        </Tooltip>
-      }
-    />
-
-    {/* Folders List */}
-    {/*<Box sx={{*/}
-    {/*  display: 'grid',*/}
-    {/*  gridTemplateRows: !useFolders ? '0fr' : '1fr',*/}
-    {/*  transition: 'grid-template-rows 0.42s cubic-bezier(.17,.84,.44,1)',*/}
-    {/*  '& > div': {*/}
-    {/*    padding: useFolders ? 2 : 0,*/}
-    {/*    transition: 'padding 0.42s cubic-bezier(.17,.84,.44,1)',*/}
-    {/*    overflow: 'hidden',*/}
-    {/*  },*/}
-    {/*}}>*/}
-    {useFolders && (
-      <ChatFolderList
-        folders={folders}
-        selectedFolderId={props.selectedFolderId}
-        onFolderSelect={props.setSelectedFolderId}
-      />
-    )}
-    {/*</Box>*/}
-
-    {/* Chats List */}
-    <PageDrawerList variant='plain' noTopPadding noBottomPadding tallRows>
-
-      {useFolders && <ListDivider sx={{ mb: 0 }} />}
-
-      {/* Search Input Field */}
-      <DebounceInput
-        onDebounce={setDebouncedSearchQuery}
-        debounceTimeout={300}
-        placeholder='Search...'
-        aria-label='Search'
-        sx={{ m: 2 }}
-      />
-
-      <ListItemButton disabled={props.disableNewButton} onClick={handleButtonNew} sx={PageDrawerTallItemSx}>
-        <ListItemDecorator><AddIcon /></ListItemDecorator>
-        <Box sx={{
-          // style
-          fontSize: 'sm',
-          fontWeight: 'lg',
-          // content
-          flexGrow: 1,
-          display: 'flex',
-          justifyContent: 'space-between',
-          gap: 1,
-        }}>
-          New chat
-          {/*<KeyStroke combo='Ctrl + Alt + N' sx={props.disableNewButton ? { opacity: 0.5 } : undefined} />*/}
-        </Box>
-      </ListItemButton>
-
-      {/*<ListDivider sx={{ mt: 0 }} />*/}
-
-      <Box sx={{ flex: 1, overflowY: 'auto' }}>
-        {/*<ListItem sticky sx={{ justifyContent: 'space-between', boxShadow: 'sm' }}>*/}
-        {/*  <Typography level='body-sm'>*/}
-        {/*    Conversations*/}
-        {/*  </Typography>*/}
-        {/*  <ToggleButtonGroup variant='soft' size='sm' value={grouping} onChange={(_event, newValue) => newValue && setGrouping(newValue)}>*/}
-        {/*    <IconButton value='off'>*/}
-        {/*      <AccessTimeIcon />*/}
-        {/*    </IconButton>*/}
-        {/*    <IconButton value='persona'>*/}
-        {/*      <PersonIcon />*/}
-        {/*    </IconButton>*/}
-        {/*  </ToggleButtonGroup>*/}
-        {/*</ListItem>*/}
-
-        {filteredChatNavItems.map(item =>
-          <ChatDrawerItemMemo
-            key={'nav-' + item.conversationId}
-            item={item}
-            isLonely={singleChat}
-            showSymbols={showSymbols}
-            bottomBarBasis={(labsEnhancedUI || softMaxReached || debouncedSearchQuery) ? bottomBarBasis : 0}
-            onConversationActivate={handleConversationActivate}
-            onConversationDelete={handleConversationDelete}
-          />)}
-      </Box>
-
-      <ListDivider sx={{ mt: 0 }} />
-
-      <Box sx={{ display: 'flex', alignItems: 'center' }}>
-
-        <ListItemButton onClick={props.onConversationImportDialog} sx={{ flex: 1 }}>
-          <ListItemDecorator>
-            <FileUploadIcon />
-          </ListItemDecorator>
-          Import
-          {/*<OpenAIIcon sx={{  ml: 'auto' }} />*/}
-        </ListItemButton>
-
-        <ListItemButton disabled={!nonEmptyChats} onClick={() => props.onConversationExportDialog(props.activeConversationId)} sx={{ flex: 1 }}>
-          <ListItemDecorator>
-            <FileDownloadIcon />
-          </ListItemDecorator>
-          Export
-        </ListItemButton>
-      </Box>
-
-      <ListItemButton disabled={!nonEmptyChats} onClick={props.onConversationsDeleteAll}>
-        <ListItemDecorator>
-          <DeleteOutlineIcon />
-        </ListItemDecorator>
-        Delete {selectConversationsCount >= 2 ? `all ${selectConversationsCount} chats` : 'chat'}
-      </ListItemButton>
-
-    </PageDrawerList>
-
-  </>;
-}

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

@@ -1,195 +0,0 @@
-import * as React from 'react';
-
-import { Avatar, Box, IconButton, ListItemButton, ListItemDecorator, Typography } from '@mui/joy';
-import { SxProps } from '@mui/joy/styles/types';
-import CloseIcon from '@mui/icons-material/Close';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-
-import { SystemPurposeId, SystemPurposes } from '../../../../data';
-
-import { DConversationId, useChatStore } from '~/common/state/store-chats';
-import { InlineTextarea } from '~/common/components/InlineTextarea';
-
-
-const DEBUG_CONVERSATION_IDs = false;
-
-
-export const ChatDrawerItemMemo = React.memo(ChatNavigationItem);
-
-export interface ChatNavigationItemData {
-  conversationId: DConversationId;
-  isActive: boolean;
-  isEmpty: boolean;
-  title: string;
-  messageCount: number;
-  assistantTyping: boolean;
-  systemPurposeId: SystemPurposeId;
-  searchFrequency?: number;
-}
-
-function ChatNavigationItem(props: {
-  item: ChatNavigationItemData,
-  isLonely: boolean,
-  showSymbols: boolean,
-  bottomBarBasis: number,
-  onConversationActivate: (conversationId: DConversationId, closeMenu: boolean) => void,
-  onConversationDelete: (conversationId: DConversationId) => void,
-}) {
-
-  // state
-  const [isEditingTitle, setIsEditingTitle] = React.useState(false);
-  const [deleteArmed, setDeleteArmed] = React.useState(false);
-
-  // derived state
-  const { conversationId, isActive, title, messageCount, assistantTyping, systemPurposeId, searchFrequency } = props.item;
-  const isNew = messageCount === 0;
-
-  // 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 && !isActive)
-      setDeleteArmed(false);
-  }, [deleteArmed, isActive]);
-
-
-  const handleConversationActivate = () => props.onConversationActivate(conversationId, true);
-
-  const handleTitleEdit = () => setIsEditingTitle(true);
-
-  const handleTitleEdited = (text: string) => {
-    setIsEditingTitle(false);
-    useChatStore.getState().setUserTitle(conversationId, text.trim());
-  };
-
-  const handleTitleEditCancel = () => {
-    setIsEditingTitle(false);
-  };
-
-  const handleDeleteButtonShow = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    if (!isActive)
-      props.onConversationActivate(conversationId, false);
-    else
-      setDeleteArmed(true);
-  };
-
-  const handleDeleteButtonHide = () => setDeleteArmed(false);
-
-  const handleConversationDelete = (event: React.MouseEvent) => {
-    if (deleteArmed) {
-      setDeleteArmed(false);
-      event.stopPropagation();
-      props.onConversationDelete(conversationId);
-    }
-  };
-
-
-  const textSymbol = SystemPurposes[systemPurposeId]?.symbol || '❓';
-  const buttonSx: SxProps = isActive ? { color: 'white' } : {};
-
-  const progress = props.bottomBarBasis ? 100 * (searchFrequency ?? messageCount) / props.bottomBarBasis : 0;
-
-  return (
-    <ListItemButton
-      variant={isActive ? 'soft' : 'plain'} color='neutral'
-      onClick={!isActive ? handleConversationActivate : event => event.preventDefault()}
-      sx={{
-        // py: 0,
-        position: 'relative',
-        border: 'none', // note, there's a default border of 1px and invisible.. hmm
-        cursor: 'pointer',
-        '&:hover > button': { opacity: 1 },
-      }}
-    >
-
-      {/* Optional progress bar, underlay */}
-      {progress > 0 && (
-        <Box sx={{
-          backgroundColor: 'neutral.softBg',
-          position: 'absolute', left: 0, bottom: 0, width: progress + '%', height: 4,
-        }} />
-      )}
-
-      {/* Icon */}
-      {props.showSymbols && <ListItemDecorator>
-        {assistantTyping
-          ? (
-            <Avatar
-              alt='typing' variant='plain'
-              src='https://i.giphy.com/media/jJxaUysjzO9ri/giphy.webp'
-              sx={{
-                width: '1.5rem',
-                height: '1.5rem',
-                borderRadius: 'var(--joy-radius-sm)',
-              }}
-            />
-          ) : (
-            <Typography>
-              {isNew ? '' : textSymbol}
-            </Typography>
-          )}
-      </ListItemDecorator>}
-
-
-      {/* Text */}
-      {!isEditingTitle ? (
-
-        <Typography
-          level={isActive ? 'title-md' : 'body-md'}
-          onDoubleClick={handleTitleEdit}
-          sx={{ flex: 1 }}
-        >
-          {DEBUG_CONVERSATION_IDs ? conversationId.slice(0, 10) : (title.trim() ? title : 'Chat')}{assistantTyping && '...'}
-        </Typography>
-
-      ) : (
-
-        <InlineTextarea initialText={title} onEdit={handleTitleEdited} onCancel={handleTitleEditCancel} sx={{ ml: -1.5, mr: -0.5, flexGrow: 1 }} />
-
-      )}
-
-      {/* // TODO: Commented code */}
-      {/* Edit */}
-      {/*<IconButton*/}
-      {/*  onClick={() => props.onEditTitle(props.conversationId)}*/}
-      {/*  sx={{*/}
-      {/*    opacity: 0, transition: 'opacity 0.3s', ml: 'auto',*/}
-      {/*  }}>*/}
-      {/*  <EditIcon />*/}
-      {/*</IconButton>*/}
-
-      {/* Display search frequency if it exists and is greater than 0 */}
-      {searchFrequency && searchFrequency > 0 && (
-        <Box sx={{ ml: 1 }}>
-          <Typography level='body-sm'>
-            {searchFrequency}
-          </Typography>
-        </Box>
-      )}
-
-      {/* Delete Arming */}
-      {!props.isLonely && !deleteArmed && !searchFrequency && (
-        <IconButton
-          variant={isActive ? 'solid' : 'outlined'}
-          size='sm'
-          sx={{ opacity: { xs: 1, sm: 0 }, transition: 'opacity 0.2s', ...buttonSx }}
-          onClick={handleDeleteButtonShow}
-        >
-          <DeleteOutlineIcon />
-        </IconButton>
-      )}
-
-      {/* Delete / Cancel buttons */}
-      {!props.isLonely && deleteArmed && !searchFrequency && <>
-        <IconButton size='sm' variant='solid' color='danger' sx={buttonSx} onClick={handleConversationDelete}>
-          <DeleteOutlineIcon />
-        </IconButton>
-        <IconButton size='sm' variant='solid' color='neutral' sx={buttonSx} onClick={handleDeleteButtonHide}>
-          <CloseIcon />
-        </IconButton>
-      </>}
-
-    </ListItemButton>
-  );
-}

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

@@ -1,115 +0,0 @@
-import * as React from 'react';
-import { shallow } from 'zustand/shallow';
-
-import { Box, ListItemButton, ListItemDecorator } from '@mui/joy';
-import BuildCircleIcon from '@mui/icons-material/BuildCircle';
-import SettingsIcon from '@mui/icons-material/Settings';
-
-import { DLLM, DLLMId, DModelSourceId, useModelsStore } from '~/modules/llms/store-llms';
-
-import { PageBarDropdown, DropdownItems } from '~/common/layout/optima/components/PageBarDropdown';
-import { KeyStroke } from '~/common/components/KeyStroke';
-import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
-
-
-function AppBarLLMDropdown(props: {
-  llms: DLLM[],
-  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) {
-
-    // 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.setChatLlmId(value);
-
-  const handleOpenLLMOptions = () => props.chatLlmId && openLlmOptions(props.chatLlmId);
-
-
-  return (
-    <PageBarDropdown
-      items={llmItems}
-      value={props.chatLlmId} onChange={handleChatLLMChange}
-      placeholder={props.placeholder || 'Models …'}
-      appendOption={<>
-
-        {props.chatLlmId && (
-          <ListItemButton key='menu-opt' onClick={handleOpenLLMOptions}>
-            <ListItemDecorator><SettingsIcon color='success' /></ListItemDecorator>
-            <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
-              Options
-              <KeyStroke combo='Ctrl + Shift + O' />
-            </Box>
-          </ListItemButton>
-        )}
-
-        <ListItemButton key='menu-llms' onClick={openModelsSetup}>
-          <ListItemDecorator><BuildCircleIcon color='success' /></ListItemDecorator>
-          <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
-            Models
-            <KeyStroke combo='Ctrl + Shift + M' />
-          </Box>
-        </ListItemButton>
-
-      </>}
-    />
-  );
-}
-
-export function useChatLLMDropdown() {
-  // external state
-  const { llms, chatLLMId, setChatLLMId } = useModelsStore(state => ({
-    llms: state.llms,
-    chatLLMId: state.chatLLMId,
-    setChatLLMId: state.setChatLLMId,
-  }), shallow);
-
-  const chatLLMDropdown = React.useMemo(
-    () => <AppBarLLMDropdown llms={llms} chatLlmId={chatLLMId} setChatLlmId={setChatLLMId} />,
-    [llms, chatLLMId, setChatLLMId],
-  );
-
-  return { chatLLMId, chatLLMDropdown };
-}
-
-/*export function useTempLLMDropdown(props: { initialLlmId: DLLMId | null }) {
-  // local state
-  const [llmId, setLlmId] = React.useState<DLLMId | null>(props.initialLlmId);
-
-  // external state
-  const llms = useModelsStore(state => state.llms, shallow);
-
-  const chatLLMDropdown = React.useMemo(
-    () => <AppBarLLMDropdown llms={llms} llmId={llmId} setLlmId={setLlmId} />,
-    [llms, llmId, setLlmId],
-  );
-
-  return { llmId, chatLLMDropdown };
-}*/

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

@@ -1,81 +0,0 @@
-import * as React from 'react';
-import { shallow } from 'zustand/shallow';
-
-import { ListItemButton, ListItemDecorator } from '@mui/joy';
-import CallIcon from '@mui/icons-material/Call';
-
-import { SystemPurposeId, SystemPurposes } from '../../../../data';
-
-import { DConversationId, useChatStore } from '~/common/state/store-chats';
-import { PageBarDropdown } from '~/common/layout/optima/components/PageBarDropdown';
-import { launchAppCall } from '~/common/app.routes';
-import { useUIPreferencesStore } from '~/common/state/store-ui';
-import { useUXLabsStore } from '~/common/state/store-ux-labs';
-
-
-function AppBarPersonaDropdown(props: {
-  systemPurposeId: SystemPurposeId | null,
-  setSystemPurposeId: (systemPurposeId: SystemPurposeId | null) => void,
-  onCall?: () => void,
-}) {
-
-  // external state
-  const { zenMode } = useUIPreferencesStore(state => ({
-    zenMode: state.zenMode,
-  }), shallow);
-
-  const handleSystemPurposeChange = (_event: any, value: SystemPurposeId | null) => props.setSystemPurposeId(value);
-
-
-  // options
-
-  let appendOption: React.JSX.Element | undefined = undefined;
-
-  if (props.onCall) {
-    const enableCallOption = !!props.systemPurposeId;
-    appendOption = (
-      <ListItemButton color='primary' disabled={!enableCallOption} key='menu-call-persona' onClick={props.onCall} sx={{ minWidth: 160 }}>
-        <ListItemDecorator><CallIcon color={enableCallOption ? 'primary' : 'warning'} /></ListItemDecorator>
-        Call&nbsp; {!!props.systemPurposeId && SystemPurposes[props.systemPurposeId]?.symbol}
-      </ListItemButton>
-    );
-  }
-
-  return (
-    <PageBarDropdown
-      items={SystemPurposes} showSymbols={zenMode !== 'cleaner'}
-      value={props.systemPurposeId} onChange={handleSystemPurposeChange}
-      appendOption={appendOption}
-    />
-  );
-
-}
-
-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 {
-      systemPurposeId: conversation?.systemPurposeId ?? null,
-    };
-  }, shallow);
-
-  const personaDropdown = React.useMemo(() => systemPurposeId
-      ? <AppBarPersonaDropdown
-        systemPurposeId={systemPurposeId}
-        setSystemPurposeId={(systemPurposeId) => {
-          if (conversationId && systemPurposeId)
-            useChatStore.getState().setSystemPurposeId(conversationId, systemPurposeId);
-        }}
-        onCall={labsCalling ? () => {
-          if (conversationId && systemPurposeId)
-            launchAppCall(conversationId, systemPurposeId);
-        } : undefined}
-      /> : null,
-    [conversationId, labsCalling, systemPurposeId],
-  );
-
-  return { personaDropdown };
-}

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

@@ -7,61 +7,21 @@ import InfoIcon from '@mui/icons-material/Info';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 import { InlineError } from '~/common/components/InlineError';
+import { downloadVideoFrameAsPNG, renderVideoFrameAsPNGFile } from '~/common/util/videoUtils';
 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');
-  canvas.width = videoElement.videoWidth || 640;
-  canvas.height = videoElement.videoHeight || 480;
-  const ctx = canvas.getContext('2d');
-  ctx?.drawImage(videoElement, 0, 0);
-  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);
-  const imageDataURL = renderedFrame.toDataURL('image/png');
-
-  // auto-download
-  const link = document.createElement('a');
-  link.download = prettyFileName(renderedFrame);
-  link.href = imageDataURL;
-  link.click();
-}
-
-
 export function CameraCaptureModal(props: {
   onCloseModal: () => void,
   onAttachImage: (file: File) => void
   // onOCR: (ocrText: string) => void }
 }) {
-  // state
-  // const [ocrProgress/*, setOCRProgress*/] = React.useState<number | null>(null);
-  const [showInfo, setShowInfo] = React.useState(false);
 
-  // camera operations
+  // state
+  const [showInfo, setShowInfo] = React.useState(false);
+  // const [ocrProgress/*, setOCRProgress*/] = React.useState<number | null>(null);
+
+  // external state
   const {
     videoRef,
     cameras, cameraIdx, setCameraIdx,
@@ -70,10 +30,14 @@ export function CameraCaptureModal(props: {
   } = useCameraCapture();
 
 
-  const stopAndClose = () => {
+  // derived state
+  const { onCloseModal, onAttachImage } = props;
+
+
+  const stopAndClose = React.useCallback(() => {
     resetVideo();
-    props.onCloseModal();
-  };
+    onCloseModal();
+  }, [onCloseModal, resetVideo]);
 
   /*const handleVideoOCRClicked = async () => {
     if (!videoRef.current) return;
@@ -94,18 +58,21 @@ export function CameraCaptureModal(props: {
     props.onOCR(result.data.text);
   };*/
 
-  const handleVideoSnapClicked = () => {
+  const handleVideoSnapClicked = React.useCallback(async () => {
     if (!videoRef.current) return;
-    renderVideoFrameToFile(videoRef.current, (file) => {
-      props.onAttachImage(file);
+    try {
+      const file = await renderVideoFrameAsPNGFile(videoRef.current, 'camera');
+      onAttachImage(file);
       stopAndClose();
-    });
-  };
+    } catch (error) {
+      console.error('Error capturing video frame:', error);
+    }
+  }, [onAttachImage, stopAndClose, videoRef]);
 
-  const handleVideoDownloadClicked = () => {
+  const handleVideoDownloadClicked = React.useCallback(() => {
     if (!videoRef.current) return;
-    downloadVideoFrameAsPNG(videoRef.current);
-  };
+    downloadVideoFrameAsPNG(videoRef.current, 'camera');
+  }, [videoRef]);
 
 
   return (

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

@@ -53,32 +53,35 @@ export function ChatModeMenu(props: {
   // external state
   const enterIsNewline = useUIPreferencesStore(state => state.enterIsNewline);
 
-  return <CloseableMenu
-    placement='top-end' sx={{ minWidth: 320 }}
-    open anchorEl={props.anchorEl} onClose={props.onClose}
-  >
+  return (
+    <CloseableMenu
+      placement='top-end'
+      open anchorEl={props.anchorEl} onClose={props.onClose}
+      sx={{ minWidth: 320 }}
+    >
 
-    {/*<MenuItem color='neutral' selected>*/}
-    {/*  Conversation Mode*/}
-    {/*</MenuItem>*/}
-    {/**/}
-    {/*<ListDivider />*/}
+      {/*<MenuItem color='neutral' selected>*/}
+      {/*  Conversation Mode*/}
+      {/*</MenuItem>*/}
+      {/**/}
+      {/*<ListDivider />*/}
 
-    {/* ChatMode items */}
-    {Object.entries(ChatModeItems)
-      .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}{(data.requiresTTI && !props.capabilityHasTTI) ? 'Unconfigured' : ''}</Typography>
+      {/* ChatMode items */}
+      {Object.entries(ChatModeItems)
+        .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}{(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)} />
+              )}
             </Box>
-            {(key === props.chatModeId || !!data.shortcut) && (
-              <KeyStroke combo={fixNewLineShortcut((key === props.chatModeId) ? 'ENTER' : data.shortcut ? data.shortcut : 'ENTER', enterIsNewline)} />
-            )}
-          </Box>
-        </MenuItem>)}
+          </MenuItem>)}
 
-  </CloseableMenu>;
+    </CloseableMenu>
+  );
 }

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

@@ -3,8 +3,9 @@ import { shallow } from 'zustand/shallow';
 import { fileOpen, FileWithHandle } from 'browser-fs-access';
 import { keyframes } from '@emotion/react';
 
-import { Box, Button, ButtonGroup, Card, Grid, IconButton, Stack, Textarea, Tooltip, Typography } from '@mui/joy';
+import { Box, Button, ButtonGroup, Card, Dropdown, Grid, IconButton, Menu, MenuButton, MenuItem, Textarea, Tooltip, Typography } from '@mui/joy';
 import { ColorPaletteProp, SxProps, VariantProp } from '@mui/joy/styles/types';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import AutoModeIcon from '@mui/icons-material/AutoMode';
@@ -23,17 +24,17 @@ import type { LLMOptionsOpenAI } from '~/modules/llms/vendors/openai/openai.vend
 import { useBrowseCapability } from '~/modules/browse/store-module-browsing';
 
 import { DConversationId, useChatStore } from '~/common/state/store-chats';
+import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { SpeechResult, useSpeechRecognition } from '~/common/components/useSpeechRecognition';
 import { countModelTokens } from '~/common/util/token-counter';
 import { launchAppCall } from '~/common/app.routes';
 import { lineHeightTextarea } from '~/common/app.theme';
 import { playSoundUrl } from '~/common/util/audioUtils';
 import { supportsClipboardRead } from '~/common/util/clipboardUtils';
+import { supportsScreenCapture } from '~/common/util/screenCaptureUtils';
 import { useDebouncer } from '~/common/components/useDebouncer';
 import { useGlobalShortcut } from '~/common/components/useGlobalShortcut';
-import { useIsMobile } from '~/common/components/useMatchMedia';
-import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
-import { useUIPreferencesStore } from '~/common/state/store-ui';
+import { useUICounter, useUIPreferencesStore } from '~/common/state/store-ui';
 import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
 import type { ActileItem, ActileProvider } from './actile/ActileProvider';
@@ -46,12 +47,14 @@ import { getTextBlockText, useLLMAttachments } from './attachments/useLLMAttachm
 import { useAttachments } from './attachments/useAttachments';
 
 import type { ComposerOutputMultiPart } from './composer.types';
-import { ButtonAttachCameraMemo } from './buttons/ButtonAttachCamera';
+import { ButtonAttachCameraMemo, useCameraCaptureModal } from './buttons/ButtonAttachCamera';
 import { ButtonAttachClipboardMemo } from './buttons/ButtonAttachClipboard';
 import { ButtonAttachFileMemo } from './buttons/ButtonAttachFile';
+import { ButtonAttachScreenCaptureMemo } from './buttons/ButtonAttachScreenCapture';
 import { ButtonCall } from './buttons/ButtonCall';
 import { ButtonMicContinuationMemo } from './buttons/ButtonMicContinuation';
 import { ButtonMicMemo } from './buttons/ButtonMic';
+import { ButtonMultiChat } from './buttons/ButtonMultiChat';
 import { ButtonOptionsDraw } from './buttons/ButtonOptionsDraw';
 import { ChatModeMenu } from './ChatModeMenu';
 import { TokenBadgeMemo } from './TokenBadge';
@@ -59,7 +62,7 @@ import { TokenProgressbarMemo } from './TokenProgressbar';
 import { useComposerStartupText } from './store-composer';
 
 
-const animationStopEnter = keyframes`
+export const animationStopEnter = keyframes`
     from {
         opacity: 0;
         transform: translateY(8px)
@@ -75,13 +78,16 @@ const animationStopEnter = keyframes`
  * A React component for composing messages, with attachments and different modes.
  */
 export function Composer(props: {
+  isMobile?: boolean;
   chatLLM: DLLM | null;
   composerTextAreaRef: React.RefObject<HTMLTextAreaElement>;
   conversationId: DConversationId | null;
   capabilityHasT2I: boolean;
+  isMulticast: boolean | null;
   isDeveloperMode: boolean;
   onAction: (chatModeId: ChatModeId, conversationId: DConversationId, multiPartMessage: ComposerOutputMultiPart) => boolean;
   onTextImagine: (conversationId: DConversationId, text: string) => void;
+  setIsMulticast: (on: boolean) => void;
   sx?: SxProps;
 }) {
 
@@ -93,12 +99,12 @@ export function Composer(props: {
   const [chatModeMenuAnchor, setChatModeMenuAnchor] = React.useState<HTMLAnchorElement | null>(null);
 
   // external state
-  const isMobile = useIsMobile();
-  const { openPreferencesTab, setIsFocusedMode } = useOptimaLayout();
-  const { labsCalling, labsCameraDesktop } = useUXLabsStore(state => ({
-    labsCalling: state.labsCalling,
+  const { openPreferencesTab /*, setIsFocusedMode*/ } = useOptimaLayout();
+  const { labsAttachScreenCapture, labsCameraDesktop } = useUXLabsStore(state => ({
+    labsAttachScreenCapture: state.labsAttachScreenCapture,
     labsCameraDesktop: state.labsCameraDesktop,
   }), shallow);
+  const { novel: explainShiftEnter, touch: touchShiftEnter } = useUICounter('composer-shift-enter');
   const [chatModeId, setChatModeId] = React.useState<ChatModeId>('generate-text');
   const [startupText, setStartupText] = useComposerStartupText();
   const enterIsNewline = useUIPreferencesStore(state => state.enterIsNewline);
@@ -116,9 +122,11 @@ export function Composer(props: {
   const { attachAppendClipboardItems, attachAppendDataTransfer, attachAppendFile, attachments: _attachments, clearAttachments, removeAttachment } =
     useAttachments(browsingInComposer && !composeText.startsWith('/'));
 
+
   // derived state
 
-  const isDesktop = !isMobile;
+  const isMobile = !!props.isMobile;
+  const isDesktop = !props.isMobile;
   const chatLLMId = props.chatLLM?.id || null;
 
   // attachments derived state
@@ -130,7 +138,7 @@ export function Composer(props: {
   const tokensComposerText = React.useMemo(() => {
     if (!debouncedText || !chatLLMId)
       return 0;
-    return countModelTokens(debouncedText, chatLLMId, 'composer text');
+    return countModelTokens(debouncedText, chatLLMId, 'composer text') ?? 0;
   }, [chatLLMId, debouncedText]);
   let tokensComposer = tokensComposerText + llmAttachments.tokenCountApprox;
   if (tokensComposer > 0)
@@ -181,7 +189,7 @@ export function Composer(props: {
 
   const handleCallClicked = () => props.conversationId && systemPurposeId && launchAppCall(props.conversationId, systemPurposeId);
 
-  const handleDrawOptionsClicked = () => openPreferencesTab(2);
+  const handleDrawOptionsClicked = () => openPreferencesTab(PreferencesTab.Draw);
 
   const handleTextImagineClicked = () => {
     if (!composeText || !props.conversationId)
@@ -231,14 +239,15 @@ export function Composer(props: {
     return [providerCommands(onActileCommandSelect)];
   }, [onActileCommandSelect]);
 
-  const { actileComponent, actileInterceptKeydown } = useActileManager(actileProviders, props.composerTextAreaRef);
+  const { actileComponent, actileInterceptKeydown, actileInterceptTextChange } = useActileManager(actileProviders, props.composerTextAreaRef);
 
 
   // Text typing
 
   const handleTextareaTextChange = React.useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setComposeText(e.target.value);
-  }, [setComposeText]);
+    isMobile && actileInterceptTextChange(e.target.value);
+  }, [actileInterceptTextChange, isMobile, setComposeText]);
 
   const handleTextareaKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     // disable keyboard handling if the actile is visible
@@ -255,6 +264,8 @@ export function Composer(props: {
       }
 
       // Shift: toggles the 'enter is newline'
+      if (e.shiftKey)
+        touchShiftEnter();
       if (enterIsNewline ? e.shiftKey : !e.shiftKey) {
         if (!assistantAbortible)
           handleSendAction(chatModeId, composeText);
@@ -262,7 +273,14 @@ export function Composer(props: {
       }
     }
 
-  }, [actileInterceptKeydown, assistantAbortible, chatModeId, composeText, enterIsNewline, handleSendAction]);
+  }, [actileInterceptKeydown, assistantAbortible, chatModeId, composeText, enterIsNewline, handleSendAction, touchShiftEnter]);
+
+
+  // Focus mode
+
+  // const handleFocusModeOn = React.useCallback(() => setIsFocusedMode(true), [setIsFocusedMode]);
+
+  // const handleFocusModeOff = React.useCallback(() => setIsFocusedMode(false), [setIsFocusedMode]);
 
 
   // Mic typing & continuation mode
@@ -303,7 +321,7 @@ export function Composer(props: {
   useGlobalShortcut('m', true, false, false, toggleRecording);
 
   const micIsRunning = !!speechInterimResult;
-  const micContinuationTrigger = micContinuation && !micIsRunning && !assistantAbortible;
+  const micContinuationTrigger = micContinuation && !micIsRunning && !assistantAbortible && !isSpeechError;
   const micColor: ColorPaletteProp = isSpeechError ? 'danger' : isRecordingSpeech ? 'primary' : isRecordingAudio ? 'primary' : 'neutral';
   const micVariant: VariantProp = isRecordingSpeech ? 'solid' : isRecordingAudio ? 'soft' : 'soft';  //(isDesktop ? 'soft' : 'plain');
 
@@ -333,6 +351,12 @@ export function Composer(props: {
     void attachAppendFile('camera', file);
   }, [attachAppendFile]);
 
+  const handleAttachScreenCapture = React.useCallback((file: File) => {
+    void attachAppendFile('screencapture', file);
+  }, [attachAppendFile]);
+
+  const { openCamera, cameraCaptureComponent } = useCameraCaptureModal(handleAttachCameraImage);
+
   const handleAttachFilePicker = React.useCallback(async () => {
     try {
       const selectedFiles: FileWithHandle[] = await fileOpen({ multiple: true });
@@ -419,44 +443,62 @@ export function Composer(props: {
     ? 'warning'
     : isReAct ? 'success' : isDraw ? 'warning' : 'primary';
 
-  const textPlaceholder: string =
+  let textPlaceholder: string =
     isDraw
       ? 'Describe an idea or a drawing...'
       : isReAct
         ? 'Multi-step reasoning question...'
         : props.isDeveloperMode
-          ? 'Chat with me · drop source files · attach code...'
+          ? 'Chat with me' + (isDesktop ? ' · drop source' : '') + ' · attach code...'
           : props.capabilityHasT2I
-            ? 'Chat · /react · /draw · drop text files...'
-            : 'Chat · /react · drop text files...';
-
+            ? 'Chat · /react · /draw · drop files...'
+            : 'Chat · /react · drop files...';
+  if (isDesktop && explainShiftEnter)
+    textPlaceholder += !enterIsNewline ? '\nShift+Enter to add a new line' : '\nShift+Enter to send';
 
   return (
-    <Box sx={props.sx}>
+    <Box aria-label='User Message' component='section' sx={props.sx}>
       <Grid container spacing={{ xs: 1, md: 2 }}>
 
-        {/* Button column and composer Text (mobile: top, desktop: left and center) */}
-        <Grid xs={12} md={9}><Stack direction='row' spacing={{ xs: 1, md: 2 }}>
+        <Grid xs={12} md={9}><Box sx={{ display: 'flex', gap: { xs: 1, md: 2 }, alignItems: 'flex-start' }}>
 
-          {/* Vertical (insert) buttons */}
-          {isMobile ? (
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
+          {/* Start buttons column */}
+          <Box sx={{
+            flexGrow: 0,
+            display: 'grid', gap: 1,
+          }}>
+            {isMobile ? <>
 
               {/* [mobile] Mic button */}
               {isSpeechEnabled && <ButtonMicMemo variant={micVariant} color={micColor} onClick={handleToggleMic} />}
 
-              {/* Responsive Camera OCR button */}
-              <ButtonAttachCameraMemo isMobile onAttachImage={handleAttachCameraImage} />
+              {/* [mobile] [+] button */}
+              <Dropdown>
+                <MenuButton slots={{ root: IconButton }}>
+                  <AddCircleOutlineIcon />
+                </MenuButton>
+                <Menu>
+                  {/* Responsive Camera OCR button */}
+                  <MenuItem>
+                    <ButtonAttachCameraMemo onOpenCamera={openCamera} />
+                  </MenuItem>
 
-              {/* Responsive Open Files button */}
-              <ButtonAttachFileMemo isMobile onAttachFilePicker={handleAttachFilePicker} />
+                  {/* Responsive Open Files button */}
+                  <MenuItem>
+                    <ButtonAttachFileMemo onAttachFilePicker={handleAttachFilePicker} />
+                  </MenuItem>
 
-              {/* Responsive Paste button */}
-              {supportsClipboardRead && <ButtonAttachClipboardMemo isMobile onClick={attachAppendClipboardItems} />}
+                  {/* Responsive Paste button */}
+                  {supportsClipboardRead && <MenuItem>
+                    <ButtonAttachClipboardMemo onClick={attachAppendClipboardItems} />
+                  </MenuItem>}
+                </Menu>
+              </Dropdown>
 
-            </Box>
-          ) : (
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              {/* [Mobile] MultiChat button */}
+              {props.isMulticast !== null && <ButtonMultiChat isMobile multiChat={props.isMulticast} onSetMultiChat={props.setIsMulticast} />}
+
+            </> : <>
 
               {/*<FormHelperText sx={{ mx: 'auto' }}>*/}
               {/*  Attach*/}
@@ -468,29 +510,34 @@ export function Composer(props: {
               {/* Responsive Paste button */}
               {supportsClipboardRead && <ButtonAttachClipboardMemo onClick={attachAppendClipboardItems} />}
 
+              {/* Responsive Screen Capture button */}
+              {labsAttachScreenCapture && supportsScreenCapture && <ButtonAttachScreenCaptureMemo onAttachScreenCapture={handleAttachScreenCapture} />}
+
               {/* Responsive Camera OCR button */}
-              {labsCameraDesktop && <ButtonAttachCameraMemo onAttachImage={handleAttachCameraImage} />}
+              {labsCameraDesktop && <ButtonAttachCameraMemo onOpenCamera={openCamera} />}
 
-            </Box>
-          )}
+            </>}
+          </Box>
 
-          {/* Vertically stacked [ Edit box + Overlays + Mic | Attachments ] */}
+          {/* [ Textarea + Overlays + Mic | Attachments ] */}
           <Box sx={{
-            flexGrow: 1,
-            display: 'flex', flexDirection: 'column', gap: 1,
             minWidth: 200, // enable X-scrolling (resetting any possible minWidth due to the attachments)
+            flexGrow: 1,
+            display: 'grid', gap: 1,
           }}>
 
-            {/* Edit box + Overlays + Mic buttons */}
+            {/* Textarea + Mic buttons + Mic/Drag overlay */}
             <Box sx={{ position: 'relative' }}>
 
               {/* Edit box with inner Token Progress bar */}
               <Box sx={{ position: 'relative' }}>
 
                 <Textarea
-                  variant='outlined' color={isDraw ? 'warning' : isReAct ? 'success' : 'neutral'}
+                  variant='outlined'
+                  color={isDraw ? 'warning' : isReAct ? 'success' : undefined}
                   autoFocus
-                  minRows={isMobile ? 5 : 5} maxRows={10}
+                  minRows={isMobile ? 4 : 5}
+                  maxRows={isMobile ? 8 : 10}
                   placeholder={textPlaceholder}
                   value={composeText}
                   onChange={handleTextareaTextChange}
@@ -498,8 +545,8 @@ export function Composer(props: {
                   onDragStart={handleTextareaDragStart}
                   onKeyDown={handleTextareaKeyDown}
                   onPasteCapture={handleAttachCtrlV}
-                  onFocusCapture={() => setIsFocusedMode(true)}
-                  onBlurCapture={() => setIsFocusedMode(false)}
+                  // onFocusCapture={handleFocusModeOn}
+                  // onBlurCapture={handleFocusModeOff}
                   slotProps={{
                     textarea: {
                       enterKeyHint: enterIsNewline ? 'enter' : 'send',
@@ -512,9 +559,7 @@ export function Composer(props: {
                   }}
                   sx={{
                     backgroundColor: 'background.level1',
-                    '&:focus-within': {
-                      backgroundColor: 'background.popup',
-                    },
+                    '&:focus-within': { backgroundColor: 'background.popup' },
                     lineHeight: lineHeightTextarea,
                   }} />
 
@@ -605,18 +650,18 @@ export function Composer(props: {
 
           </Box>
 
-        </Stack></Grid>
+        </Box></Grid>
+
 
-        {/* Send pane (mobile: bottom, desktop: right) */}
         <Grid xs={12} md={3}>
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, height: '100%' }}>
 
-            {/* Send/Stop (and mobile corner buttons) */}
+            {/* This row is here only for the [mobile] bottom-start corner item */}
             <Box sx={{ display: 'flex' }}>
 
               {/* [mobile] bottom-corner secondary button */}
               {isMobile && (isChat
-                  ? <ButtonCall isMobile disabled={!labsCalling || !props.conversationId || !chatLLMId} onClick={handleCallClicked} sx={{ mr: { xs: 1, md: 2 } }} />
+                  ? <ButtonCall isMobile disabled={!props.conversationId || !chatLLMId} onClick={handleCallClicked} sx={{ mr: { xs: 1, md: 2 } }} />
                   : isDraw
                     ? <ButtonOptionsDraw isMobile onClick={handleDrawOptionsClicked} sx={{ mr: { xs: 1, md: 2 } }} />
                     : <IconButton disabled sx={{ mr: { xs: 1, md: 2 } }} />
@@ -678,12 +723,14 @@ export function Composer(props: {
 
             </Box>
 
+            {/* [desktop] Multicast switch (under the Chat button) */}
+            {isDesktop && props.isMulticast !== null && <ButtonMultiChat multiChat={props.isMulticast} onSetMultiChat={props.setIsMulticast} />}
 
             {/* [desktop] secondary buttons (aligned to bottom for now, and mutually exclusive) */}
-            {isDesktop && <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 1, justifyContent: 'flex-end' }}>
+            {isDesktop && <Box sx={{ mt: 'auto', display: 'grid', gap: 1 }}>
 
               {/* [desktop] Call secondary button */}
-              {isChat && <ButtonCall disabled={!labsCalling || !props.conversationId || !chatLLMId} onClick={handleCallClicked} />}
+              {isChat && <ButtonCall disabled={!props.conversationId || !chatLLMId} onClick={handleCallClicked} />}
 
               {/* [desktop] Draw Options secondary button */}
               {isDraw && <ButtonOptionsDraw onClick={handleDrawOptionsClicked} />}
@@ -693,20 +740,23 @@ export function Composer(props: {
           </Box>
         </Grid>
 
-
-        {/* Mode selector */}
-        {!!chatModeMenuAnchor && (
-          <ChatModeMenu
-            anchorEl={chatModeMenuAnchor} onClose={handleModeSelectorHide}
-            chatModeId={chatModeId} onSetChatModeId={handleModeChange}
-            capabilityHasTTI={props.capabilityHasT2I}
-          />
-        )}
-
-        {/* Actile */}
-        {actileComponent}
-
       </Grid>
+
+      {/* Mode selector */}
+      {!!chatModeMenuAnchor && (
+        <ChatModeMenu
+          anchorEl={chatModeMenuAnchor} onClose={handleModeSelectorHide}
+          chatModeId={chatModeId} onSetChatModeId={handleModeChange}
+          capabilityHasTTI={props.capabilityHasT2I}
+        />
+      )}
+
+      {/* Camera */}
+      {cameraCaptureComponent}
+
+      {/* Actile */}
+      {actileComponent}
+
     </Box>
   );
 }

src/apps/chat/components/composer/actile/ActilePopup.tsx

@@ -21,19 +21,22 @@ export function ActilePopup(props: {
   const hasAnyIcon = props.items.some(item => !!item.Icon);
 
   return (
-    <CloseableMenu open anchorEl={props.anchorEl} onClose={props.onClose} noTopPadding>
+    <CloseableMenu
+      noTopPadding noBottomPadding
+      open anchorEl={props.anchorEl} onClose={props.onClose}
+      sx={{ minWidth: 320 }}
+    >
 
       {!!props.title && (
         <Sheet variant='soft' sx={{ p: 1, borderBottom: '1px solid', borderBottomColor: 'neutral.softActiveBg' }}>
-          {/*<ListItemDecorator/>*/}
-          <Typography level='title-md'>
+          <Typography level='title-sm'>
             {props.title}
           </Typography>
         </Sheet>
       )}
 
       {!props.items.length && (
-        <ListItem variant='soft' color='primary'>
+        <ListItem variant='soft' color='warning'>
           <Typography level='body-md'>
             No matching command
           </Typography>
@@ -41,35 +44,39 @@ export function ActilePopup(props: {
       )}
 
       {props.items.map((item, idx) => {
+          const isActive = idx === props.activeItemIndex;
           const labelBold = item.label.slice(0, props.activePrefixLength);
           const labelNormal = item.label.slice(props.activePrefixLength);
           return (
-            <ListItemButton
+            <ListItem
               key={item.id}
-              variant={idx === props.activeItemIndex ? 'soft' : undefined}
+              variant={isActive ? 'soft' : undefined}
+              color={isActive ? 'primary' : undefined}
               onClick={() => props.onItemClick(item)}
             >
-              {hasAnyIcon && (
-                <ListItemDecorator>
-                  {item.Icon ? <item.Icon /> : null}
-                </ListItemDecorator>
-              )}
-              <Box>
+              <ListItemButton color='primary'>
+                {hasAnyIcon && (
+                  <ListItemDecorator>
+                    {item.Icon ? <item.Icon /> : null}
+                  </ListItemDecorator>
+                )}
+                <Box>
 
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Typography level='title-md' color='primary'>
-                    <span style={{ fontWeight: 600, textDecoration: 'underline' }}>{labelBold}</span>{labelNormal}
-                  </Typography>
-                  {item.argument && <Typography level='body-sm'>
-                    {item.argument}
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Typography level='title-sm' color={isActive ? 'primary' : undefined}>
+                      <span style={{ fontWeight: 600, textDecoration: 'underline' }}>{labelBold}</span>{labelNormal}
+                    </Typography>
+                    {item.argument && <Typography level='body-sm'>
+                      {item.argument}
+                    </Typography>}
+                  </Box>
+
+                  {!!item.description && <Typography level='body-xs'>
+                    {item.description}
                   </Typography>}
                 </Box>
-
-                {!!item.description && <Typography level='body-xs'>
-                  {item.description}
-                </Typography>}
-              </Box>
-            </ListItemButton>
+              </ListItemButton>
+            </ListItem>
           );
         },
       )}

src/apps/chat/components/composer/actile/ActileProvider.tsx

@@ -13,6 +13,7 @@ type ActileProviderIds = 'actile-commands' | 'actile-attach-reference';
 export interface ActileProvider {
   id: ActileProviderIds;
   title: string;
+  searchPrefix: string;
 
   checkTriggerText: (trailingText: string) => boolean;
 

src/apps/chat/components/composer/actile/providerAttachReference.tsx

@@ -1,9 +1,10 @@
-import { ActileItem, ActileProvider } from './ActileProvider';
+//import { ActileItem, ActileProvider } from './ActileProvider';
 
 
-export const providerAttachReference: ActileProvider = {
+/*export const providerAttachReference: ActileProvider = {
   id: 'actile-attach-reference',
   title: 'Attach Reference',
+  searchPrefix: '@',
 
   checkTriggerText: (trailingText: string) =>
     trailingText.endsWith(' @'),
@@ -20,4 +21,4 @@ export const providerAttachReference: ActileProvider = {
   onItemSelect: (item: ActileItem) => {
     console.log('Selected item:', item);
   },
-};
+};*/

src/apps/chat/components/composer/actile/providerCommands.tsx

@@ -5,6 +5,7 @@ import { findAllChatCommands } from '../../../commands/commands.registry';
 export const providerCommands = (onItemSelect: (item: ActileItem) => void): ActileProvider => ({
   id: 'actile-commands',
   title: 'Chat Commands',
+  searchPrefix: '/',
 
   checkTriggerText: (trailingText: string) =>
     trailingText.trim() === '/',

src/apps/chat/components/composer/actile/useActileManager.tsx

@@ -40,6 +40,26 @@ export const useActileManager = (providers: ActileProvider[], anchorRef: React.R
   }, [activeItem, handlePopupItemClicked]);
 
 
+  const actileInterceptTextChange = React.useCallback((trailingText: string) => {
+    for (const provider of providers) {
+      if (provider.checkTriggerText(trailingText)) {
+        setProvider(provider);
+        setPopupOpen(true);
+        setActiveSearchString(provider.searchPrefix);
+        provider
+          .fetchItems()
+          .then(items => setItems(items))
+          .catch(error => {
+            handleClose();
+            console.error('Failed to fetch popup items:', error);
+          });
+        return true;
+      }
+    }
+    return false;
+  }, [handleClose, providers]);
+
+
   const actileInterceptKeydown = React.useCallback((_event: React.KeyboardEvent<HTMLTextAreaElement>): boolean => {
 
     // Popup open: Intercept
@@ -69,32 +89,10 @@ export const useActileManager = (providers: ActileProvider[], anchorRef: React.R
     }
 
     // Popup closed: Check for triggers
-
-    // optimization
-    if (key !== '/' && key !== '@')
-      return false;
-
     const trailingText = (currentTarget.value || '') + key;
+    return actileInterceptTextChange(trailingText);
 
-    // check all rules to find one that triggers
-    for (const provider of providers) {
-      if (provider.checkTriggerText(trailingText)) {
-        setProvider(provider);
-        setPopupOpen(true);
-        setActiveSearchString(key);
-        provider
-          .fetchItems()
-          .then(items => setItems(items))
-          .catch(error => {
-            handleClose();
-            console.error('Failed to fetch popup items:', error);
-          });
-        return true;
-      }
-    }
-
-    return false;
-  }, [activeItems.length, handleClose, handleEnterKey, popupOpen, providers]);
+  }, [actileInterceptTextChange, activeItems.length, handleClose, handleEnterKey, popupOpen]);
 
 
   const actileComponent = React.useMemo(() => {
@@ -114,5 +112,6 @@ export const useActileManager = (providers: ActileProvider[], anchorRef: React.R
   return {
     actileComponent,
     actileInterceptKeydown,
+    actileInterceptTextChange,
   };
 };

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

@@ -87,6 +87,13 @@ function attachmentConverterIcon(attachment: Attachment) {
 }
 
 function attachmentLabelText(attachment: Attachment): string {
+  const converter = attachment.converterIdx !== null ? attachment.converters[attachment.converterIdx] ?? null : null;
+  if (converter && attachment.label === 'Rich Text') {
+    if (converter.id === 'rich-text-table')
+      return 'Rich Table';
+    if (converter.id === 'rich-text')
+      return 'Rich HTML';
+  }
   return ellipsizeFront(attachment.label, 24);
 }
 

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

@@ -96,9 +96,9 @@ export function AttachmentMenu(props: {
 
   return (
     <CloseableMenu
-      dense placement='top' sx={{ minWidth: 200 }}
+      dense placement='top'
       open anchorEl={props.menuAnchor} onClose={props.onClose}
-      noTopPadding noBottomPadding
+      sx={{ minWidth: 200 }}
     >
 
       {/* Move Arrows */}

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

@@ -141,9 +141,8 @@ export function Attachments(props: {
     {/* Overall Menu */}
     {!!overallMenuAnchor && (
       <CloseableMenu
-        placement='top-start'
+        dense placement='top-start'
         open anchorEl={overallMenuAnchor} onClose={handleOverallMenuHide}
-        noTopPadding noBottomPadding
       >
         <MenuItem onClick={handleAttachmentsInlineText} disabled={!isOutputTextInlineable}>
           <ListItemDecorator><VerticalAlignBottomIcon /></ListItemDecorator>

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

@@ -255,7 +255,7 @@ export async function attachmentPerformConversion(attachment: Readonly<Attachmen
       outputs.push({
         type: 'text-block',
         text: input.altData!,
-        title: ref,
+        title: ref || '\n<!DOCTYPE html>',
         collapsible: true,
       });
       break;

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

@@ -24,7 +24,7 @@ import { ContentReducer } from '~/modules/aifn/summarize/ContentReducer';
 
     // see how we fare on budget
     if (chatLLMId) {
-      const newTextTokens = countModelTokens(newText, chatLLMId, 'reducer trigger');
+      const newTextTokens = countModelTokens(newText, chatLLMId, 'reducer trigger') ?? 0;
 
       // simple trigger for the reduction dialog
       if (newTextTokens > remainingTokens) {

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

@@ -2,13 +2,13 @@ import { create } from 'zustand';
 import type { FileWithHandle } from 'browser-fs-access';
 
 import type { ComposerOutputMultiPart } from '../composer.types';
-import { attachmentPerformConversion, attachmentCreate, attachmentDefineConverters, attachmentLoadInputAsync } from './pipeline';
+import { attachmentCreate, attachmentDefineConverters, attachmentLoadInputAsync, attachmentPerformConversion } from './pipeline';
 
 
 // Attachment Types
 
 export type AttachmentSourceOriginDTO = 'drop' | 'paste';
-export type AttachmentSourceOriginFile = 'camera' | 'file-open' | 'clipboard-read' | AttachmentSourceOriginDTO;
+export type AttachmentSourceOriginFile = 'camera' | 'screencapture' | 'file-open' | 'clipboard-read' | AttachmentSourceOriginDTO;
 
 export type AttachmentSource = {
   media: 'url';

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

@@ -10,6 +10,10 @@ import { getClipboardItems } from '~/common/util/clipboardUtils';
 import { AttachmentSourceOriginDTO, AttachmentSourceOriginFile, useAttachmentsStore } from './store-attachments';
 
 
+// enable to debug attachment operations
+const ATTACHMENTS_DEBUG_INTAKE = false;
+
+
 export const useAttachments = (enableLoadURLs: boolean) => {
 
   // state
@@ -24,17 +28,30 @@ export const useAttachments = (enableLoadURLs: boolean) => {
 
   // Creation helpers
 
-  const attachAppendFile = React.useCallback((origin: AttachmentSourceOriginFile, fileWithHandle: FileWithHandle, overrideFileName?: string) =>
-      createAttachment({
-        media: 'file', origin, fileWithHandle, refPath: overrideFileName || fileWithHandle.name,
-      })
-    , [createAttachment]);
+  const attachAppendFile = React.useCallback((origin: AttachmentSourceOriginFile, fileWithHandle: FileWithHandle, overrideFileName?: string) => {
+    if (ATTACHMENTS_DEBUG_INTAKE)
+      console.log('attachAppendFile', origin, fileWithHandle, overrideFileName);
+
+    return 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 => {
 
+    // https://github.com/enricoros/big-AGI/issues/286
+    const textHtml = dt.getData('text/html') || '';
+    const heuristicIsExcel = textHtml.includes('"urn:schemas-microsoft-com:office:excel"');
+    // noinspection HttpUrlsUsage
+    const heuristicIsPowerPoint = textHtml.includes('xmlns:m="http://schemas.microsoft.com/office/20') && textHtml.includes('<meta name=Generator content="Microsoft PowerPoint');
+    const heuristicBypassImage = heuristicIsExcel || heuristicIsPowerPoint;
+
+    if (ATTACHMENTS_DEBUG_INTAKE)
+      console.log('attachAppendDataTransfer', dt.types, dt.items, dt.files, textHtml);
+
     // attach File(s)
-    if (dt.files.length >= 1) {
+    if (dt.files.length >= 1 && !heuristicBypassImage /* special case: ignore images from Microsoft Office pastes (prioritize the HTML paste) */) {
       // 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')) {
@@ -68,7 +85,6 @@ export const useAttachments = (enableLoadURLs: boolean) => {
     }
 
     // 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,
@@ -100,13 +116,20 @@ export const useAttachments = (enableLoadURLs: boolean) => {
       return;
     }
 
-    // loop on all the possible attachments
+    // loop on all the clipboard items
     for (const clipboardItem of clipboardItems) {
 
+      // https://github.com/enricoros/big-AGI/issues/286
+      const textHtml = clipboardItem.types.includes('text/html') ? await clipboardItem.getType('text/html').then(blob => blob.text()) : '';
+      const heuristicBypassImage = textHtml.startsWith('<table ');
+
+      if (ATTACHMENTS_DEBUG_INTAKE)
+        console.log(' - attachAppendClipboardItems.item:', clipboardItem, textHtml, heuristicBypassImage);
+
       // attach as image
       let imageAttached = false;
       for (const mimeType of clipboardItem.types) {
-        if (mimeType.startsWith('image/')) {
+        if (mimeType.startsWith('image/') && !heuristicBypassImage) {
           try {
             const imageBlob = await clipboardItem.getType(mimeType);
             const imageName = mimeType.replace('image/', 'clipboard.').replaceAll('/', '.') || 'clipboard.png';
@@ -136,7 +159,6 @@ export const useAttachments = (enableLoadURLs: boolean) => {
       }
 
       // 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,

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

@@ -78,7 +78,7 @@ function toLLMAttachment(attachment: Attachment, supportedOutputPartTypes: Compo
   const tokenCountApprox = llmForTokenCount
     ? attachmentOutputs.reduce((acc, output) => {
       if (output.type === 'text-block')
-        return acc + countModelTokens(output.text, llmForTokenCount, 'attachments tokens count');
+        return acc + (countModelTokens(output.text, llmForTokenCount, 'attachments tokens count') ?? 0);
       console.warn('Unhandled token preview for output type:', output.type);
       return acc;
     }, 0)

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

@@ -15,33 +15,37 @@ const attachCameraLegend = (isMobile: boolean) =>
 
 export const ButtonAttachCameraMemo = React.memo(ButtonAttachCamera);
 
-function ButtonAttachCamera(props: { isMobile?: boolean, onAttachImage: (file: File) => void }) {
+function ButtonAttachCamera(props: { isMobile?: boolean, onOpenCamera: () => void }) {
+  return props.isMobile ? (
+    <IconButton onClick={props.onOpenCamera}>
+      <AddAPhotoIcon />
+    </IconButton>
+  ) : (
+    <Tooltip disableInteractive variant='solid' placement='top-start' title={attachCameraLegend(!!props.isMobile)}>
+      <Button fullWidth variant='plain' color='neutral' onClick={props.onOpenCamera} startDecorator={<AddAPhotoIcon />}
+              sx={{ justifyContent: 'flex-start' }}>
+        Camera
+      </Button>
+    </Tooltip>
+  );
+}
+
+export function useCameraCaptureModal(onAttachImage: (file: File) => void) {
+
   // state
   const [open, setOpen] = React.useState(false);
 
-  return <>
+  const openCamera = React.useCallback(() => setOpen(true), []);
 
-    {/* The Button */}
-    {props.isMobile ? (
-      <IconButton 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>
-    )}
+  const cameraCaptureComponent = React.useMemo(() => open && (
+    <CameraCaptureModal
+      onCloseModal={() => setOpen(false)}
+      onAttachImage={onAttachImage}
+    />
+  ), [open, onAttachImage]);
 
-    {/* The actual capture dialog, which will stream the video */}
-    {open && (
-      <CameraCaptureModal
-        onCloseModal={() => setOpen(false)}
-        onAttachImage={props.onAttachImage}
-      />
-    )}
-
-  </>;
+  return {
+    openCamera,
+    cameraCaptureComponent,
+  };
 }

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

@@ -22,7 +22,7 @@ function ButtonAttachClipboard(props: { isMobile?: boolean, onClick: () => void
       <ContentPasteGoIcon />
     </IconButton>
   ) : (
-    <Tooltip variant='solid' placement='top-start' title={pasteClipboardLegend}>
+    <Tooltip disableInteractive variant='solid' placement='top-start' title={pasteClipboardLegend}>
       <Button fullWidth variant='plain' color='neutral' startDecorator={<ContentPasteGoIcon />} onClick={props.onClick}
               sx={{ justifyContent: 'flex-start' }}>
         Paste

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

@@ -19,7 +19,7 @@ function ButtonAttachFile(props: { isMobile?: boolean, onAttachFilePicker: () =>
       <AttachFileOutlinedIcon />
     </IconButton>
   ) : (
-    <Tooltip variant='solid' placement='top-start' title={attachFileLegend}>
+    <Tooltip disableInteractive variant='solid' placement='top-start' title={attachFileLegend}>
       <Button fullWidth variant='plain' color='neutral' onClick={props.onAttachFilePicker} startDecorator={<AttachFileOutlinedIcon />}
               sx={{ justifyContent: 'flex-start' }}>
         File

src/apps/chat/components/composer/buttons/ButtonAttachScreenCapture.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+import { Box, Button, IconButton, Tooltip } from '@mui/joy';
+import ScreenshotMonitorIcon from '@mui/icons-material/ScreenshotMonitor';
+
+import { takeScreenCapture } from '~/common/util/screenCaptureUtils';
+
+
+export const ButtonAttachScreenCaptureMemo = React.memo(ButtonAttachScreenCapture);
+
+function ButtonAttachScreenCapture(props: { isMobile?: boolean, onAttachScreenCapture: (file: File) => void }) {
+
+  // state
+  const [capturing, setCapturing] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  // derived state
+  const { onAttachScreenCapture } = props;
+
+
+  const handleTakeScreenCapture = React.useCallback(async () => {
+    setError(null);
+    setCapturing(true);
+    try {
+      const file = await takeScreenCapture();
+      file && onAttachScreenCapture(file);
+    } catch (error: any) {
+      const message = error instanceof Error ? error.message : String(error);
+      setError(`Screen capture issue: ${message}`);
+    }
+    setCapturing(false);
+  }, [onAttachScreenCapture]);
+
+
+  return props.isMobile ? (
+    <IconButton onClick={handleTakeScreenCapture}>
+      <ScreenshotMonitorIcon />
+    </IconButton>
+  ) : (
+    <Tooltip
+      arrow disableInteractive variant='solid' placement='top-start'
+      title={
+        <Box sx={{ px: 1, py: 0.75, lineHeight: '1.5rem' }}>
+          <b>Attach screen capture</b><br />
+          {error || 'Attach the image of a window, a browser tab, or a screen'}
+        </Box>
+      }
+    >
+      <Button
+        fullWidth
+        variant={capturing ? 'solid' : 'plain'}
+        color={!!error ? 'danger' : 'neutral'}
+        onClick={handleTakeScreenCapture}
+        loading={capturing}
+        startDecorator={<ScreenshotMonitorIcon />}
+        sx={{ justifyContent: 'flex-start' }}
+      >
+        Screen
+      </Button>
+    </Tooltip>
+  );
+}

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

@@ -16,7 +16,7 @@ export function ButtonCall(props: { isMobile?: boolean, disabled?: boolean, onCl
       <CallIcon />
     </IconButton>
   ) : (
-    <Tooltip variant='solid' arrow placement='right' title={callConversationLegend}>
+    <Tooltip disableInteractive 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>

src/apps/chat/components/composer/buttons/ButtonMultiChat.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import { Box, FormControl, FormLabel, IconButton, Switch } from '@mui/joy';
+
+import { ChatMulticastOnIcon } from '~/common/components/icons/ChatMulticastOnIcon';
+import { ChatMulticastOffIcon } from '~/common/components/icons/ChatMulticastOffIcon';
+
+
+export function ButtonMultiChat(props: { isMobile?: boolean, multiChat: boolean, onSetMultiChat: (multiChat: boolean) => void }) {
+  const { multiChat } = props;
+  return props.isMobile ? (
+    <IconButton
+      variant={multiChat ? 'solid' : 'outlined'}
+      color={multiChat ? 'warning' : undefined}
+      onClick={() => props.onSetMultiChat(!multiChat)}
+    >
+      {multiChat ? <ChatMulticastOnIcon /> : <ChatMulticastOffIcon />}
+    </IconButton>
+  ) : (
+    <FormControl orientation='horizontal' sx={{ minHeight: '2.25rem', justifyContent: 'space-between' }}>
+      <FormLabel sx={{ gap: 1, flexFlow: 'row nowrap' }}>
+        <Box sx={{ display: { xs: 'none', lg: 'inline-block' } }}>
+          {multiChat ? <ChatMulticastOnIcon sx={{ color: 'warning.solidBg' }} /> : <ChatMulticastOffIcon />}
+        </Box>
+        {multiChat ? 'Multichat · On' : 'Multichat'}
+      </FormLabel>
+      <Switch color={multiChat ? 'primary' : undefined} checked={multiChat} onChange={(e) => props.onSetMultiChat(e.target.checked)} />
+    </FormControl>
+  );
+}

src/apps/chat/components/folders/ChatFolderList.tsx

@@ -13,12 +13,12 @@ import { StrictModeDroppable } from './StrictModeDroppable';
 
 export function ChatFolderList(props: {
   folders: DFolder[];
+  activeFolderId: string | null;
   onFolderSelect: (folderId: string | null) => void;
-  selectedFolderId: string | null;
 }) {
 
   // derived props
-  const { folders, onFolderSelect, selectedFolderId } = props;
+  const { folders, onFolderSelect, activeFolderId } = props;
 
   // handlers
 
@@ -72,11 +72,11 @@ export function ChatFolderList(props: {
               droppableId='folder'
               renderClone={(provided, snapshot, rubric) => (
                 <FolderListItem
+                  activeFolderId={activeFolderId}
                   folder={folders[rubric.source.index]}
+                  onFolderSelect={onFolderSelect}
                   provided={provided}
                   snapshot={snapshot}
-                  onFolderSelect={onFolderSelect}
-                  selectedFolderId={selectedFolderId}
                 />
               )}
             >
@@ -91,7 +91,7 @@ export function ChatFolderList(props: {
                         event.stopPropagation(); // Prevent the ListItemButton's onClick from firing
                         onFolderSelect(null);
                       }}
-                      selected={selectedFolderId === null}
+                      selected={!activeFolderId}
                       sx={{
                         border: 0,
                         justifyContent: 'space-between',
@@ -114,11 +114,11 @@ export function ChatFolderList(props: {
                     <Draggable key={folder.id} draggableId={folder.id} index={index}>
                       {(provided, snapshot) => (
                         <FolderListItem
+                          activeFolderId={activeFolderId}
                           folder={folder}
+                          onFolderSelect={onFolderSelect}
                           provided={provided}
                           snapshot={snapshot}
-                          onFolderSelect={onFolderSelect}
-                          selectedFolderId={selectedFolderId}
                         />
                       )}
                     </Draggable>

src/apps/chat/components/folders/FolderListItem.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { DraggableProvided, DraggableStateSnapshot, DraggingStyle, NotDraggingStyle } from 'react-beautiful-dnd';
+import type { DraggableProvided, DraggableStateSnapshot, DraggingStyle, NotDraggingStyle } from 'react-beautiful-dnd';
 
 import { FormLabel, IconButton, ListItem, ListItemButton, ListItemContent, ListItemDecorator, MenuItem, Radio, radioClasses, RadioGroup, Sheet, Typography } from '@mui/joy';
 import CloseIcon from '@mui/icons-material/Close';
@@ -12,19 +12,16 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { CloseableMenu } from '~/common/components/CloseableMenu';
 import { DFolder, FOLDERS_COLOR_PALETTE, useFolderStore } from '~/common/state/store-folders';
 import { InlineTextarea } from '~/common/components/InlineTextarea';
+import { themeZIndexOverMobileDrawer } from '~/common/app.theme';
 
 
-// Define the type for your props if you're using TypeScript
-type RenderItemProps = {
+export function FolderListItem(props: {
+  activeFolderId: string | null;
   folder: DFolder;
+  onFolderSelect: (folderId: string | null) => void;
   provided: DraggableProvided;
   snapshot: DraggableStateSnapshot;
-  onFolderSelect: (folderId: string | null) => void;
-  selectedFolderId: string | null;
-  // Include any other props that RenderItem needs
-};
-
-export const FolderListItem: React.FC<RenderItemProps> = ({ folder, provided, snapshot, onFolderSelect, selectedFolderId }) => {
+}) {
 
   // internal state
   const [deleteArmed, setDeleteArmed] = useState(false);
@@ -34,6 +31,10 @@ export const FolderListItem: React.FC<RenderItemProps> = ({ folder, provided, sn
   const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLAnchorElement>(null);
 
 
+  // derived props
+  const { activeFolderId, folder, onFolderSelect, provided, snapshot } = props;
+
+
   // Menu
   const handleMenuOpen = (event: React.MouseEvent<HTMLAnchorElement>) => {
     setMenuAnchorEl(event.currentTarget);
@@ -148,7 +149,7 @@ export const FolderListItem: React.FC<RenderItemProps> = ({ folder, provided, sn
           event.stopPropagation(); // Prevent the ListItemButton's onClick from firing
           handleFolderSelect(folder.id);
         }}
-        selected={folder.id === selectedFolderId}
+        selected={folder.id === activeFolderId}
         sx={{
           border: 0,
           justifyContent: 'space-between',
@@ -199,8 +200,9 @@ export const FolderListItem: React.FC<RenderItemProps> = ({ folder, provided, sn
 
         {!!menuAnchorEl && (
           <CloseableMenu
+            dense placement='top'
             open anchorEl={menuAnchorEl} onClose={handleMenuClose}
-            placement='top' zIndex={1301 /* need to be on top of the Modal on Mobile */}
+            zIndex={themeZIndexOverMobileDrawer /* need to be on top of the Modal on Mobile */}
             sx={{ minWidth: 200 }}
           >
 
@@ -253,10 +255,10 @@ export const FolderListItem: React.FC<RenderItemProps> = ({ folder, provided, sn
                 id='folder-color'
                 sx={{
                   mb: 1.5,
-                  fontWeight: 'xl',
-                  textTransform: 'uppercase',
                   fontSize: 'xs',
+                  fontWeight: 'xl',
                   letterSpacing: '0.1em',
+                  textTransform: 'uppercase',
                 }}
               >
                 Color
@@ -316,4 +318,4 @@ export const FolderListItem: React.FC<RenderItemProps> = ({ folder, provided, sn
       </ListItemButton>
     </ListItem>
   );
-};
+}

src/apps/chat/components/folders/useFolderDropdown.tsx

@@ -1,23 +1,28 @@
 import * as React from 'react';
 
+import ClearIcon from '@mui/icons-material/Clear';
 import FolderIcon from '@mui/icons-material/Folder';
 
 import type { DConversationId } from '~/common/state/store-chats';
-import { DropdownItems, PageBarDropdown } from '~/common/layout/optima/components/PageBarDropdown';
+import { DropdownItems, PageBarDropdownMemo } from '~/common/layout/optima/components/PageBarDropdown';
 import { useFolderStore } from '~/common/state/store-folders';
 
 
-const SPECIAL_ID_REMOVE = '_REMOVE_';
+export const ClearFolderText = 'No Folder';
+const SPECIAL_ID_CLEAR_FOLDER = '_REMOVE_';
 
 
 export function useFolderDropdown(conversationId: DConversationId | null) {
 
   // external state
-  const { folders, useFolders } = useFolderStore();
+  const { folders, enableFolders } = useFolderStore();
 
 
   // Prepare items for the dropdown
-  const folderItems: DropdownItems = React.useMemo(() => {
+  const folderItems: DropdownItems | null = React.useMemo(() => {
+    if (!folders.length)
+      return null;
+
     // add one item per folder
     const items = folders.reduce((items, folder) => {
       items[folder.id] = {
@@ -28,8 +33,9 @@ export function useFolderDropdown(conversationId: DConversationId | null) {
     }, {} as DropdownItems);
 
     // add one item representing no folder
-    items[SPECIAL_ID_REMOVE] = {
-      title: 'No Folder',
+    items[SPECIAL_ID_CLEAR_FOLDER] = {
+      title: ClearFolderText,
+      icon: <ClearIcon />,
     };
 
     return items;
@@ -37,7 +43,7 @@ export function useFolderDropdown(conversationId: DConversationId | null) {
 
 
   // Handle dropdown folder change
-  const handleFolderChange = React.useCallback((_event: any, folderId: string | null) => {
+  const handleFolderChange = React.useCallback((folderId: string | null) => {
     if (conversationId && folderId) {
       // Remove conversation from all folders
       folders.forEach(folder => {
@@ -46,7 +52,8 @@ export function useFolderDropdown(conversationId: DConversationId | null) {
         }
       });
       // Add conversation to the selected folder
-      useFolderStore.getState().addConversationToFolder(folderId, conversationId);
+      if (folderId !== SPECIAL_ID_CLEAR_FOLDER)
+        useFolderStore.getState().addConversationToFolder(folderId, conversationId);
     }
   }, [conversationId, folders]);
 
@@ -57,19 +64,19 @@ export function useFolderDropdown(conversationId: DConversationId | null) {
   const folderDropdown = React.useMemo(() => {
 
     // don't show the dropdown if folders are not enabled
-    if (!useFolders)
+    if (!enableFolders || !folderItems)
       return null;
 
     return (
-      <PageBarDropdown
+      <PageBarDropdownMemo
         items={folderItems}
         value={currentFolderId}
         onChange={handleFolderChange}
-        placeholder='Select a folder'
+        placeholder='Assign to folder'
         showSymbols
       />
     );
-  }, [currentFolderId, folderItems, handleFolderChange, useFolders]);
+  }, [currentFolderId, enableFolders, folderItems, handleFolderChange]);
 
   return { folderDropdown };
 }

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

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import TimeAgo from 'react-timeago';
 import { shallow } from 'zustand/shallow';
-import { cleanupEfficiency, Diff as TextDiff, makeDiff } from '@sanity/diff-match-patch';
 
-import { Avatar, Box, Button, CircularProgress, IconButton, ListDivider, ListItem, ListItemDecorator, MenuItem, Switch, Tooltip, Typography } from '@mui/joy';
-import { SxProps } from '@mui/joy/styles/types';
+import { Avatar, Box, CircularProgress, IconButton, ListDivider, ListItem, ListItemDecorator, MenuItem, Switch, Tooltip, Typography } from '@mui/joy';
 import AccountTreeIcon from '@mui/icons-material/AccountTree';
 import ClearIcon from '@mui/icons-material/Clear';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -23,32 +20,21 @@ import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
 
 import { CloseableMenu } from '~/common/components/CloseableMenu';
 import { DMessage } from '~/common/state/store-chats';
-import { InlineError } from '~/common/components/InlineError';
 import { InlineTextarea } from '~/common/components/InlineTextarea';
 import { KeyStroke } from '~/common/components/KeyStroke';
 import { Link } from '~/common/components/Link';
 import { SystemPurposeId, SystemPurposes } from '../../../../data';
 import { copyToClipboard } from '~/common/util/clipboardUtils';
-import { cssRainbowColorKeyframes, lineHeightChatText } from '~/common/app.theme';
+import { cssRainbowColorKeyframes } from '~/common/app.theme';
 import { prettyBaseModel } from '~/common/util/modelUtils';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
+import { BlocksRenderer, editBlocksSx } from './blocks/BlocksRenderer';
 import { useChatShowTextDiff } from '../../store-app-chat';
-
-import { RenderCode } from './RenderCode';
-import { RenderHtml } from './RenderHtml';
-import { RenderImage } from './RenderImage';
-import { RenderLatex } from './RenderLatex';
-import { RenderMarkdown } from './RenderMarkdown';
-import { RenderText } from './RenderText';
-import { RenderTextDiff } from './RenderTextDiff';
-import { parseBlocks } from './blocks';
+import { useSanityTextDiffs } from './blocks/RenderTextDiff';
 
 
-// How long is the user collapsed message
-const USER_COLLAPSED_LINES: number = 8;
-
-// Enable the automatic menu on text selection
+// Enable the menu on text selection
 const ENABLE_SELECTION_RIGHT_CLICK_MENU: boolean = true;
 
 // Enable the hover button to copy the whole message. The Copy button is also available in Blocks, or in the Avatar Menu.
@@ -180,21 +166,6 @@ function explainErrorInMessage(text: string, isAssistant: boolean, modelId?: str
   return { errorMessage, isAssistantError };
 }
 
-function useSanityTextDiffs(text: string, diffText: string | undefined, enabled: boolean) {
-  const [diffs, setDiffs] = React.useState<TextDiff[] | null>(null);
-  React.useEffect(() => {
-    if (!diffText || !enabled)
-      return setDiffs(null);
-    setDiffs(
-      cleanupEfficiency(makeDiff(diffText, text, {
-        timeout: 1,
-        checkLines: true,
-      }), 4),
-    );
-  }, [text, diffText, enabled]);
-  return diffs;
-}
-
 
 export const ChatMessageMemo = React.memo(ChatMessage);
 
@@ -206,26 +177,25 @@ export const ChatMessageMemo = React.memo(ChatMessage);
  * or collapsing long user messages.
  *
  */
-export function ChatMessage(props: {
+function ChatMessage(props: {
   message: DMessage,
-  showDate?: boolean, diffPreviousText?: string,
-  hideAvatars?: boolean, codeBackground?: string,
-  noMarkdown?: boolean, diagramMode?: boolean,
-  isBottom?: boolean, noBottomBorder?: boolean,
-  isImagining?: boolean, isSpeaking?: boolean,
+  diffPreviousText?: string,
+  isBottom?: boolean,
+  isMobile?: boolean,
+  isImagining?: boolean,
+  isSpeaking?: boolean,
+  blocksShowDate?: boolean,
   onConversationBranch?: (messageId: string) => void,
-  onConversationRestartFrom?: (messageId: string, offset: number) => void,
+  onConversationRestartFrom?: (messageId: string, offset: number) => Promise<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,
 }) {
 
   // state
-  const [forceUserExpanded, setForceUserExpanded] = React.useState(false);
   const [isHovering, setIsHovering] = React.useState(false);
   const [opsMenuAnchor, setOpsMenuAnchor] = React.useState<HTMLElement | null>(null);
   const [selMenuAnchor, setSelMenuAnchor] = React.useState<HTMLElement | null>(null);
@@ -233,10 +203,11 @@ export function ChatMessage(props: {
   const [isEditing, setIsEditing] = React.useState(false);
 
   // external state
-  const { cleanerLooks, renderMarkdown, doubleClickToEdit } = useUIPreferencesStore(state => ({
+  const { cleanerLooks, doubleClickToEdit, messageTextSize, renderMarkdown } = useUIPreferencesStore(state => ({
     cleanerLooks: state.zenMode === 'cleaner',
-    renderMarkdown: state.renderMarkdown,
     doubleClickToEdit: state.doubleClickToEdit,
+    messageTextSize: state.messageTextSize,
+    renderMarkdown: state.renderMarkdown,
   }), shallow);
   const [showDiff, setShowDiff] = useChatShowTextDiff();
   const textDiffs = useSanityTextDiffs(props.message.text, props.diffPreviousText, showDiff);
@@ -257,10 +228,9 @@ export function ChatMessage(props: {
 
   const fromAssistant = messageRole === 'assistant';
   const fromSystem = messageRole === 'system';
-  const fromUser = messageRole === 'user';
   const wasEdited = !!messageUpdated;
 
-  const showAvatars = props.hideAvatars !== true && !cleanerLooks;
+  const showAvatars = !cleanerLooks;
 
   const textSel = selMenuText ? selMenuText : messageText;
   const isSpecialT2I = textSel.startsWith('https://images.prodia.xyz/') || textSel.startsWith('/draw ') || textSel.startsWith('/imagine ') || textSel.startsWith('/img ');
@@ -275,37 +245,36 @@ export function ChatMessage(props: {
       props.onMessageEdit(messageId, editedText);
   };
 
-  const handleUncollapse = () => setForceUserExpanded(true);
-
 
   // Operations Menu
 
-  const closeOperationsMenu = () => setOpsMenuAnchor(null);
+  const closeOpsMenu = () => setOpsMenuAnchor(null);
 
   const handleOpsCopy = (e: React.MouseEvent) => {
     copyToClipboard(textSel, 'Text');
     e.preventDefault();
-    closeOperationsMenu();
+    closeOpsMenu();
     closeSelectionMenu();
   };
 
-  const handleOpsEdit = (e: React.MouseEvent) => {
+  const handleOpsEdit = React.useCallback((e: React.MouseEvent) => {
     if (messageTyping && !isEditing) return; // don't allow editing while typing
     setIsEditing(!isEditing);
     e.preventDefault();
-    closeOperationsMenu();
-  };
+    closeOpsMenu();
+  }, [isEditing, messageTyping]);
 
   const handleOpsConversationBranch = (e: React.MouseEvent) => {
     e.preventDefault();
+    e.stopPropagation(); // to try to not steal the focus from the banched conversation
     props.onConversationBranch && props.onConversationBranch(messageId);
-    closeOperationsMenu();
+    closeOpsMenu();
   };
 
-  const handleOpsConversationRestartFrom = (e: React.MouseEvent) => {
+  const handleOpsConversationRestartFrom = async (e: React.MouseEvent) => {
     e.preventDefault();
-    props.onConversationRestartFrom && props.onConversationRestartFrom(messageId, fromAssistant ? -1 : 0);
-    closeOperationsMenu();
+    closeOpsMenu();
+    props.onConversationRestartFrom && await props.onConversationRestartFrom(messageId, fromAssistant ? -1 : 0);
   };
 
   const handleOpsToggleShowDiff = () => setShowDiff(!showDiff);
@@ -314,7 +283,7 @@ export function ChatMessage(props: {
     e.preventDefault();
     if (props.onTextDiagram) {
       await props.onTextDiagram(messageId, textSel);
-      closeOperationsMenu();
+      closeOpsMenu();
       closeSelectionMenu();
     }
   };
@@ -323,7 +292,7 @@ export function ChatMessage(props: {
     e.preventDefault();
     if (props.onTextImagine) {
       await props.onTextImagine(textSel);
-      closeOperationsMenu();
+      closeOpsMenu();
       closeSelectionMenu();
     }
   };
@@ -332,14 +301,14 @@ export function ChatMessage(props: {
     e.preventDefault();
     if (props.onTextSpeak) {
       await props.onTextSpeak(textSel);
-      closeOperationsMenu();
+      closeOpsMenu();
       closeSelectionMenu();
     }
   };
 
   const handleOpsTruncate = (_e: React.MouseEvent) => {
     props.onConversationTruncate && props.onConversationTruncate(messageId);
-    closeOperationsMenu();
+    closeOpsMenu();
   };
 
   const handleOpsDelete = (_e: React.MouseEvent) => {
@@ -395,6 +364,17 @@ export function ChatMessage(props: {
   }, [openSelectionMenu]);
 
 
+  // Blocks renderer
+
+  const handleBlocksContextMenu = React.useCallback((event: React.MouseEvent) => {
+    handleMouseUp(event.nativeEvent);
+  }, [handleMouseUp]);
+
+  const handleBlocksDoubleClick = React.useCallback((event: React.MouseEvent) => {
+    doubleClickToEdit && props.onMessageEdit && handleOpsEdit(event);
+  }, [doubleClickToEdit, handleOpsEdit, props.onMessageEdit]);
+
+
   // prettier upstream errors
   const { isAssistantError, errorMessage } = React.useMemo(
     () => explainErrorInMessage(messageText, fromAssistant, messageOriginLLM),
@@ -410,50 +390,19 @@ export function ChatMessage(props: {
     [messageAvatar, messageOriginLLM, messagePurposeId, messageRole, messageSender, messageTyping, showAvatars],
   );
 
-  // per-blocks css
-  const blockSx: SxProps = {
-    my: 'auto',
-    lineHeight: lineHeightChatText,
-  };
-  const typographySx: SxProps = {
-    lineHeight: lineHeightChatText,
-  };
-  const codeSx: SxProps = {
-    // backgroundColor: fromAssistant ? 'background.level1' : 'background.level1',
-    backgroundColor: props.codeBackground ? props.codeBackground : fromAssistant ? 'neutral.plainHoverBg' : 'primary.plainActiveBg',
-    boxShadow: 'xs',
-    fontFamily: 'code',
-    fontSize: '0.875rem',
-    fontVariantLigatures: 'none',
-    lineHeight: lineHeightChatText,
-    borderRadius: 'var(--joy-radius-sm)',
-  };
-
-  // user message truncation
-  let collapsedText = messageText;
-  let isCollapsed = false;
-  if (fromUser && !forceUserExpanded) {
-    const lines = messageText.split('\n');
-    if (lines.length > USER_COLLAPSED_LINES) {
-      collapsedText = lines.slice(0, USER_COLLAPSED_LINES).join('\n');
-      isCollapsed = true;
-    }
-  }
-
 
   return (
     <ListItem
       sx={{
         display: 'flex', flexDirection: !fromAssistant ? 'row-reverse' : 'row', alignItems: 'flex-start',
-        gap: { xs: 0, md: 1 }, px: { xs: 1, md: 2 }, py: 2,
+        gap: { xs: 0, md: 1 },
+        px: { xs: 1, md: 2 },
+        py: 2,
         backgroundColor,
-        ...(props.noBottomBorder !== true && {
-          borderBottom: '1px solid',
-          borderBottomColor: 'divider',
-        }),
+        borderBottom: '1px solid',
+        borderBottomColor: 'divider',
         ...(ENABLE_COPY_MESSAGE_OVERLAY && { position: 'relative' }),
         '&:hover > button': { opacity: 1 },
-        ...props.sx,
       }}
     >
 
@@ -495,76 +444,31 @@ export function ChatMessage(props: {
 
 
       {/* Edit / Blocks */}
-      {isEditing
+      {isEditing ? (
 
-        ? <InlineTextarea
+        <InlineTextarea
           initialText={messageText} onEdit={handleTextEdited}
-          sx={{
-            ...blockSx,
-            flexGrow: 1,
-          }} />
+          sx={editBlocksSx}
+        />
 
-        : <Box
-          onContextMenu={(ENABLE_SELECTION_RIGHT_CLICK_MENU && props.onMessageEdit) ? event => handleMouseUp(event.nativeEvent) : undefined}
-          onDoubleClick={event => (doubleClickToEdit && props.onMessageEdit) ? handleOpsEdit(event) : null}
-          sx={{
-            ...blockSx,
-            flexGrow: 0,
-            overflowX: 'auto',
-            ...(!!props.diagramMode && {
-              // width: '100%',
-              boxShadow: 'md',
-            }),
-          }}>
+      ) : (
 
-          {props.showDate === true && (
-            <Typography level='body-sm' sx={{ mx: 1.5, textAlign: fromAssistant ? 'left' : 'right' }}>
-              <TimeAgo date={messageUpdated || messageCreated} />
-            </Typography>
-          )}
+        <BlocksRenderer
+          text={messageText}
+          fromRole={messageRole}
+          renderTextAsMarkdown={renderMarkdown}
+          messageTextSize={messageTextSize}
+          errorMessage={errorMessage}
+          isBottom={props.isBottom}
+          isMobile={props.isMobile}
+          showDate={props.blocksShowDate === true ? messageUpdated || messageCreated || undefined : undefined}
+          renderTextDiff={textDiffs || undefined}
+          wasUserEdited={wasEdited}
+          onContextMenu={(props.onMessageEdit && ENABLE_SELECTION_RIGHT_CLICK_MENU) ? handleBlocksContextMenu : undefined}
+          onDoubleClick={(props.onMessageEdit && doubleClickToEdit) ? handleBlocksDoubleClick : undefined}
+        />
 
-          {/* Warn about user-edited system message */}
-          {fromSystem && wasEdited && (
-            <Typography level='body-sm' color='warning' sx={{ mt: 1, mx: 1.5 }}>modified by user - auto-update disabled</Typography>
-          )}
-
-          {errorMessage && (
-            <Tooltip title={<Typography sx={{ maxWidth: 800 }}>{collapsedText}</Typography>} variant='soft'>
-              <InlineError error={errorMessage} />
-            </Tooltip>
-          )}
-
-          {/* sequence of render components, for each Block */}
-          {!errorMessage && parseBlocks(collapsedText, fromSystem, textDiffs)
-            .filter((block, _, blocks) => !props.diagramMode || block.type === 'code' || blocks.length === 1)
-            .map(
-              (block, index) =>
-                block.type === 'html'
-                  ? <RenderHtml key={'html-' + index} htmlBlock={block} sx={codeSx} />
-                  : block.type === 'code'
-                    ? <RenderCode key={'code-' + index} codeBlock={block} sx={codeSx} noCopyButton={props.diagramMode} />
-                    : block.type === 'image'
-                      ? <RenderImage key={'image-' + index} imageBlock={block} isFirst={!index} allowRunAgain={props.isBottom === true} onRunAgain={handleOpsConversationRestartFrom} />
-                      : block.type === 'latex'
-                        ? <RenderLatex key={'latex-' + index} latexBlock={block} sx={typographySx} />
-                        : block.type === 'diff'
-                          ? <RenderTextDiff key={'latex-' + index} diffBlock={block} sx={typographySx} />
-                          : (renderMarkdown && props.noMarkdown !== true && !fromSystem && !(fromUser && block.content.startsWith('/')))
-                            ? <RenderMarkdown key={'text-md-' + index} textBlock={block} sx={typographySx} />
-                            : <RenderText key={'text-' + index} textBlock={block} sx={typographySx} />)}
-
-          {isCollapsed && (
-            <Button variant='plain' color='neutral' onClick={handleUncollapse}>... expand ...</Button>
-          )}
-
-          {/* import VisibilityIcon from '@mui/icons-material/Visibility'; */}
-          {/*<br />*/}
-          {/*<Chip variant='outlined' color='warning' sx={{ mt: 1, fontSize: '0.75em' }} startDecorator={<VisibilityIcon />}>*/}
-          {/*  BlockAction*/}
-          {/*</Chip>*/}
-
-        </Box>
-      }
+      )}
 
 
       {/* Overlay copy icon */}
@@ -585,9 +489,11 @@ export function ChatMessage(props: {
       {/* Operations Menu (3 dots) */}
       {!!opsMenuAnchor && (
         <CloseableMenu
-          dense placement='bottom-end' sx={{ minWidth: 280 }}
-          open anchorEl={opsMenuAnchor} onClose={closeOperationsMenu}
+          dense placement='bottom-end'
+          open anchorEl={opsMenuAnchor} onClose={closeOpsMenu}
+          sx={{ minWidth: 280 }}
         >
+          {/* Edit / Copy */}
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
             {!!props.onMessageEdit && (
               <MenuItem variant='plain' disabled={messageTyping} onClick={handleOpsEdit} sx={{ flex: 1 }}>
@@ -601,6 +507,32 @@ export function ChatMessage(props: {
               Copy
             </MenuItem>
           </Box>
+          {/* Delete / Branch / Truncate */}
+          {!!props.onMessageDelete && <ListDivider />}
+          {!!props.onMessageDelete && (
+            <MenuItem onClick={handleOpsDelete} disabled={false /*fromSystem*/}>
+              <ListItemDecorator><ClearIcon /></ListItemDecorator>
+              Delete
+              <span style={{ opacity: 0.5 }}>message</span>
+            </MenuItem>
+          )}
+          {!!props.onConversationBranch && (
+            <MenuItem onClick={handleOpsConversationBranch} disabled={fromSystem}>
+              <ListItemDecorator>
+                <ForkRightIcon />
+              </ListItemDecorator>
+              Branch
+              {!props.isBottom && <span style={{ opacity: 0.5 }}>from here</span>}
+            </MenuItem>
+          )}
+          {!!props.onConversationTruncate && (
+            <MenuItem onClick={handleOpsTruncate} disabled={props.isBottom}>
+              <ListItemDecorator><VerticalAlignBottomIcon /></ListItemDecorator>
+              Truncate
+              <span style={{ opacity: 0.5 }}>after this</span>
+            </MenuItem>
+          )}
+          {/* Diff Viewer */}
           {!!props.diffPreviousText && <ListDivider />}
           {!!props.diffPreviousText && (
             <MenuItem onClick={handleOpsToggleShowDiff}>
@@ -609,10 +541,31 @@ export function ChatMessage(props: {
               <Switch checked={showDiff} onChange={handleOpsToggleShowDiff} sx={{ ml: 'auto' }} />
             </MenuItem>
           )}
-          <ListDivider />
+          {/* Diagram / Draw / Speak */}
+          {!!props.onTextDiagram && <ListDivider />}
+          {!!props.onTextDiagram && (
+            <MenuItem onClick={handleOpsDiagram} disabled={!couldDiagram}>
+              <ListItemDecorator><AccountTreeIcon color='success' /></ListItemDecorator>
+              Diagram ...
+            </MenuItem>
+          )}
+          {!!props.onTextImagine && (
+            <MenuItem onClick={handleOpsImagine} disabled={!couldImagine || props.isImagining}>
+              <ListItemDecorator>{props.isImagining ? <CircularProgress size='sm' /> : <FormatPaintIcon color='success' />}</ListItemDecorator>
+              Draw ...
+            </MenuItem>
+          )}
+          {!!props.onTextSpeak && (
+            <MenuItem onClick={handleOpsSpeak} disabled={!couldSpeak || props.isSpeaking}>
+              <ListItemDecorator>{props.isSpeaking ? <CircularProgress size='sm' /> : <RecordVoiceOverIcon color='success' />}</ListItemDecorator>
+              Speak
+            </MenuItem>
+          )}
+          {/* Restart/try */}
+          {!!props.onConversationRestartFrom && <ListDivider />}
           {!!props.onConversationRestartFrom && (
             <MenuItem onClick={handleOpsConversationRestartFrom}>
-              <ListItemDecorator>{fromAssistant ? <ReplayIcon /> : <TelegramIcon />}</ListItemDecorator>
+              <ListItemDecorator>{fromAssistant ? <ReplayIcon color='primary' /> : <TelegramIcon color='primary' />}</ListItemDecorator>
               {!fromAssistant
                 ? <>Restart <span style={{ opacity: 0.5 }}>from here</span></>
                 : !props.isBottom
@@ -620,42 +573,7 @@ export function ChatMessage(props: {
                   : <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
                     Retry
                     <KeyStroke combo='Ctrl + Shift + R' />
-                  </Box>
-              }
-            </MenuItem>
-          )}
-          {!!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>
-            Draw ...
-          </MenuItem>}
-          {!!props.onTextSpeak && <MenuItem onClick={handleOpsSpeak} disabled={!couldSpeak || props.isSpeaking}>
-            <ListItemDecorator>{props.isSpeaking ? <CircularProgress size='sm' /> : <RecordVoiceOverIcon color='success' />}</ListItemDecorator>
-            Speak
-          </MenuItem>}
-          {!!props.onConversationRestartFrom && <ListDivider />}
-          {!!props.onConversationTruncate && (
-            <MenuItem onClick={handleOpsTruncate} disabled={props.isBottom}>
-              <ListItemDecorator><VerticalAlignBottomIcon /></ListItemDecorator>
-              Truncate <span style={{ opacity: 0.5 }}>after</span>
-            </MenuItem>
-          )}
-          {!!props.onMessageDelete && (
-            <MenuItem onClick={handleOpsDelete} disabled={false /*fromSystem*/}>
-              <ListItemDecorator><ClearIcon /></ListItemDecorator>
-              Delete <span style={{ opacity: 0.5 }}>message</span>
+                  </Box>}
             </MenuItem>
           )}
         </CloseableMenu>
@@ -664,8 +582,9 @@ export function ChatMessage(props: {
       {/* Selection (Contextual) Menu */}
       {!!selMenuAnchor && (
         <CloseableMenu
-          dense placement='bottom-start' sx={{ minWidth: 220 }}
+          dense placement='bottom-start'
           open anchorEl={selMenuAnchor} onClose={closeSelectionMenu}
+          sx={{ minWidth: 220 }}
         >
           <MenuItem onClick={handleOpsCopy} sx={{ flex: 1 }}>
             <ListItemDecorator><ContentCopyIcon /></ListItemDecorator>
@@ -673,7 +592,7 @@ export function ChatMessage(props: {
           </MenuItem>
           {!!props.onTextDiagram && <MenuItem onClick={handleOpsDiagram} disabled={!couldDiagram || props.isImagining}>
             <ListItemDecorator><AccountTreeIcon color='success' /></ListItemDecorator>
-            Visualize ...
+            Diagram ...
           </MenuItem>}
           {!!props.onTextImagine && <MenuItem onClick={handleOpsImagine} disabled={!couldImagine || props.isImagining}>
             <ListItemDecorator>{props.isImagining ? <CircularProgress size='sm' /> : <FormatPaintIcon color='success' />}</ListItemDecorator>

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

@@ -1,48 +0,0 @@
-import * as React from 'react';
-
-import type { SxProps } from '@mui/joy/styles/types';
-import { Box, useTheme } from '@mui/joy';
-
-import type { TextBlock } from './blocks';
-
-
-// Dynamically import ReactMarkdown using React.lazy
-const ReactMarkdown = React.lazy(async () => {
-  const [markdownModule, remarkGfmModule] = await Promise.all([
-    import('react-markdown'),
-    import('remark-gfm'),
-  ]);
-
-  // Pass the dynamically imported remarkGfm as children
-  const ReactMarkdownWithRemarkGfm = (props: any) => (
-    <markdownModule.default remarkPlugins={[remarkGfmModule.default]} {...props} />
-  );
-
-  return { default: ReactMarkdownWithRemarkGfm };
-});
-
-
-export const RenderMarkdown = (props: { textBlock: TextBlock, sx?: SxProps }) => {
-  const theme = useTheme();
-  return (
-    <Box
-      className={`markdown-body ${theme.palette.mode === 'dark' ? 'markdown-body-dark' : 'markdown-body-light'}`}
-      sx={{
-        mx: '0.75rem !important',                             // margin: 1.5 like other blocks
-        '& table': {
-          width: 'inherit !important',                        // un-break auto-width (tables have 'max-content', which overflows)
-        },
-        '--color-canvas-default': 'transparent !important',   // remove the default background color
-        // NOTE: the following are not needed because the CSS is under our control, and we
-        //       disabled the redefintions there
-        // fontFamily: `inherit !important`,                  // use the default font family
-        ...(props.sx || {}),
-      }}>
-
-      {/* Using React.Suspense / React.Lazy loading this */}
-      <React.Suspense fallback={<div>Loading...</div>}>
-        <ReactMarkdown>{props.textBlock.content}</ReactMarkdown>
-      </React.Suspense>
-    </Box>
-  );
-};

src/apps/chat/components/message/blocks/BlocksRenderer.tsx

@@ -0,0 +1,203 @@
+import * as React from 'react';
+import TimeAgo from 'react-timeago';
+import type { Diff as TextDiff } from '@sanity/diff-match-patch';
+
+import type { SxProps } from '@mui/joy/styles/types';
+import { Box, Button, Tooltip, Typography } from '@mui/joy';
+
+import type { DMessage } from '~/common/state/store-chats';
+import type { UIMessageTextSize } from '~/common/state/store-ui';
+import { InlineError } from '~/common/components/InlineError';
+import { lineHeightChatCode, lineHeightChatText } from '~/common/app.theme';
+
+import { RenderCodeMemo } from './code/RenderCode';
+import { RenderHtml } from './RenderHtml';
+import { RenderImage } from './RenderImage';
+import { RenderLatex } from './RenderLatex';
+import { RenderMarkdownMemo } from './RenderMarkdown';
+import { RenderText } from './RenderText';
+import { RenderTextDiff } from './RenderTextDiff';
+import { areBlocksEqual, Block, parseMessageBlocks } from './blocks';
+
+
+// How long is the user collapsed message
+const USER_COLLAPSED_LINES: number = 8;
+
+
+const blocksSx: SxProps = {
+  my: 'auto',
+  lineHeight: lineHeightChatText,
+} as const;
+
+export const editBlocksSx: SxProps = {
+  ...blocksSx,
+  flexGrow: 1,
+} as const;
+
+const renderBlocksSx: SxProps = {
+  ...blocksSx,
+  flexGrow: 0,
+  overflowX: 'auto',
+} as const;
+
+
+export function BlocksRenderer(props: {
+
+  // required
+  text: string;
+  fromRole: DMessage['role'];
+  messageTextSize?: UIMessageTextSize;
+  renderTextAsMarkdown: boolean;
+  renderTextDiff?: TextDiff[];
+
+  errorMessage?: React.ReactNode;
+  isBottom?: boolean;
+  isMobile?: boolean;
+  showDate?: number;
+  wasUserEdited?: boolean;
+
+  specialDiagramMode?: boolean;
+
+  onContextMenu?: (event: React.MouseEvent) => void;
+  onDoubleClick?: (event: React.MouseEvent) => void;
+  onImageRegenerate?: () => void;
+
+}) {
+
+  // state
+  const [forceUserExpanded, setForceUserExpanded] = React.useState(false);
+  const prevBlocksRef = React.useRef<Block[]>([]);
+
+  // derived state
+  const { text: _text, errorMessage, renderTextDiff, wasUserEdited = false } = props;
+  const fromAssistant = props.fromRole === 'assistant';
+  const fromSystem = props.fromRole === 'system';
+  const fromUser = props.fromRole === 'user';
+
+
+  const handleTextUncollapse = React.useCallback(() => {
+    setForceUserExpanded(true);
+  }, []);
+
+
+  // Memo text, which could be 'collapsed' to a few lines in case of user messages
+
+  const { text, isTextCollapsed } = React.useMemo(() => {
+    if (fromUser && !forceUserExpanded) {
+      const textLines = _text.split('\n');
+      if (textLines.length > USER_COLLAPSED_LINES)
+        return { text: textLines.slice(0, USER_COLLAPSED_LINES).join('\n'), isTextCollapsed: true };
+    }
+    return { text: _text, isTextCollapsed: false };
+  }, [forceUserExpanded, fromUser, _text]);
+
+  // Memo the code style, to minimize re-renders
+
+  const scaledCodeSx: SxProps = React.useMemo(() => (
+    {
+      backgroundColor: props.specialDiagramMode ? 'background.surface' : fromAssistant ? 'neutral.plainHoverBg' : 'primary.plainActiveBg',
+      boxShadow: props.specialDiagramMode ? 'md' : 'xs',
+      fontFamily: 'code',
+      fontSize: props.messageTextSize === 'xs' ? '0.75rem' : props.messageTextSize === 'sm' ? '0.75rem' : '0.875rem',
+      fontVariantLigatures: 'none',
+      lineHeight: lineHeightChatCode,
+      borderRadius: 'var(--joy-radius-sm)',
+    }
+  ), [fromAssistant, props.messageTextSize, props.specialDiagramMode]);
+
+  const scaledTypographySx: SxProps = React.useMemo(() => (
+    {
+      lineHeight: lineHeightChatText,
+      fontSize: (!props.messageTextSize || props.messageTextSize === 'md') ? undefined : props.messageTextSize,
+    }
+  ), [props.messageTextSize]);
+
+
+  // Block splitter, with memoand special recycle of former blocks, to help React minimize render work
+
+  const blocks = React.useMemo(() => {
+    // split the complete input text into blocks
+    const newBlocks = errorMessage ? [] : parseMessageBlocks(text, fromSystem, renderTextDiff);
+
+    // recycle the previous blocks if they are the same, for stable references to React
+    const recycledBlocks: Block[] = [];
+    for (let i = 0; i < newBlocks.length; i++) {
+      const newBlock = newBlocks[i];
+      const prevBlock = prevBlocksRef.current[i];
+
+      // Check if the new block can be replaced by the previous block to maintain reference stability
+      if (prevBlock && areBlocksEqual(prevBlock, newBlock)) {
+        recycledBlocks.push(prevBlock);
+      } else {
+        // Once a block doesn't match, we use the new blocks from this point forward.
+        recycledBlocks.push(...newBlocks.slice(i));
+        break;
+      }
+    }
+
+    // Update prevBlocksRef with the current blocks for the next render
+    prevBlocksRef.current = recycledBlocks;
+
+    // Apply specialDiagramMode filter if applicable
+    return props.specialDiagramMode
+      ? recycledBlocks.filter(block => block.type === 'code' || recycledBlocks.length === 1)
+      : recycledBlocks;
+  }, [errorMessage, fromSystem, props.specialDiagramMode, renderTextDiff, text]);
+
+
+  return (
+    <Box
+      onContextMenu={props.onContextMenu}
+      onDoubleClick={props.onDoubleClick}
+      sx={renderBlocksSx}
+    >
+
+      {!!props.showDate && (
+        <Typography level='body-sm' sx={{ mx: 1.5, textAlign: fromAssistant ? 'left' : 'right' }}>
+          <TimeAgo date={props.showDate} />
+        </Typography>
+      )}
+
+      {/* Warn about user-edited system message */}
+      {fromSystem && wasUserEdited && (
+        <Typography level='body-sm' color='warning' sx={{ mt: 1, mx: 1.5 }}>modified by user - auto-update disabled</Typography>
+      )}
+
+      {errorMessage ? (
+
+        <Tooltip title={<Typography sx={{ maxWidth: 800 }}>{text}</Typography>} variant='soft'>
+          <InlineError error={errorMessage} />
+        </Tooltip>
+
+      ) : (
+
+        // sequence of render components, for each Block
+        blocks.map(
+          (block, index) =>
+            block.type === 'html'
+              ? <RenderHtml key={'html-' + index} htmlBlock={block} sx={scaledCodeSx} />
+              : block.type === 'code'
+                ? <RenderCodeMemo key={'code-' + index} codeBlock={block} isMobile={props.isMobile} noCopyButton={props.specialDiagramMode} sx={scaledCodeSx} />
+                : block.type === 'image'
+                  ? <RenderImage key={'image-' + index} imageBlock={block} isFirst={!index} allowRunAgain={props.isBottom === true} onRunAgain={props.onImageRegenerate} />
+                  : block.type === 'latex'
+                    ? <RenderLatex key={'latex-' + index} latexBlock={block} sx={scaledTypographySx} />
+                    : block.type === 'diff'
+                      ? <RenderTextDiff key={'latex-' + index} diffBlock={block} sx={scaledTypographySx} />
+                      : (props.renderTextAsMarkdown && !fromSystem && !(fromUser && block.content.startsWith('/')))
+                        ? <RenderMarkdownMemo key={'text-md-' + index} textBlock={block} sx={scaledTypographySx} />
+                        : <RenderText key={'text-' + index} textBlock={block} sx={scaledTypographySx} />)
+
+      )}
+
+      {isTextCollapsed && <Button variant='plain' color='neutral' onClick={handleTextUncollapse}>... expand ...</Button>}
+
+      {/* import VisibilityIcon from '@mui/icons-material/Visibility'; */}
+      {/*<br />*/}
+      {/*<Chip variant='outlined' color='warning' sx={{ mt: 1, fontSize: '0.75em' }} startDecorator={<VisibilityIcon />}>*/}
+      {/*  BlockAction*/}
+      {/*</Chip>*/}
+
+    </Box>
+  );
+}

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
 
+import type { SxProps } from '@mui/joy/styles/types';
 import { Box, Button, IconButton, Tooltip, Typography } from '@mui/joy';
-import { SxProps } from '@mui/joy/styles/types';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import WebIcon from '@mui/icons-material/Web';
 
 import { copyToClipboard } from '~/common/util/clipboardUtils';
 
-import { HtmlBlock } from './blocks';
-import { overlayButtonsSx } from './RenderCode';
+import type { HtmlBlock } from './blocks';
+import { overlayButtonsSx } from './code/RenderCode';
 
 
 // this is used by the blocks parser (for full text detection) and by the Code component (for inline rendering)

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

@@ -6,8 +6,8 @@ import ReplayIcon from '@mui/icons-material/Replay';
 
 import { Link } from '~/common/components/Link';
 
-import { ImageBlock } from './blocks';
-import { overlayButtonsSx } from './RenderCode';
+import type { ImageBlock } from './blocks';
+import { overlayButtonsSx } from './code/RenderCode';
 
 
 const mdImageReferenceRegex = /^!\[([^\]]*)]\(([^)]+)\)$/;

src/apps/chat/components/message/blocks/RenderLatex.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Box } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 
-import { LatexBlock } from './blocks';
+import type { LatexBlock } from './blocks';
 
 
 // Dynamically import the Katex functions
@@ -14,13 +14,15 @@ const RenderLatexDynamic = React.lazy(async () => {
   };
 });
 
-export const RenderLatex = ({ latexBlock, sx }: { latexBlock: LatexBlock; sx?: SxProps; }) =>
+export const RenderLatex = (props: { latexBlock: LatexBlock; sx?: SxProps; }) =>
   <Box
     sx={{
       mx: 1.5,
-      ...(sx || {}),
+      my: '0.5em',
+      textAlign: 'center',
+      ...props.sx,
     }}>
-    <React.Suspense fallback={<div/>}>
-      <RenderLatexDynamic latex={latexBlock.latex} />
+    <React.Suspense fallback={<div />}>
+      <RenderLatexDynamic latex={props.latexBlock.latex} />
     </React.Suspense>
   </Box>;

src/apps/chat/components/message/blocks/RenderMarkdown.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { CSVLink } from 'react-csv';
+
+import type { SxProps } from '@mui/joy/styles/types';
+import { Box, Button, styled } from '@mui/joy';
+import DownloadIcon from '@mui/icons-material/Download';
+
+import { lineHeightChatText } from '~/common/app.theme';
+
+import type { TextBlock } from './blocks';
+
+
+/*
+ * For performance reasons, we style this component here and copy the equivalent of 'props.sx' (the lineHeight) locally.
+ */
+const RenderMarkdownBox = styled(Box)({
+  // same look as the other RenderComponents
+  marginInline: '0.75rem !important',                             // margin: 1.5 like other blocks
+  lineHeight: lineHeightChatText,
+
+  // patch the CSS
+  // fontFamily: `inherit !important`,                    // (not needed anymore, as CSS is under our control) use the default font family
+  // '--color-canvas-default': 'transparent !important',  // (not needed anymore) remove the default background color
+  '& table': { width: 'inherit !important' },           // un-break auto-width (tables have 'max-content', which overflows)
+});
+
+
+// Dynamically import ReactMarkdown using React.lazy
+const DynamicReactGFM = React.lazy(async () => {
+  const [markdownModule, remarkGfmModule] = await Promise.all([
+    import('react-markdown'),
+    import('remark-gfm'),
+  ]);
+
+  // NOTE: extracted here instead of inline as a large performance optimization
+  const remarkPlugins = [remarkGfmModule.default];
+
+  //Extracts table data from jsx element in table renderer
+  const extractTableData = (children: React.JSX.Element) => {
+    // Function to extract text from a React element or component
+    const extractText = (element: any): String => {
+      // Base case: if the element is a string, return it
+      if (typeof element === 'string') {
+        return element;
+      }
+      // If the element has children, recursively extract text from them
+      if (element.props && element.props.children) {
+        if (Array.isArray(element.props.children)) {
+          return element.props.children.map(extractText).join('');
+        }
+        return extractText(element.props.children);
+      }
+      return '';
+    };
+
+    // Function to traverse and extract data from table rows and cells
+    const traverseAndExtract = (elements: any, tableData: any[] = []) => {
+      React.Children.forEach(elements, (element) => {
+        if (element.type === 'tr') {
+          const rowData = React.Children.map(element.props.children, (cell) => {
+            // Extract and return the text content of each cell
+            return extractText(cell);
+          });
+          tableData.push(rowData);
+        } else if (element.props && element.props.children) {
+          traverseAndExtract(element.props.children, tableData);
+        }
+      });
+      return tableData;
+    };
+
+    return traverseAndExtract(children);
+  };
+
+  interface TableRendererProps {
+    children: React.JSX.Element;
+    node?: any; // an optional field we want to not pass to the <table/> element
+  }
+
+  // Define a custom table renderer
+  const TableRenderer = ({ children, node, ...props }: TableRendererProps) => {
+    // Apply custom styles or modifications here
+    const tableData = extractTableData(children);
+
+    return (
+      <>
+        <table style={{ borderCollapse: 'collapse', width: '100%', marginBottom: '0.5rem' }} {...props}>
+          {children}
+        </table>
+        <CSVLink filename='big-agi-export' data={tableData}>
+          <Button variant='outlined' color='neutral' size='md' endDecorator={<DownloadIcon />} sx={{
+            mb: '1rem',
+            backgroundColor: 'background.popup', // make this button 'pop' a bit from the page
+          }}>
+            Download table as .csv
+          </Button>
+        </CSVLink>
+      </>
+    );
+  };
+
+  // Use the custom renderer for tables
+  const components = {
+    table: TableRenderer,
+    // Add custom renderers for other elements if needed
+  };
+
+  // Pass the dynamically imported remarkGfm as children
+  const ReactMarkdownWithRemarkGfm = (props: any) =>
+    <markdownModule.default
+      remarkPlugins={remarkPlugins}
+      {...props}
+      components={components}
+    />;
+
+  return { default: ReactMarkdownWithRemarkGfm };
+});
+
+function RenderMarkdown(props: { textBlock: TextBlock; sx?: SxProps; }) {
+  return (
+    <RenderMarkdownBox
+      className='markdown-body' /* NODE: see GithubMarkdown.css for the dark/light switch, synced with Joy's */
+      sx={props.sx}
+    >
+      <React.Suspense fallback={<div>Loading...</div>}>
+        <DynamicReactGFM>
+          {props.textBlock.content}
+        </DynamicReactGFM>
+      </React.Suspense>
+    </RenderMarkdownBox>
+  );
+}
+
+export const RenderMarkdownMemo = React.memo(RenderMarkdown);

src/apps/chat/components/message/blocks/RenderText.tsx

@@ -3,13 +3,15 @@ import * as React from 'react';
 import { Chip, Typography } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 
-import { extractChatCommand } from '../../commands/commands.registry';
+import { extractChatCommand } from '../../../commands/commands.registry';
 
 import type { TextBlock } from './blocks';
 
 
 export const RenderText = (props: { textBlock: TextBlock; sx?: SxProps; }) => {
+
   const elements = extractChatCommand(props.textBlock.content);
+
   return (
     <Typography
       sx={{
@@ -18,7 +20,7 @@ export const RenderText = (props: { textBlock: TextBlock; sx?: SxProps; }) => {
         alignItems: 'baseline',
         overflowWrap: 'anywhere',
         whiteSpace: 'break-spaces',
-        ...(props.sx || {}),
+        ...props.sx,
       }}
     >
       {elements.map((element, index) =>

src/apps/chat/components/message/blocks/RenderTextDiff.tsx

@@ -1,19 +1,49 @@
 import * as React from 'react';
-import { Diff as TextDiff, DIFF_DELETE, DIFF_INSERT } from '@sanity/diff-match-patch';
+import { cleanupEfficiency, Diff as TextDiff, DIFF_DELETE, DIFF_INSERT, makeDiff } from '@sanity/diff-match-patch';
 
+import type { SxProps } from '@mui/joy/styles/types';
 import { Box, Typography, useTheme } from '@mui/joy';
-import { SxProps } from '@mui/joy/styles/types';
 
-import { DiffBlock } from './blocks';
+import type { DiffBlock } from './blocks';
 
 
-export const RenderTextDiff = ({ diffBlock, sx }: { diffBlock: DiffBlock; sx?: SxProps; }) => {
+export function useSanityTextDiffs(_text: string, _diffText: string | undefined, enabled: boolean) {
+  // state
+  const [diffs, setDiffs] = React.useState<TextDiff[] | null>(null);
+
+  const inputText = enabled ? _text : null;
+  const inputPrevText = enabled ? _diffText : null;
+
+  // async processing of diffs
+  React.useEffect(() => {
+    if (!inputText || !inputPrevText)
+      return setDiffs(null);
+
+    const callback = () => {
+      setDiffs(
+        cleanupEfficiency(makeDiff(inputPrevText, inputText, {
+          timeout: 1,
+          checkLines: true,
+        }), 4),
+      );
+    };
+
+    // slight delay to cancel the previous operation if too close to this
+    const timeout = setTimeout(callback, 200);
+    return () => clearTimeout(timeout);
+  }, [inputPrevText, inputText]);
+
+  return diffs;
+}
+
+
+export const RenderTextDiff = (props: { diffBlock: DiffBlock; sx?: SxProps; }) => {
 
   // external state
   const theme = useTheme();
 
   // derived state
-  const textDiffs: TextDiff[] = diffBlock.textDiffs;
+  const textDiffs: TextDiff[] = props.diffBlock.textDiffs;
 
   // text added
   const styleAdd = {
@@ -44,7 +74,7 @@ export const RenderTextDiff = ({ diffBlock, sx }: { diffBlock: DiffBlock; sx?: S
         whiteSpace: 'break-spaces',
         display: 'block',
         zIndex: 200,
-        ...(sx || {}),
+        ...props.sx,
       }}
     >
       {textDiffs.map(([op, text], index) =>

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

@@ -1,9 +1,10 @@
 import type { Diff as TextDiff } from '@sanity/diff-match-patch';
 
 import { heuristicIsHtml } from './RenderHtml';
-import { heuristicMarkdownImageReferenceBlocks, heuristicLegacyImageBlocks } from './RenderImage';
+import { heuristicLegacyImageBlocks, heuristicMarkdownImageReferenceBlocks } from './RenderImage';
 
-type Block = CodeBlock | DiffBlock | HtmlBlock | ImageBlock | LatexBlock | TextBlock;
+// Block types
+export 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; };
@@ -12,11 +13,33 @@ export type LatexBlock = { type: 'latex'; latex: string; };
 export type TextBlock = { type: 'text'; content: string; }; // for Text or Markdown
 
 
-export function parseBlocks(text: string, forceText: boolean, textDiffs: TextDiff[] | null): Block[] {
-  if (forceText)
+export function areBlocksEqual(a: Block, b: Block): boolean {
+  if (a.type !== b.type)
+    return false;
+
+  switch (a.type) {
+    case 'code':
+      return a.blockTitle === (b as CodeBlock).blockTitle && a.blockCode === (b as CodeBlock).blockCode && a.complete === (b as CodeBlock).complete;
+    case 'diff':
+      return false; // diff blocks are never equal
+    case 'html':
+      return a.html === (b as HtmlBlock).html;
+    case 'image':
+      return a.url === (b as ImageBlock).url && a.alt === (b as ImageBlock).alt;
+    case 'latex':
+      return a.latex === (b as LatexBlock).latex;
+    case 'text':
+      return a.content === (b as TextBlock).content;
+  }
+}
+
+
+export function parseMessageBlocks(text: string, disableParsing: boolean, forceTextDiffs?: TextDiff[]): Block[] {
+  if (disableParsing)
     return [{ type: 'text', content: text }];
-  if (textDiffs && textDiffs.length > 0)
-    return [{ type: 'diff', textDiffs }];
+
+  if (forceTextDiffs && forceTextDiffs.length >= 1)
+    return [{ type: 'diff', textDiffs: forceTextDiffs }];
 
   // special case: this could be generated by a proxy that returns an HTML page instead of the API response
   if (heuristicIsHtml(text))
@@ -33,8 +56,8 @@ export function parseBlocks(text: string, forceText: boolean, textDiffs: TextDif
     return legacyImageBlocks;
 
   const regexPatterns = {
-    codeBlock: /`{3,}([\w\\.+-_]+)?\n([\s\S]*?)(`{3,}\n?|$)/g,
-    latexBlock: /\$\$([\s\S]*?)\$\$/g,
+    codeBlock: /`{3,}([\w\x20\\.+-_]+)?\n([\s\S]*?)(`{3,}\n?|$)/g,
+    latexBlock: /\$\$([\s\S]*?)\$\$\n?/g,
     // latexBlockOrInline: /\$\$([\s\S]*?)\$\$|\$([^$]*?)\$/g,
   };
 

src/apps/chat/components/message/blocks/code/ButtonCodepen.tsx

@@ -9,7 +9,7 @@ interface CodeBlockProps {
   };
 }
 
-export function OpenInCodepen({ codeBlock }: CodeBlockProps): React.JSX.Element {
+export function ButtonCodepen({ codeBlock }: CodeBlockProps): React.JSX.Element {
   const { code, language } = codeBlock;
   const hasCSS = language === 'css';
   const hasJS = ['javascript', 'json', 'typescript'].includes(language || '');

src/apps/chat/components/message/blocks/code/ButtonReplit.tsx

@@ -9,7 +9,7 @@ interface CodeBlockProps {
   };
 }
 
-export function OpenInReplit({ codeBlock }: CodeBlockProps): React.JSX.Element {
+export function ButtonReplit({ codeBlock }: CodeBlockProps): React.JSX.Element {
   const { language } = codeBlock;
 
   const replitLanguageMap: Record<string, string> = {

src/apps/chat/components/message/blocks/code/RenderCode.tsx

@@ -1,36 +1,73 @@
 import * as React from 'react';
 import { useQuery } from '@tanstack/react-query';
 
+import type { SxProps } from '@mui/joy/styles/types';
 import { Box, IconButton, Sheet, Tooltip, Typography } from '@mui/joy';
-import { SxProps } from '@mui/joy/styles/types';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import FitScreenIcon from '@mui/icons-material/FitScreen';
 import HtmlIcon from '@mui/icons-material/Html';
 import SchemaIcon from '@mui/icons-material/Schema';
 import ShapeLineOutlinedIcon from '@mui/icons-material/ShapeLineOutlined';
 
 import { copyToClipboard } from '~/common/util/clipboardUtils';
 
-import { CodeBlock } from './blocks';
-import { OpenInCodepen } from './OpenInCodepen';
-import { OpenInReplit } from './OpenInReplit';
-import { RenderCodeMermaid } from './RenderCodeMermaid';
-import { heuristicIsHtml, IFrameComponent } from './RenderHtml';
+import type { CodeBlock } from '../blocks';
+import { ButtonCodepen } from './ButtonCodepen';
+import { ButtonReplit } from './ButtonReplit';
+import { heuristicIsHtml, IFrameComponent } from '../RenderHtml';
+import { patchSvgString, RenderCodeMermaid } from './RenderCodeMermaid';
+
+
+async function fetchPlantUmlSvg(plantUmlCode: string): Promise<string | null> {
+  // fetch the PlantUML SVG
+  let text: string = '';
+  try {
+    // Dynamically import the PlantUML encoder - it's a large library that slows down app loading
+    const { encode: plantUmlEncode } = await import('plantuml-encoder');
+
+    // retrieve and manually adapt the SVG, to remove the background
+    const encodedPlantUML: string = plantUmlEncode(plantUmlCode);
+    const response = await fetch(`https://www.plantuml.com/plantuml/svg/${encodedPlantUML}`);
+    text = await response.text();
+  } catch (e) {
+    return null;
+  }
+  // validate/extract the SVG
+  const start = text.indexOf('<svg ');
+  const end = text.indexOf('</svg>');
+  if (start < 0 || end <= start)
+    throw new Error('Could not render PlantUML');
+  const svg = text
+    .slice(start, end + 6) // <svg ... </svg>
+    .replace('background:#FFFFFF;', ''); // transparent background
+
+  // check for syntax errors
+  if (svg.includes('>Syntax Error?</text>'))
+    throw new Error('syntax issue (it happens!). Please regenerate or change generator model.');
+
+  return svg;
+}
 
 
 export const overlayButtonsSx: SxProps = {
   position: 'absolute', top: 0, right: 0, zIndex: 10,
   display: 'flex', flexDirection: 'row', gap: 1,
   opacity: 0, transition: 'opacity 0.2s',
-  '& > button': { backdropFilter: 'blur(12px)' },
+  // '& > button': {
+  // backgroundColor: 'background.level2',
+  // backdropFilter: 'blur(12px)',
+  // },
 };
 
 function RenderCodeImpl(props: {
   codeBlock: CodeBlock, noCopyButton?: boolean, sx?: SxProps,
   highlightCode: (inferredCodeLanguage: string | null, blockCode: string) => string,
   inferCodeLanguage: (blockTitle: string, code: string) => string | null,
+  isMobile?: boolean,
 }) {
 
   // state
+  const [fitScreen, setFitScreen] = React.useState(!!props.isMobile);
   const [showHTML, setShowHTML] = React.useState(false);
   const [showMermaid, setShowMermaid] = React.useState(true);
   const [showPlantUML, setShowPlantUML] = React.useState(true);
@@ -43,12 +80,11 @@ function RenderCodeImpl(props: {
   } = props;
 
   // heuristic for language, and syntax highlight
-  const { highlightedCode, inferredCodeLanguage } = React.useMemo(
-    () => {
-      const inferredCodeLanguage = inferCodeLanguage(blockTitle, blockCode);
-      const highlightedCode = highlightCode(inferredCodeLanguage, blockCode);
-      return { highlightedCode, inferredCodeLanguage };
-    }, [inferCodeLanguage, blockTitle, blockCode, highlightCode]);
+  const { highlightedCode, inferredCodeLanguage } = React.useMemo(() => {
+    const inferredCodeLanguage = inferCodeLanguage(blockTitle, blockCode);
+    const highlightedCode = highlightCode(inferredCodeLanguage, blockCode);
+    return { highlightedCode, inferredCodeLanguage };
+  }, [inferCodeLanguage, blockTitle, blockCode, highlightCode]);
 
 
   // heuristics for specialized rendering
@@ -70,41 +106,14 @@ function RenderCodeImpl(props: {
   const { data: plantUmlHtmlData, error: plantUmlError } = useQuery({
     enabled: renderPlantUML,
     queryKey: ['plantuml', blockCode],
-    queryFn: async () => {
-      // fetch the PlantUML SVG
-      let text: string = '';
-      try {
-        // Dynamically import the PlantUML encoder - it's a large library that slows down app loading
-        const { encode: plantUmlEncode } = await import('plantuml-encoder');
-
-        // retrieve and manually adapt the SVG, to remove the background
-        const encodedPlantUML: string = plantUmlEncode(blockCode);
-        const response = await fetch(`https://www.plantuml.com/plantuml/svg/${encodedPlantUML}`);
-        text = await response.text();
-      } catch (e) {
-        return null;
-      }
-      // validate/extract the SVG
-      const start = text.indexOf('<svg ');
-      const end = text.indexOf('</svg>');
-      if (start < 0 || end <= start)
-        throw new Error('Could not render PlantUML');
-      const svg = text
-        .slice(start, end + 6) // <svg ... </svg>
-        .replace('background:#FFFFFF;', ''); // transparent background
-
-      // check for syntax errors
-      if (svg.includes('>Syntax Error?</text>'))
-        throw new Error('syntax issue (it happens!). Please regenerate or change generator model.');
-
-      return svg;
-    },
+    queryFn: () => fetchPlantUmlSvg(blockCode),
     staleTime: 24 * 60 * 60 * 1000, // 1 day
   });
   renderPlantUML = renderPlantUML && (!!plantUmlHtmlData || !!plantUmlError);
 
   const isSVG = blockCode.startsWith('<svg') && blockCode.endsWith('</svg>');
   const renderSVG = isSVG && showSVG;
+  const canScaleSVG = renderSVG && blockCode.includes('viewBox="');
 
 
   const languagesCodepen = ['html', 'css', 'javascript', 'json', 'typescript'];
@@ -119,7 +128,11 @@ function RenderCodeImpl(props: {
   };
 
   return (
-    <Box sx={{ position: 'relative' /* for overlay buttons to stick properly */ }}>
+    <Box sx={{
+      position: 'relative', /* for overlay buttons to stick properly */
+    }}>
+
+      {/* Code render */}
       <Box
         component='code'
         className={`language-${inferredCodeLanguage || 'unknown'}`}
@@ -128,6 +141,7 @@ function RenderCodeImpl(props: {
           mx: 0, p: 1.5, // this block gets a thicker border
           display: 'block',
           overflowX: 'auto',
+          minWidth: 160,
           '&:hover > .overlay-buttons': { opacity: 1 },
           ...(props.sx || {}),
         }}>
@@ -146,14 +160,14 @@ function RenderCodeImpl(props: {
         {renderHTML
           ? <IFrameComponent htmlString={blockCode} />
           : renderMermaid
-            ? <RenderCodeMermaid mermaidCode={blockCode} />
+            ? <RenderCodeMermaid mermaidCode={blockCode} fitScreen={fitScreen} />
             : <Box component='div'
                    dangerouslySetInnerHTML={{
                      __html:
                        renderSVG
-                         ? blockCode
+                         ? (patchSvgString(fitScreen, blockCode) || 'No SVG code')
                          : renderPlantUML
-                           ? (plantUmlHtmlData || (plantUmlError as string) || 'No PlantUML rendering.')
+                           ? (patchSvgString(fitScreen, plantUmlHtmlData) || (plantUmlError as string) || 'No PlantUML rendering.')
                            : highlightedCode,
                    }}
                    sx={{
@@ -162,43 +176,52 @@ function RenderCodeImpl(props: {
                    }}
             />}
 
-        {/* Code Buttons */}
+        {/* Buttons */}
         <Box className='overlay-buttons' sx={{ ...overlayButtonsSx, p: 0.5 }}>
           {isHTML && (
-            <Tooltip title={renderHTML ? 'Hide' : 'Show Web Page'} variant='solid'>
-              <IconButton variant={renderHTML ? 'solid' : 'outlined'} color='danger' onClick={() => setShowHTML(!showHTML)}>
+            <Tooltip title={renderHTML ? 'Hide' : 'Show Web Page'}>
+              <IconButton variant={renderHTML ? 'solid' : 'soft'} color='danger' onClick={() => setShowHTML(!showHTML)}>
                 <HtmlIcon />
               </IconButton>
             </Tooltip>
           )}
           {isMermaid && (
-            <Tooltip title={renderMermaid ? 'Show Code' : 'Render Mermaid'} variant='solid'>
-              <IconButton variant={renderMermaid ? 'solid' : 'outlined'} onClick={() => setShowMermaid(!showMermaid)}>
+            <Tooltip title={renderMermaid ? 'Show Code' : 'Render Mermaid'}>
+              <IconButton variant={renderMermaid ? 'solid' : 'soft'} onClick={() => setShowMermaid(!showMermaid)}>
                 <SchemaIcon />
               </IconButton>
             </Tooltip>
           )}
           {isPlantUML && (
-            <Tooltip title={renderPlantUML ? 'Show Code' : 'Render PlantUML'} variant='solid'>
-              <IconButton variant={renderPlantUML ? 'solid' : 'outlined'} onClick={() => setShowPlantUML(!showPlantUML)}>
+            <Tooltip title={renderPlantUML ? 'Show Code' : 'Render PlantUML'}>
+              <IconButton variant={renderPlantUML ? 'solid' : 'soft'} onClick={() => setShowPlantUML(!showPlantUML)}>
                 <SchemaIcon />
               </IconButton>
             </Tooltip>
           )}
           {isSVG && (
-            <Tooltip title={renderSVG ? 'Show Code' : 'Render SVG'} variant='solid'>
-              <IconButton variant={renderSVG ? 'solid' : 'outlined'} onClick={() => setShowSVG(!showSVG)}>
+            <Tooltip title={renderSVG ? 'Show Code' : 'Render SVG'}>
+              <IconButton variant={renderSVG ? 'solid' : 'soft'} onClick={() => setShowSVG(!showSVG)}>
                 <ShapeLineOutlinedIcon />
               </IconButton>
             </Tooltip>
           )}
-          {canCodepen && <OpenInCodepen codeBlock={{ code: blockCode, language: inferredCodeLanguage || undefined }} />}
-          {canReplit && <OpenInReplit codeBlock={{ code: blockCode, language: inferredCodeLanguage || undefined }} />}
-          {props.noCopyButton !== true && <Tooltip title='Copy Code' variant='solid'>
-            <IconButton variant='outlined' onClick={handleCopyToClipboard}>
-              <ContentCopyIcon />
-            </IconButton>
-          </Tooltip>}
+          {((isMermaid && showMermaid) || (isPlantUML && showPlantUML) || (isSVG && showSVG && canScaleSVG)) && (
+            <Tooltip title={fitScreen ? 'Original Size' : 'Fit Screen'}>
+              <IconButton variant={fitScreen ? 'solid' : 'soft'} onClick={() => setFitScreen(on => !on)}>
+                <FitScreenIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+          {canCodepen && <ButtonCodepen codeBlock={{ code: blockCode, language: inferredCodeLanguage || undefined }} />}
+          {canReplit && <ButtonReplit codeBlock={{ code: blockCode, language: inferredCodeLanguage || undefined }} />}
+          {props.noCopyButton !== true && (
+            <Tooltip title='Copy Code'>
+              <IconButton variant='soft' onClick={handleCopyToClipboard}>
+                <ContentCopyIcon />
+              </IconButton>
+            </Tooltip>
+          )}
         </Box>
 
       </Box>
@@ -213,12 +236,17 @@ const RenderCodeDynamic = React.lazy(async () => {
   const { highlightCode, inferCodeLanguage } = await import('./codePrism');
 
   return {
-    default: (props: { codeBlock: CodeBlock, noCopyButton?: boolean, sx?: SxProps }) =>
+    default: (props: { codeBlock: CodeBlock, isMobile?: boolean, noCopyButton?: boolean, sx?: SxProps }) =>
       <RenderCodeImpl highlightCode={highlightCode} inferCodeLanguage={inferCodeLanguage} {...props} />,
   };
 });
 
-export const RenderCode = (props: { codeBlock: CodeBlock, noCopyButton?: boolean, sx?: SxProps }) =>
-  <React.Suspense fallback={<Box component='code' sx={{ p: 1.5, display: 'block', ...(props.sx || {}) }} />}>
-    <RenderCodeDynamic {...props} />
-  </React.Suspense>;
+function RenderCode(props: { codeBlock: CodeBlock, isMobile?: boolean, noCopyButton?: boolean, sx?: SxProps }) {
+  return (
+    <React.Suspense fallback={<Box component='code' sx={{ p: 1.5, display: 'block', ...props.sx }} />}>
+      <RenderCodeDynamic {...props} />
+    </React.Suspense>
+  );
+}
+
+export const RenderCodeMemo = React.memo(RenderCode);

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

@@ -107,10 +107,10 @@ function useMermaidLoader() {
 }
 
 
-export function RenderCodeMermaid(props: { mermaidCode: string }) {
+export function RenderCodeMermaid(props: { mermaidCode: string, fitScreen: boolean }) {
 
   // state
-  const [svgCode, setSvgCode] = React.useState<string | null>(null);
+  const [_svgCode, setSvgCode] = React.useState<string | null>(null);
   const hasUnmounted = React.useRef(false);
   const mermaidContainerRef = React.useRef<HTMLDivElement>(null);
 
@@ -157,8 +157,12 @@ export function RenderCodeMermaid(props: { mermaidCode: string }) {
     <Box
       component='div'
       ref={mermaidContainerRef}
-      dangerouslySetInnerHTML={{ __html: svgCode || 'Loading Diagram...' }}
+      dangerouslySetInnerHTML={{ __html: patchSvgString(props.fitScreen, _svgCode) || 'Loading Diagram...' }}
     />
   );
 
+}
+
+export function patchSvgString(fitScreen: boolean, svgCode?: string | null): string | null {
+  return fitScreen ? svgCode?.replace('<svg ', `<svg style="width: 100%; height: 100%; object-fit: contain" `) || null : svgCode || null;
 }

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

@@ -27,13 +27,13 @@ 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;
+  duplicateFocusedPane: (/*paneIndex: number*/) => void;
+  removeOtherPanes: () => void;
   removePane: (paneIndex: number) => void;
   setFocusedPane: (paneIndex: number) => void;
   onConversationsChanged: (conversationIds: DConversationId[]) => void;
@@ -54,7 +54,6 @@ const useAppChatPanesStore = create<AppChatPanesStore>()(persist(
     // Initial state: no panes
     chatPanes: [] as ChatPane[],
     chatPaneFocusIndex: null as number | null,
-    chatPaneInputMode: 'focused' as 'focused' | 'broadcast',
 
     openConversationInFocusedPane: (conversationId: DConversationId) => {
       _set((state) => {
@@ -160,18 +159,18 @@ const useAppChatPanesStore = create<AppChatPanesStore>()(persist(
       return true;
     },
 
-    duplicatePane: (paneIndex: number) =>
+    duplicateFocusedPane: (/*paneIndex: number*/) =>
       _set(state => {
-        const { chatPanes } = state;
+        const { chatPanes, chatPaneFocusIndex: _srcIndex } = state;
 
         // Validate index
-        if (paneIndex < 0 || paneIndex >= chatPanes.length) {
-          console.warn('Attempted to duplicate a pane with an out-of-range index:', paneIndex);
+        if (_srcIndex === null || _srcIndex < 0 || _srcIndex >= chatPanes.length) {
+          console.warn('Attempted to duplicate a pane with an out-of-range index:', _srcIndex);
           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 paneToDuplicate = chatPanes[_srcIndex];
         const duplicatedPane = {
           ...paneToDuplicate,
           history: [...paneToDuplicate.history], // Deep copy of the history array
@@ -179,14 +178,27 @@ const useAppChatPanesStore = create<AppChatPanesStore>()(persist(
 
         // Insert the duplicated pane into the array, right after the original pane
         const newPanes = [
-          ...chatPanes.slice(0, paneIndex + 1),
+          ...chatPanes.slice(0, _srcIndex + 1),
           duplicatedPane,
-          ...chatPanes.slice(paneIndex + 1),
+          ...chatPanes.slice(_srcIndex + 1),
         ];
 
         return {
           chatPanes: newPanes,
-          chatPaneFocusIndex: paneIndex + 1,
+          chatPaneFocusIndex: _srcIndex + 1,
+        };
+      }),
+
+    removeOtherPanes: () =>
+      _set(state => {
+        const { chatPanes, chatPaneFocusIndex } = state;
+        if (chatPanes.length < 2)
+          return state;
+
+        const newPanes = [chatPanes[chatPaneFocusIndex ?? 0]];
+        return {
+          chatPanes: newPanes,
+          chatPaneFocusIndex: 0,
         };
       }),
 
@@ -267,7 +279,7 @@ const useAppChatPanesStore = create<AppChatPanesStore>()(persist(
         // 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,
+          chatPaneFocusIndex: (newPanes.length && chatPaneFocusIndex !== null && chatPaneFocusIndex < newPanes.length) ? chatPaneFocusIndex : 0,
         };
       }),
 
@@ -287,7 +299,6 @@ export function usePanesManager() {
       onConversationsChanged,
       openConversationInFocusedPane,
       openConversationInSplitPane,
-      duplicatePane,
       removePane,
       setFocusedPane,
     } = state;
@@ -299,8 +310,7 @@ export function usePanesManager() {
       onConversationsChanged,
       openConversationInFocusedPane,
       openConversationInSplitPane,
-      paneIndex: chatPaneFocusIndex,
-      duplicatePane,
+      focusedPaneIndex: chatPaneFocusIndex,
       removePane,
       setFocusedPane,
     };
@@ -319,4 +329,13 @@ export function usePanesManager() {
   return {
     ...panesFunctions,
   };
+}
+
+export function usePaneDuplicateOrClose() {
+  return useAppChatPanesStore(state => ({
+    canAddPane: state.chatPanes.length < 4,
+    isMultiPane: state.chatPanes.length > 1,
+    duplicateFocusedPane: state.duplicateFocusedPane,
+    removeOtherPanes: state.removeOtherPanes,
+  }), shallow);
 }

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

@@ -1,54 +1,117 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { Box, Button, Checkbox, Grid, IconButton, Input, Stack, Textarea, Typography } from '@mui/joy';
+import type { SxProps } from '@mui/joy/styles/types';
+import { Avatar, Box, Button, Card, CardContent, Checkbox, IconButton, Input, List, ListItem, ListItemButton, Textarea, Tooltip, Typography } from '@mui/joy';
 import ClearIcon from '@mui/icons-material/Clear';
+import DoneIcon from '@mui/icons-material/Done';
+import EditIcon from '@mui/icons-material/Edit';
 import SearchIcon from '@mui/icons-material/Search';
 import TelegramIcon from '@mui/icons-material/Telegram';
 
+import { bareBonesPromptMixer } from '~/modules/persona/pmix/pmix';
+import { useChatLLM } from '~/modules/llms/store-llms';
+
 import { DConversationId, useChatStore } from '~/common/state/store-chats';
+import { ExpanderControlledBox } from '~/common/components/ExpanderControlledBox';
 import { lineHeightTextarea } from '~/common/app.theme';
 import { navigateToPersonas } from '~/common/app.routes';
+import { useChipBoolean } from '~/common/components/useChipBoolean';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
-import { SystemPurposeId, SystemPurposes } from '../../../../data';
+import { SystemPurposeData, 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
-//
-// Absolutely dislike this workaround, but it's the only way I found to make it work
-
-const bpTileSize = { xs: 116, md: 125, xl: 130 };
-const tileCols = [3, 4, 6];
-const tileSpacing = 1;
-const bpMaxWidth = Object.entries(bpTileSize).reduce((acc, [key, value], index) => {
-  acc[key] = tileCols[index] * (value + 8 * tileSpacing) - 8 * tileSpacing;
-  return acc;
-}, {} as Record<string, number>);
-const bpTileGap = { xs: 0.5, md: 1 };
+// defined looks
+const tileSize = 7.5; // rem
+const tileGap = 0.5; // rem
 
 
-// Add this utility function to get a random array element
-const getRandomElement = <T, >(array: T[]): T | undefined =>
-  array.length > 0 ? array[Math.floor(Math.random() * array.length)] : undefined;
+function Tile(props: {
+  text?: string,
+  imageUrl?: string,
+  symbol?: string,
+  isActive: boolean,
+  isEditMode: boolean,
+  isHidden?: boolean,
+  isHighlighted?: boolean,
+  onClick: () => void,
+  sx?: SxProps,
+}) {
+  return (
+    <Button
+      variant={(!props.isEditMode && props.isActive) ? 'solid' : props.isHighlighted ? 'soft' : 'soft'}
+      color={(!props.isEditMode && props.isActive) ? 'primary' : props.isHighlighted ? 'primary' : 'neutral'}
+      onClick={props.onClick}
+      sx={{
+        aspectRatio: 1,
+        height: `${tileSize}rem`,
+        fontWeight: 500,
+        ...((props.isEditMode || !props.isActive) ? {
+          boxShadow: props.isHighlighted ? '0 2px 8px -2px rgb(var(--joy-palette-primary-mainChannel) / 50%)' : 'sm',
+          backgroundColor: props.isHighlighted ? undefined : 'background.surface',
+          ...(props.imageUrl && {
+            backgroundImage: `linear-gradient(rgba(255 255 255 /0.85), rgba(255 255 255 /1)), url(${props.imageUrl})`,
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+          }),
+        } : {}),
+        flexDirection: 'column', gap: 1,
+        ...props.sx,
+      }}
+    >
+      {/* [Edit mode checkbox] */}
+      {props.isEditMode && (
+        <Checkbox
+          variant='soft' color='neutral'
+          checked={!props.isHidden}
+          // label={<Typography level='body-xs'>show</Typography>}
+          sx={{ position: 'absolute', left: `${tileGap}rem`, top: `${tileGap}rem` }}
+        />
+      )}
+
+      {/* Icon and Text */}
+      {/*<Box sx={{ fontSize: '2rem' }}>*/}
+      {/*  {props.symbol}*/}
+      {/*</Box>*/}
+      <Avatar
+        variant='plain'
+        src={props.imageUrl}
+        sx={{
+          '--Avatar-size': '3rem',
+          fontSize: '2rem',
+          borderRadius: props.imageUrl ? 'sm' : 0,
+          boxShadow: (props.imageUrl && !props.isActive) ? 'sm' : undefined,
+        }}
+      >
+        {props.symbol}
+      </Avatar>
+      <div>
+        {props.text}
+      </div>
+    </Button>
+  );
+}
 
 
 /**
  * Purpose selector for the current chat. Clicking on any item activates it for the current chat.
  */
 export function PersonaSelector(props: { conversationId: DConversationId, runExample: (example: string) => void }) {
+
   // state
   const [searchQuery, setSearchQuery] = React.useState('');
   const [filteredIDs, setFilteredIDs] = React.useState<SystemPurposeId[] | null>(null);
   const [editMode, setEditMode] = React.useState(false);
 
   // external state
-  const showFinder = useUIPreferencesStore(state => state.showPurposeFinder);
+  const showFinder = useUIPreferencesStore(state => state.showPersonaFinder);
+  const [showExamples, showExamplescomponent] = useChipBoolean('Examples', false);
+  const [showPrompt, showPromptComponent] = useChipBoolean('Prompt', false);
   const { systemPurposeId, setSystemPurposeId } = useChatStore(state => {
     const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
     return {
@@ -57,226 +120,266 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
     };
   }, shallow);
   const { hiddenPurposeIDs, toggleHiddenPurposeId } = usePurposeStore(state => ({ hiddenPurposeIDs: state.hiddenPurposeIDs, toggleHiddenPurposeId: state.toggleHiddenPurposeId }), shallow);
-
-  // safety check - shouldn't happen
-  if (!systemPurposeId || !setSystemPurposeId)
-    return null;
+  const { chatLLM } = useChatLLM();
 
 
-  const handleSearchClear = () => {
-    setSearchQuery('');
-    setFilteredIDs(null);
-  };
+  // derived state
 
-  const handleSearchOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const query = e.target.value;
-    if (!query)
-      return handleSearchClear();
-    setSearchQuery(query);
-
-    // Filter results based on search term
-    const ids = Object.keys(SystemPurposes)
-      .filter(key => SystemPurposes.hasOwnProperty(key))
-      .filter(key => {
-        const purpose = SystemPurposes[key as SystemPurposeId];
-        return purpose.title.toLowerCase().includes(query.toLowerCase())
-          || (typeof purpose.description === 'string' && purpose.description.toLowerCase().includes(query.toLowerCase()));
-      });
-    setFilteredIDs(ids as SystemPurposeId[]);
-
-    // If there's a search term, activate the first item
-    if (ids.length && !ids.includes(systemPurposeId))
-      handlePurposeChanged(ids[0] as SystemPurposeId);
-  };
-
-  const handleSearchOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
-    if (e.key == 'Escape')
-      handleSearchClear();
-  };
+  const { selectedPurpose, fourExamples } = React.useMemo(() => {
+    const selectedPurpose: SystemPurposeData | null = systemPurposeId ? (SystemPurposes[systemPurposeId] ?? null) : null;
+    // const selectedExample = selectedPurpose?.examples?.length
+    //   ? selectedPurpose.examples[Math.floor(Math.random() * selectedPurpose.examples.length)]
+    //   : null;
+    const fourExamples = selectedPurpose?.examples?.slice(0, 4) ?? null;
+    return { selectedPurpose, fourExamples };
+  }, [systemPurposeId]);
 
 
-  const toggleEditMode = () => setEditMode(!editMode);
+  const unfilteredPurposeIDs = (filteredIDs && showFinder) ? filteredIDs : Object.keys(SystemPurposes) as SystemPurposeId[];
+  const visiblePurposeIDs = editMode ? unfilteredPurposeIDs : unfilteredPurposeIDs.filter(id => !hiddenPurposeIDs.includes(id));
+  const hidePersonaCreator = hiddenPurposeIDs.includes(PURPOSE_ID_PERSONA_CREATOR);
 
 
-  const handlePurposeChanged = (purposeId: SystemPurposeId | null) => {
-    if (purposeId)
+  // Handlers
+
+  const handlePurposeChanged = React.useCallback((purposeId: SystemPurposeId | null) => {
+    if (purposeId && setSystemPurposeId)
       setSystemPurposeId(props.conversationId, purposeId);
-  };
+  }, [props.conversationId, setSystemPurposeId]);
 
-  const handleCustomSystemMessageChange = (v: React.ChangeEvent<HTMLTextAreaElement>): void => {
+  const handleCustomSystemMessageChange = React.useCallback((v: React.ChangeEvent<HTMLTextAreaElement>): void => {
     // TODO: persist this change? Right now it's reset every time.
     //       maybe we shall have a "save" button just save on a state to persist between sessions
     SystemPurposes['Custom'].systemMessage = v.target.value;
-  };
+  }, []);
+
+  const toggleEditMode = React.useCallback(() => setEditMode(on => !on), []);
 
 
-  // we show them all if the filter is clear (null)
-  const unfilteredPurposeIDs = (filteredIDs && showFinder) ? filteredIDs : Object.keys(SystemPurposes);
-  const purposeIDs = editMode ? unfilteredPurposeIDs : unfilteredPurposeIDs.filter(id => !hiddenPurposeIDs.includes(id));
+  // Search (filtering)
 
-  const hidePersonaCreator = hiddenPurposeIDs.includes(PURPOSE_ID_PERSONA_CREATOR);
+  const handleSearchClear = React.useCallback(() => {
+    setSearchQuery('');
+    setFilteredIDs(null);
+  }, []);
 
-  const selectedPurpose = purposeIDs.length ? (SystemPurposes[systemPurposeId] ?? null) : null;
-  const selectedExample = selectedPurpose?.examples && getRandomElement(selectedPurpose.examples) || null;
+  const handleSearchOnChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    if (!query)
+      return handleSearchClear();
 
-  return <>
+    // Filter results based on search term (title and description)
+    const lcQuery = query.toLowerCase();
+    const ids = (Object.keys(SystemPurposes) as SystemPurposeId[])
+      .filter(key => SystemPurposes.hasOwnProperty(key))
+      .filter(key => {
+        const purpose = SystemPurposes[key as SystemPurposeId];
+        return purpose.title.toLowerCase().includes(lcQuery)
+          || (typeof purpose.description === 'string' && purpose.description.toLowerCase().includes(lcQuery));
+      });
 
-    {showFinder && <Box sx={{ p: 2 * tileSpacing }}>
-      <Input
-        fullWidth
-        variant='outlined' color='neutral'
-        value={searchQuery} onChange={handleSearchOnChange}
-        onKeyDown={handleSearchOnKeyDown}
-        placeholder='Search for purpose…'
-        startDecorator={<SearchIcon />}
-        endDecorator={searchQuery && (
-          <IconButton onClick={handleSearchClear}>
-            <ClearIcon />
-          </IconButton>
-        )}
-        sx={{
-          boxShadow: 'sm',
-        }}
-      />
-    </Box>}
+    setSearchQuery(query);
+    setFilteredIDs(ids);
 
-    <Stack direction='column' sx={{ minHeight: '60vh', justifyContent: 'center', alignItems: 'center' }}>
+    // If there's a search term, activate the first item
+    // if (ids.length && systemPurposeId && !ids.includes(systemPurposeId))
+    //   handlePurposeChanged(ids[0] as SystemPurposeId);
+  }, [handleSearchClear]);
 
-      <Box sx={{ maxWidth: bpMaxWidth }}>
+  const handleSearchOnKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key == 'Escape')
+      handleSearchClear();
+  }, [handleSearchClear]);
 
-        <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'baseline', justifyContent: 'space-between', gap: 2, mb: 1 }}>
+
+  // safety check - shouldn't happen - this is set to null when the conversation is not found
+  if (!setSystemPurposeId)
+    return null;
+
+
+  return (
+    <Box sx={{
+      maxWidth: 'md',
+      minWidth: `${2 + 1 + tileSize * 2}rem`, // accomodate at least 2 columns (scroll-x in case)
+      mx: 'auto',
+      minHeight: '60svh',
+      display: 'grid',
+      px: { xs: 0.5, sm: 1, md: 2 },
+      py: 2,
+    }}>
+
+      {showFinder && <Box>
+        <Input
+          fullWidth
+          variant='outlined' color='neutral'
+          value={searchQuery} onChange={handleSearchOnChange}
+          onKeyDown={handleSearchOnKeyDown}
+          placeholder='Search for purpose…'
+          startDecorator={<SearchIcon />}
+          endDecorator={searchQuery && (
+            <IconButton onClick={handleSearchClear}>
+              <ClearIcon />
+            </IconButton>
+          )}
+          sx={{
+            boxShadow: 'sm',
+          }}
+        />
+      </Box>}
+
+
+      <Box sx={{
+        my: 'auto',
+        // layout
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fit, minmax(${tileSize}rem, ${tileSize}rem))`,
+        justifyContent: 'center', gap: `${tileGap}rem`,
+      }}>
+
+        {/* [row 0] ...  Edit mode [ ] */}
+        <Box sx={{
+          gridColumn: '1 / -1',
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        }}>
           <Typography level='title-sm'>
             AI Persona
           </Typography>
-          <Button variant='plain' color='neutral' size='sm' onClick={toggleEditMode}>
-            {editMode ? 'Done' : 'Edit'}
-          </Button>
+          <Tooltip disableInteractive title={editMode ? 'Done Editing' : 'Edit Tiles'}>
+            <IconButton size='sm' onClick={toggleEditMode} sx={{ my: '-0.25rem' /* absorb the button padding */ }}>
+              {editMode ? <DoneIcon /> : <EditIcon />}
+            </IconButton>
+          </Tooltip>
         </Box>
 
-        <Grid container spacing={tileSpacing} sx={{ justifyContent: 'flex-start' }}>
-          {purposeIDs.map((spId) => (
-            <Grid key={spId}>
-              <Button
-                variant={(!editMode && systemPurposeId === spId) ? 'solid' : 'soft'}
-                color={(!editMode && systemPurposeId === spId) ? 'primary' : SystemPurposes[spId as SystemPurposeId]?.highlighted ? 'warning' : 'neutral'}
-                onClick={() => editMode
-                  ? toggleHiddenPurposeId(spId)
-                  : handlePurposeChanged(spId as SystemPurposeId)
-                }
+        {/* Personas Tiles */}
+        {visiblePurposeIDs.map((spId: SystemPurposeId) => {
+          const isActive = systemPurposeId === spId;
+          const systemPurpose = SystemPurposes[spId];
+          return (
+            <Tile
+              key={'tile-' + spId}
+              text={systemPurpose?.title}
+              imageUrl={systemPurpose?.imageUri}
+              symbol={systemPurpose?.symbol}
+              isActive={isActive}
+              isEditMode={editMode}
+              isHidden={hiddenPurposeIDs.includes(spId)}
+              isHighlighted={systemPurpose?.highlighted}
+              onClick={() => editMode ? toggleHiddenPurposeId(spId) : handlePurposeChanged(spId)}
+            />
+          );
+        })}
+
+        {/* Persona Creator Tile */}
+        {(editMode || !hidePersonaCreator) && (
+          <Tile
+            text='Persona Creator'
+            symbol='🎭'
+            isActive={false}
+            isEditMode={editMode}
+            isHidden={hidePersonaCreator}
+            onClick={() => editMode ? toggleHiddenPurposeId(PURPOSE_ID_PERSONA_CREATOR) : void navigateToPersonas()}
+            sx={{
+              boxShadow: 'xs',
+              backgroundColor: 'neutral.softDisabledBg',
+            }}
+          />
+        )}
+
+
+        {/* [row -3] Description */}
+        <Box sx={{ gridColumn: '1 / -1', mt: 3, display: 'flex', alignItems: 'center', gap: 1 }}>
+
+
+          {/* Description*/}
+          <Typography level='body-sm' sx={{ color: 'text.primary' }}>
+            {!selectedPurpose
+              ? 'Cannot find the former persona' + (systemPurposeId ? ` "${systemPurposeId}"` : '')
+              : selectedPurpose?.description || 'No description available'}
+          </Typography>
+          {/* Examples Toggle */}
+          {fourExamples && showExamplescomponent}
+          {showPromptComponent}
+        </Box>
+
+        {/* [row -3] Example incipits */}
+        {systemPurposeId !== 'Custom' && (
+          <ExpanderControlledBox expanded={showExamples || showPrompt} sx={{ gridColumn: '1 / -1', pt: 1 }}>
+            {showExamples && (
+              <List
+                aria-label='Persona Conversation Starters'
                 sx={{
-                  flexDirection: 'column',
-                  fontWeight: 500,
-                  // paddingInline: 1,
-                  gap: bpTileGap,
-                  height: bpTileSize,
-                  width: bpTileSize,
-                  ...((editMode || systemPurposeId !== spId) ? {
-                    boxShadow: 'md',
-                    ...(SystemPurposes[spId as SystemPurposeId]?.highlighted ? {} : { backgroundColor: 'background.surface' }),
-                  } : {}),
+                  // example items 2-col layout
+                  display: 'grid',
+                  gridTemplateColumns: `repeat(auto-fit, minmax(${tileSize * 2 + 1}rem, 1fr))`,
+                  gap: 1,
                 }}
               >
-                {editMode && (
-                  <Checkbox
-                    color='neutral'
-                    checked={!hiddenPurposeIDs.includes(spId)}
-                    // label={<Typography level='body-xs'>show</Typography>}
-                    sx={{ position: 'absolute', left: 8, top: 8 }}
-                  />
-                )}
-                <div style={{ fontSize: '2rem' }}>
-                  {SystemPurposes[spId as SystemPurposeId]?.symbol}
-                </div>
-                <div>
-                  {SystemPurposes[spId as SystemPurposeId]?.title}
-                </div>
-              </Button>
-            </Grid>
-          ))}
-          {/* Button to start the Persona Creator */}
-          {(editMode || !hidePersonaCreator) && <Grid>
-            <Button
-              variant='soft' color='neutral'
-              onClick={() => editMode
-                ? toggleHiddenPurposeId(PURPOSE_ID_PERSONA_CREATOR)
-                : void navigateToPersonas()
-              }
-              sx={{
-                flexDirection: 'column',
-                fontWeight: 500,
-                // paddingInline: 1,
-                gap: bpTileGap,
-                height: bpTileSize,
-                width: bpTileSize,
-                // 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>
-                <div style={{ fontSize: '2rem' }}>
-                  🎭
-                </div>
-                {/*<SettingsAccessibilityIcon style={{ opacity: 0.5 }} />*/}
-              </div>
-              <div style={{ textAlign: 'center' }}>
-                Persona Creator
-              </div>
-            </Button>
-          </Grid>}
-        </Grid>
-        <Typography
-          level='body-sm'
-          sx={{
-            mt: selectedExample ? 1 : 3,
-            display: 'flex', alignItems: 'center', gap: 1,
-            // justifyContent: 'center',
-            '&:hover > button': { opacity: 1 },
-          }}>
-          {!selectedPurpose
-            ? 'Oops! No AI persona found for your search.'
-            : (selectedExample
-                ? <>
-                  Example: {selectedExample}
-                  <IconButton
-                    color='primary'
-                    onClick={() => props.runExample(selectedExample)}
-                    sx={{ opacity: 0, transition: 'opacity 0.3s' }}
+                {fourExamples?.map((example, idx) => (
+                  <ListItem
+                    key={idx}
+                    variant='soft'
+                    sx={{
+                      borderRadius: 'md',
+                      // boxShadow: 'xs',
+                      padding: '0.25rem 0.5rem',
+                      backgroundColor: 'background.surface',
+                      '& svg': { opacity: 0.1, transition: 'opacity 0.2s' },
+                      '&:hover svg': { opacity: 1 },
+                    }}
                   >
-                    <TelegramIcon />
-                  </IconButton>
-                </>
-                : selectedPurpose.description
+                    <ListItemButton onClick={() => props.runExample(example)} sx={{ justifyContent: 'space-between' }}>
+                      <Typography level='body-sm'>
+                        {example}
+                      </Typography>
+                      <TelegramIcon color='primary' sx={{}} />
+                    </ListItemButton>
+                  </ListItem>
+                ))}
+              </List>
             )}
-        </Typography>
+            {showPrompt && (
+              <Card>
+                <CardContent>
+                  <Typography level='title-sm'>
+                    System Prompt
+                  </Typography>
+                  <Typography level='body-sm' sx={{ whiteSpace: 'break-spaces' }}>
+                    {bareBonesPromptMixer(selectedPurpose?.systemMessage || 'No system message available', chatLLM?.id)}
+                  </Typography>
+                </CardContent>
+              </Card>
+            )}
+          </ExpanderControlledBox>
+        )}
 
+        {/* [row -1] Custom Prompt box */}
         {systemPurposeId === 'Custom' && (
           <Textarea
-            variant='outlined' autoFocus placeholder={'Craft your custom system message here…'}
+            autoFocus
+            variant='outlined'
+            placeholder='Craft your custom system message here…'
             minRows={3}
-            defaultValue={SystemPurposes['Custom']?.systemMessage} onChange={handleCustomSystemMessageChange}
+            defaultValue={SystemPurposes['Custom']?.systemMessage}
+            onChange={handleCustomSystemMessageChange}
+            endDecorator={
+              <Typography level='body-sm' sx={{ px: 0.75 }}>
+                Just start chatting when done.
+              </Typography>
+            }
             sx={{
-              backgroundColor: 'background.level1',
+              gridColumn: '1 / -1',
+              backgroundColor: 'background.surface',
               '&:focus-within': {
                 backgroundColor: 'background.popup',
               },
               lineHeight: lineHeightTextarea,
-              mt: 1,
-            }} />
+            }}
+          />
         )}
 
       </Box>
 
-    </Stack>
-
-  </>;
+    </Box>
+  );
 }

src/apps/chat/components/useLLMDropdown.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { Box, IconButton, ListItemButton, ListItemDecorator } from '@mui/joy';
+import BuildCircleIcon from '@mui/icons-material/BuildCircle';
+import SettingsIcon from '@mui/icons-material/Settings';
+
+import { DLLM, DLLMId, DModelSourceId, useModelsStore } from '~/modules/llms/store-llms';
+import { findVendorById } from '~/modules/llms/vendors/vendors.registry';
+
+import { DropdownItems, PageBarDropdownMemo } from '~/common/layout/optima/components/PageBarDropdown';
+import { GoodTooltip } from '~/common/components/GoodTooltip';
+import { KeyStroke } from '~/common/components/KeyStroke';
+import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+
+
+function LLMDropdown(props: {
+  llms: DLLM[],
+  chatLlmId: DLLMId | null,
+  setChatLlmId: (llmId: DLLMId | null) => void,
+  placeholder?: string,
+}) {
+
+  // external state
+  const { openLlmOptions, openModelsSetup } = useOptimaLayout();
+
+  // derived state
+  const { chatLlmId, llms, setChatLlmId } = props;
+
+
+  const handleChatLLMChange = React.useCallback((value: DLLMId | null) => {
+    value && setChatLlmId(value);
+  }, [setChatLlmId]);
+
+  const handleOpenLLMOptions = React.useCallback(() => {
+    return chatLlmId && openLlmOptions(chatLlmId);
+  }, [chatLlmId, openLlmOptions]);
+
+
+  const llmDropdownItems: DropdownItems = React.useMemo(() => {
+    const llmItems: DropdownItems = {};
+    let prevSourceId: DModelSourceId | null = null;
+    let sepCount = 0;
+    for (const llm of llms) {
+
+      // filter-out hidden models from the dropdown
+      if (!(!llm.hidden || llm.id === chatLlmId))
+        continue;
+
+      // add separators when changing sources
+      if (!prevSourceId || llm.sId !== prevSourceId) {
+        const llmVendor = findVendorById(llm._source?.vId ?? undefined);
+        const sourceName = llmVendor?.name || llm.sId;
+        llmItems[`sep-${llm.id}`] = {
+          type: 'separator',
+          title: sourceName,
+          icon: llmVendor?.Icon ? <llmVendor.Icon /> : undefined,
+        };
+        prevSourceId = llm.sId;
+        sepCount++;
+      }
+
+      // add the model item
+      llmItems[llm.id] = {
+        title: llm.label,
+        // icon: llm.id.startsWith('some vendor') ? <VendorIcon /> : undefined,
+      };
+    }
+    // if there's a single separator (i.e. only one source), remove it
+    if (sepCount === 1) {
+      for (const key in llmItems) {
+        if (key.startsWith('sep-')) {
+          delete llmItems[key];
+          break;
+        }
+      }
+    }
+    return llmItems;
+  }, [chatLlmId, llms]);
+
+
+  // "Model Options" button (only on the active item)
+  const llmDropdownButton = React.useMemo(() => (
+    <GoodTooltip title={
+      <Box sx={{ px: 1, py: 0.75, lineHeight: '1.5rem' }}>
+        Model Options
+        <KeyStroke combo='Ctrl + Shift + O' sx={{ my: 0.5 }} />
+      </Box>
+    }>
+      <IconButton
+        variant='outlined' color='neutral'
+        onClick={handleOpenLLMOptions}
+        sx={{
+          ml: 'auto',
+          // mr: -0.5,
+          my: '-0.25rem' /* absorb the menuItem padding */,
+          backgroundColor: 'background.surface',
+          boxShadow: 'xs',
+        }}
+      >
+        <SettingsIcon sx={{ fontSize: 'xl' }} />
+      </IconButton>
+    </GoodTooltip>
+  ), [handleOpenLLMOptions]);
+
+
+  // "Models Setup" button
+  const llmDropdownAppendOptions = React.useMemo(() => <>
+
+    {/*{chatLlmId && (*/}
+    {/*  <ListItemButton key='menu-opt' onClick={handleOpenLLMOptions}>*/}
+    {/*    <ListItemDecorator><SettingsIcon color='success' /></ListItemDecorator>*/}
+    {/*    <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>*/}
+    {/*      Options*/}
+    {/*      <KeyStroke combo='Ctrl + Shift + O' />*/}
+    {/*    </Box>*/}
+    {/*  </ListItemButton>*/}
+    {/*)}*/}
+
+    <ListItemButton key='menu-llms' onClick={openModelsSetup}>
+      <ListItemDecorator><BuildCircleIcon color='success' /></ListItemDecorator>
+      <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
+        Models
+        <KeyStroke combo='Ctrl + Shift + M' sx={{ ml: 2 }} />
+      </Box>
+    </ListItemButton>
+
+  </>, [openModelsSetup]);
+
+
+  return (
+    <PageBarDropdownMemo
+      items={llmDropdownItems}
+      value={chatLlmId}
+      onChange={handleChatLLMChange}
+      placeholder={props.placeholder || 'Models …'}
+      appendOption={llmDropdownAppendOptions}
+      activeEndDecorator={llmDropdownButton}
+    />
+  );
+}
+
+export function useChatLLMDropdown() {
+  // external state
+  const { llms, chatLLMId, setChatLLMId } = useModelsStore(state => ({
+    llms: state.llms, // NOTE: we don't need a deep comparison as we reference the same array
+    chatLLMId: state.chatLLMId,
+    setChatLLMId: state.setChatLLMId,
+  }), shallow);
+
+  const chatLLMDropdown = React.useMemo(
+    () => <LLMDropdown llms={llms} chatLlmId={chatLLMId} setChatLlmId={setChatLLMId} />,
+    [llms, chatLLMId, setChatLLMId],
+  );
+
+  return { chatLLMId, chatLLMDropdown };
+}
+
+/*export function useTempLLMDropdown(props: { initialLlmId: DLLMId | null }) {
+  // local state
+  const [llmId, setLlmId] = React.useState<DLLMId | null>(props.initialLlmId);
+
+  // external state
+  const llms = useModelsStore(state => state.llms, shallow);
+
+  const chatLLMDropdown = React.useMemo(
+    () => <LLMDropdown llms={llms} llmId={llmId} setLlmId={setLlmId} />,
+    [llms, llmId, setLlmId],
+  );
+
+  return { llmId, chatLLMDropdown };
+}*/

src/apps/chat/components/usePersonaDropdown.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { SystemPurposeId, SystemPurposes } from '../../../data';
+
+import { DConversationId, useChatStore } from '~/common/state/store-chats';
+import { PageBarDropdownMemo } from '~/common/layout/optima/components/PageBarDropdown';
+import { useUIPreferencesStore } from '~/common/state/store-ui';
+
+
+function PersonaDropdown(props: {
+  systemPurposeId: SystemPurposeId | null,
+  setSystemPurposeId: (systemPurposeId: SystemPurposeId | null) => void,
+}) {
+
+  // external state
+  const { zenMode } = useUIPreferencesStore(state => ({
+    zenMode: state.zenMode,
+  }), shallow);
+
+
+  const { setSystemPurposeId } = props;
+
+  const handleSystemPurposeChange = React.useCallback((value: string | null) => {
+    setSystemPurposeId(value as (SystemPurposeId | null));
+  }, [setSystemPurposeId]);
+
+
+  return (
+    <PageBarDropdownMemo
+      items={SystemPurposes}
+      value={props.systemPurposeId}
+      onChange={handleSystemPurposeChange}
+      showSymbols={zenMode !== 'cleaner'}
+    />
+  );
+
+}
+
+export function usePersonaIdDropdown(conversationId: DConversationId | null) {
+
+  // external state
+  const { systemPurposeId } = useChatStore(state => {
+    const conversation = state.conversations.find(conversation => conversation.id === conversationId);
+    return {
+      systemPurposeId: conversation?.systemPurposeId ?? null,
+    };
+  }, shallow);
+
+
+  const handleSetSystemPurposeId = React.useCallback((systemPurposeId: SystemPurposeId | null) => {
+    if (conversationId && systemPurposeId)
+      useChatStore.getState().setSystemPurposeId(conversationId, systemPurposeId);
+  }, [conversationId]);
+
+  const personaDropdown = React.useMemo(() => {
+      if (!systemPurposeId) return null;
+      return (
+        <PersonaDropdown
+          systemPurposeId={systemPurposeId}
+          setSystemPurposeId={handleSetSystemPurposeId}
+        />
+      );
+    },
+    [handleSetSystemPurposeId, systemPurposeId],
+  );
+
+  return { personaDropdown };
+}

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

@@ -1,7 +1,7 @@
 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 { conversationAutoTitle } from '~/modules/aifn/autotitle/autoTitle';
 import { llmStreamingChatGenerate } from '~/modules/llms/llm.client';
 import { speakText } from '~/modules/elevenlabs/elevenlabs.client';
 
@@ -42,7 +42,7 @@ export async function runAssistantUpdatingState(conversationId: string, history:
   startTyping(conversationId, null);
 
   if (autoTitleChat)
-    autoTitle(conversationId);
+    conversationAutoTitle(conversationId, false);
 
   if (autoSuggestDiagrams || autoSuggestQuestions)
     autoSuggestions(conversationId, assistantMessageId, autoSuggestDiagrams, autoSuggestQuestions);

src/apps/chat/editors/editors.ts

@@ -1,6 +1,8 @@
-import { DLLMId } from '~/modules/llms/store-llms';
+import { DLLMId, getKnowledgeMapCutoff } from '~/modules/llms/store-llms';
 import { SystemPurposeId, SystemPurposes } from '../../../data';
 
+import { bareBonesPromptMixer } from '~/modules/persona/pmix/pmix';
+
 import { createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
 
 
@@ -19,9 +21,7 @@ export function updatePurposeInHistory(conversationId: string, history: DMessage
   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]);
+    systemMessage.text = bareBonesPromptMixer(SystemPurposes[purposeId].systemMessage, assistantLlmId);
 
     // 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)
     if (purposeId === 'Custom')

src/apps/draw/AppDraw.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+
+import { useCapabilityTextToImage } from '~/modules/t2i/t2i.client';
+import { useIsMobile } from '~/common/components/useMatchMedia';
+import { useRouterQuery } from '~/common/app.routes';
+
+import { DrawHeading } from './components/DrawHeading';
+import { DrawUnconfigured } from './components/DrawUnconfigured';
+import { Gallery } from './Gallery';
+import { TextToImage } from './TextToImage';
+
+
+export interface AppDrawIntent {
+  backTo: 'app-chat';
+}
+
+
+export function AppDraw() {
+
+  // state
+  const [_drawIntent, setDrawIntent] = React.useState<AppDrawIntent | null>(null);
+  const [section, setSection] = React.useState<number>(0);
+
+
+  // external state
+  const isMobile = useIsMobile();
+  const query = useRouterQuery<Partial<AppDrawIntent>>();
+  const { activeProviderId, mayWork, providers, setActiveProviderId } = useCapabilityTextToImage();
+
+
+  // [effect] set intent from the query parameters
+  React.useEffect(() => {
+    if (query.backTo) {
+      setDrawIntent({
+        backTo: query.backTo || 'app-chat',
+      });
+    }
+  }, [query]);
+
+  // const hasIntent = !!drawIntent && !!drawIntent.backTo;
+
+  // usePluggableOptimaLayout(null, null, null, 'aa');
+
+  return <>
+
+    {/* The container is a 100dvh, flex column with App bg (see `pageCoreSx`) */}
+
+    <DrawHeading
+      section={section}
+      setSection={setSection}
+      showSections
+      sx={{
+        px: { xs: 1, md: 2 },
+        py: { xs: 1, md: 6 },
+      }}
+    />
+
+    {!mayWork && <DrawUnconfigured />}
+
+    {mayWork && <Gallery />}
+
+    {mayWork && (
+      <TextToImage
+        isMobile={isMobile}
+        providers={providers}
+        activeProviderId={activeProviderId}
+        setActiveProviderId={setActiveProviderId}
+      />
+    )}
+
+  </>;
+}

src/apps/draw/Gallery.tsx

@@ -0,0 +1,10 @@
+import { AppPlaceholder } from '../AppPlaceholder';
+import * as React from 'react';
+
+export function Gallery() {
+  return (
+
+    <AppPlaceholder text='Drawing App is under development. v1.13 or v1.14.' />
+
+  );
+}

src/apps/draw/TextToImage.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+
+import { Box } from '@mui/joy';
+
+import type { TextToImageProvider } from '~/common/components/useCapabilities';
+import { themeBgAppChatComposer } from '~/common/app.theme';
+
+import { DesignerPrompt, PromptDesigner } from './components/PromptDesigner';
+import { ProviderConfigure } from './components/ProviderConfigure';
+
+
+export function TextToImage(props: {
+  isMobile: boolean,
+  providers: TextToImageProvider[],
+  activeProviderId: string | null,
+  setActiveProviderId: (providerId: (string | null)) => void
+}) {
+
+  // state
+  const [prompts, setPrompts] = React.useState<DesignerPrompt[]>([]);
+
+
+  const handleStopDrawing = React.useCallback(() => {
+    setPrompts([]);
+  }, []);
+
+  const handlePromptEnqueue = React.useCallback((prompt: DesignerPrompt) => {
+    setPrompts(prompts => [...prompts, prompt]);
+  }, []);
+
+
+  return <>
+
+    <ProviderConfigure
+      providers={props.providers}
+      activeProviderId={props.activeProviderId}
+      setActiveProviderId={props.setActiveProviderId}
+      sx={{
+        p: { xs: 1, md: 2 },
+      }}
+    />
+
+    {/* Placeholder */}
+    <Box sx={{
+      flexGrow: 1,
+      overflowY: 'auto',
+      backgroundColor: 'background.level2',
+      // border: '1px solid blue',
+      p: { xs: 1, md: 2 },
+    }}>
+      <Box sx={{
+        my: 'auto',
+        display: 'flex', flexDirection: 'column', alignItems: 'center',
+        border: '1px solid red',
+        minHeight: '300px',
+      }}>
+        {prompts.map((prompt, index) => (
+          <Box key={index} sx={{
+            border: '1px solid green',
+            width: '100%',
+          }}>
+            {prompt.prompt}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+
+    <PromptDesigner
+      isMobile={props.isMobile}
+      queueLength={prompts.length}
+      onDrawingStop={handleStopDrawing}
+      onPromptEnqueue={handlePromptEnqueue}
+      sx={{
+        backgroundColor: themeBgAppChatComposer,
+        borderTop: `1px solid`,
+        borderTopColor: 'divider',
+        p: { xs: 1, md: 2 },
+      }}
+    />
+
+  </>;
+}

src/apps/draw/components/ButtonPromptFromIdea.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import { Button, ButtonGroup, IconButton, Tooltip } from '@mui/joy';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import LightbulbOutlinedIcon from '@mui/icons-material/LightbulbOutlined';
+
+// const desktopButtonLegend =
+//   <Box sx={{ px: 1, py: 0.75, lineHeight: '1.5rem' }}>
+//     <b>From Idea</b><br />
+//     From Idea
+//   </Box>;
+
+
+export function ButtonPromptFromIdea(props: {
+  isMobile?: boolean,
+  disabled: boolean,
+  onIdeaNext: () => void,
+  onIdeaUse: () => void,
+}) {
+
+  const { onIdeaNext, onIdeaUse } = props;
+
+  const handleIdeaNext = React.useCallback((event: React.MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onIdeaNext();
+  }, [onIdeaNext]);
+
+  return props.isMobile ? null : (
+    <ButtonGroup
+      variant='soft' color='neutral'
+      disabled={props.disabled}
+      sx={{
+        // '--ButtonGroup-separatorSize': 0,
+        minWidth: 160,
+      }}
+    >
+      <Button
+        fullWidth onClick={handleIdeaNext}
+        startDecorator={<LightbulbOutlinedIcon />}
+        sx={{
+          // '--Button-gap': 'auto',
+          // minWidth: 100,
+          justifyContent: 'flex-start',
+          transition: 'background-color 0.2s, color 0.2s',
+        }}>
+        Idea
+      </Button>
+      <Tooltip disableInteractive title='Use Idea'>
+        <IconButton size='sm' onClick={onIdeaUse}>
+          <ArrowForwardIcon />
+        </IconButton>
+      </Tooltip>
+    </ButtonGroup>
+  );
+}

src/apps/draw/components/ButtonPromptFromPlaceholder.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { Button } from '@mui/joy';
+import InsertPhotoOutlinedIcon from '@mui/icons-material/InsertPhotoOutlined';
+import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined';
+
+export function ButtonPromptFromPlaceholder(props: { isMobile?: boolean, name: string, disabled?: boolean }) {
+  return props.isMobile ? null : (
+    <Button
+      disabled={props.disabled}
+      fullWidth variant='soft' color='neutral'
+      startDecorator={props.name === 'Chats' ? <ChatOutlinedIcon /> : <InsertPhotoOutlinedIcon />}
+      sx={{
+        justifyContent: 'flex-start',
+        transition: 'background-color 0.2s, color 0.2s',
+        minWidth: 160,
+      }}>
+      {props.name}
+    </Button>
+  );
+}