First user experience - highlight the need to configure models

This makes sure the folders can be disabled with a single button press in
case there are unexpected issues. Will get user testing and feedback.
Also very important on mobile, where the "select folder" UX
component makes the toolbar wrap.

.dockerignore

@@ -0,0 +1,38 @@
+# big-AGI non-code files
+/docs/
+README.md
+
+# Node build artifacts
+/node_modules
+/.pnp
+.pnp.js
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# versioning
+.git/
+.github/
+
+# IDEs
+.idea/
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: enricoros # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,32 @@
+name: 🐞 Bug Report
+description: Create a report to help us improve
+title: '[BUG]'
+labels: [ 'type: bug' ]
+body:
+  - type: markdown
+    attributes:
+      value: Thank you for reporting a bug.
+  - type: textarea
+    attributes:
+      label: Description
+      description: (required) Please provide a clear description. Please also provide the steps to reproduce.
+      placeholder: 'Concise description + steps to reproduce.'
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Device and browser
+      description: '(required) Please specify your Mobile/Desktop device, OS version, browser.'
+      placeholder: 'Device: (e.g., iPhone 16, Pixel 9, PC, Macbook...), OS: (e.g., iOS 17, Windows 12), Browser: (e.g., Chrome 119, Safari 18, Firefox..)'
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Screenshots and more
+      placeholder: 'Attach screenshots, or add any additional context here.'
+  - type: checkboxes
+    attributes:
+      label: Willingness to Contribute
+      description: We appreciate contributions - would you be willing to submit a pull request?
+      options:
+        - label: '🙋‍♂️ Yes, I would like to contribute a fix.'

.github/ISSUE_TEMPLATE/maintainers-release.md

@@ -0,0 +1,108 @@
+---
+name: Maintainers-Release
+about: Maintainers
+title: Release 1.2.3
+labels: ''
+assignees: enricoros
+
+---
+
+## Release checklist:
+
+- [x] Create a new [Release Issue](https://github.com/enricoros/big-AGI/issues/new?assignees=enricoros&projects=enricoros/4&template=maintainers-release.md&title=Release+1.2.3)
+  - [ ] Replace 1.1.0 with the _former_ release, and _1.2.3_ with THIS
+- [ ] Update the [Roadmap](https://github.com/users/enricoros/projects/4/views/2) calling out shipped features
+- [ ] Create and update a [Milestone](https://github.com/enricoros/big-agi/milestones) for the release
+  - [ ] Assign this task
+  - [ ] Assign all the shipped roadmap Issues
+  - [ ] Assign the relevant [recently closed Isssues](https://github.com/enricoros/big-agi/issues?q=is%3Aclosed+sort%3Aupdated-desc)
+- Code changes:
+  - [ ] Create a release branch 'release-x.y.z': `git checkout -b release-1.2.3`
+  - [ ] Create a temporary tag `git tag v1.2.3 && git push opensource --tags`
+  - [ ] Create a [New Draft GitHub Release](https://github.com/enricoros/big-agi/releases/new), and generate the automated changelog (for new contributors)
+  - [ ] Update the release version in package.json, and `npm i`
+  - [ ] Update in-app News [src/apps/news/news.data.tsx](/src/apps/news/news.data.tsx)
+  - [ ] Update the in-app News version number
+  - [ ] Update the README.md with the new release
+  - [ ] Copy the highlights to the [docs/changelog.md](/docs/changelog.md)
+- Release:
+  - [ ] merge onto main `git checkout main && git merge --no-ff release-1.2.3`
+  - [ ] re-tag `git tag -f v1.2.3 && git push opensource --tags -f'
+  - [ ] verify deployment on Vercel
+  - [ ] verify container on GitHub Packages
+  - [ ] update the GitHub release
+  - [ ] push as stable `git push opensource main:main-stable`
+- Announce:
+  - [ ] Discord announcement
+  - [ ] Twitter announcement
+
+### Links
+
+- Milestone: https://github.com/enricoros/big-AGI/milestone/X
+- GitHub release: https://github.com/enricoros/big-AGI/releases/tag/vX.Y.Z
+- Former release task: https://github.com/enricoros/big-AGI/issues/XXX
+
+## Artifacts Generation
+
+```markdown
+You help me generate the following collateral for the new release of my opensource application
+called big-AGI. The new release is 1.2.3.
+To familiarize yourself with the application, the following are the Website and the GitHub README.md.
+```
+
+- paste the URL: https://big-agi.com
+- drag & drop: [README.md](https://raw.githubusercontent.com/enricoros/big-AGI/main/README.md)
+
+```markdown
+I am announcing a new version, 1.2.3.
+For reference, the following was the collateral for 1.1.0 (Discord announcement,
+GitHub Release, in-app-news file news.data.tsx, changelog.md).
+```
+
+- paste the former: `discord announcement`,
+- `GitHub release`,
+- `news.data.tsx`,
+- `changelog.md`
+
+```markdown
+The following are the new developments for 1.2.3:
+```
+
+- paste the link to the milestone (closed) and each individual issue (content will be downloaded)
+- paste the git changelog  `git log v1.1.0..v1.2.3 | clip`
+
+### news.data.tsx
+
+```markdown
+I need the following from you:
+
+1. a table summarizing all the new features in 1.2.3 (description, significance, usefulness, do not link the commit, but have the issue number), which will be used for the artifacts later
+2. after the table score each feature from a user impact and magnitude point of view
+3. Improve the table, in decreasing order of importance for features, fixing any detail that's missing, in particular check if there are commits of significance from a user or developer point of view, which are not contained in the table
+4. I want you then to update the news.data.tsx for the new release
+```
+
+### Readme (and Changelog)
+
+```markdown
+I need you to update the README.md and the with the new release.
+Attaching the in-app news, with my language for you to improve on, but keep the tone.
+```
+
+### GitHub release
+
+```markdown
+Please create the 1.2.3 Release Notes for GitHub.
+Use a truthful and honest tone, understanding that people's time and attention span is short.
+Today is 2024-1-1.
+```
+
+Now paste-attachment the former release notes (or 1.5.0 which was accurate and great), including the new contributors and
+some stats (# of commits, etc.), and roll it for the new release.
+
+### Discord announcement
+
+```markdown
+Can you generate my 1.2.3 big-AGI discord announcement from the GitHub Release announcement?
+Please keep the formatting and stye of the discord announcement for 1.1.0, but with the new messaging above.
+```

.github/ISSUE_TEMPLATE/roadmap-request.md

@@ -0,0 +1,17 @@
+---
+name: Roadmap request
+about: Suggest a roadmap item
+title: "[Roadmap]"
+labels: ''
+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
+
+**Concise description**
+A 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)

.github/workflows/docker-image.yml

@@ -7,11 +7,15 @@
 # To get a newer version, you will need to update the SHA.
 # You can also reference a tag or branch, but the action may change without warning.
 
-name: Create and publish a Docker image
+name: Create and publish Docker images
 
 on:
   push:
-    branches: ['main']
+    branches:
+      - main
+      #- main-stable  # Disabled as the v* tag is used for stable releases
+    tags:
+      - 'v*'  # Trigger on version tags (e.g., v1.7.0)
 
 env:
   REGISTRY: ghcr.io
@@ -26,7 +30,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Log in to the Container registry
         uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
@@ -40,11 +44,17 @@ jobs:
         uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=development,enable=${{ github.ref == 'refs/heads/main' }}
+            type=raw,value=stable,enable=${{ github.ref == 'refs/heads/main-stable' }}
+            type=ref,event=tag  # Use the tag name as a tag for tag builds
+            type=semver,pattern={{version}}  # Generate semantic versioning tags for tag builds
 
       - name: Build and push Docker image
         uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
         with:
           context: .
+          file: Dockerfile
           push: true
           tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -1,42 +1,56 @@
-# Test
-FROM node:18-alpine as test-target
-ENV NODE_ENV=development
-ENV PATH $PATH:/usr/src/app/node_modules/.bin
+# Base
+FROM node:18-alpine AS base
+ENV NEXT_TELEMETRY_DISABLED 1
 
-WORKDIR /usr/src/app
+# Dependencies
+FROM base AS deps
+WORKDIR /app
 
-COPY package*.json prisma/ ./
+# Dependency files
+COPY package*.json ./
+COPY prisma ./prisma
 
-# CI and release builds should use npm ci to fully respect the lockfile.
-# Local development may use npm install for opportunistic package updates.
-ARG npm_install_command=ci
-RUN npm $npm_install_command
+# Install dependencies, including dev (release builds should use npm ci)
+ENV NODE_ENV development
+RUN npm ci
 
+# Builder
+FROM base AS builder
+WORKDIR /app
+
+# Copy development deps and source
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-# Build
-FROM test-target as build-target
-ENV NODE_ENV=production
-
-# Use build tools, installed as development packages, to produce a release build.
+# Build the application
+ENV NODE_ENV production
 RUN npm run build
 
-# Reduce installed packages to production-only.
+# Reduce installed packages to production-only
 RUN npm prune --production
 
-# Archive
-FROM node:18-alpine as archive-target
-ENV NODE_ENV=production
-ENV PATH $PATH:/usr/src/app/node_modules/.bin
+# Runner
+FROM base AS runner
+WORKDIR /app
 
-WORKDIR /usr/src/app
+# As user
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
 
-# Include only the release build and production packages.
-COPY --from=build-target /usr/src/app/node_modules node_modules
-COPY --from=build-target /usr/src/app/.next .next
-COPY --from=build-target /usr/src/app/public public
+# Copy Built app
+COPY --from=builder --chown=nextjs:nodejs /app/public public
+COPY --from=builder --chown=nextjs:nodejs /app/.next .next
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules node_modules
+
+# Minimal ENV for production
+ENV NODE_ENV production
+ENV PATH $PATH:/app/node_modules/.bin
+
+# Run as non-root user
+USER nextjs
 
 # Expose port 3000 for the application to listen on
 EXPOSE 3000
 
-CMD ["next", "start"]
+# Start the application
+CMD ["next", "start"]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Enrico Ros
+Copyright (c) 2023-2024 Enrico Ros
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,27 +1,75 @@
-# `BIG-AGI` 🤖💬
+# BIG-AGI 🧠✨
 
-Welcome to `big-AGI` 👋 your personal AGI application
-powered by OpenAI GPT-4 and beyond. Designed for smart humans and super-heroes,
-this responsive web app comes with Personas, Drawing, Code Execution, PDF imports, Voice support,
-data Rendering, AGI functions, chats and much more. Comes with plenty of `#big-AGI-energy` 🚀
+Welcome to big-AGI 👋, the GPT application for professionals that need function, form,
+simplicity, and speed. Powered by the latest models from 8 vendors and
+open-source model servers, `big-AGI` offers best-in-class Voice and Chat with AI Personas,
+visualizations, coding, drawing, calling, and quite more -- all in a polished UX.
 
-[![Official Website](https://img.shields.io/badge/BIG--AGI.com-%23096bde?style=for-the-badge&logo=vercel&label=demo)](https://big-agi.com)
+Pros use big-AGI. 🚀 Developers love big-AGI. 🤖
+
+[![Official Website](https://img.shields.io/badge/BIG--AGI.com-%23096bde?style=for-the-badge&logo=vercel&label=launch)](https://big-agi.com)
 
 Or fork & run on Vercel
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-agi&env=OPENAI_API_KEY,OPENAI_API_HOST&envDescription=OpenAI%20KEY%20for%20your%20deployment.%20Set%20HOST%20only%20if%20non-default.)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-agi&env=OPENAI_API_KEY&envDescription=Backend%20API%20keys%2C%20optional%20and%20may%20be%20overridden%20by%20the%20UI.&envLink=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-AGI%2Fblob%2Fmain%2Fdocs%2Fenvironment-variables.md&project-name=big-agi)
+
+## 👉 [roadmap](https://github.com/users/enricoros/projects/4/views/2)
+
+big-AGI is an open book; our **[public roadmap](https://github.com/users/enricoros/projects/4/views/2)**
+shows the current developments and future ideas.
+
+- Got a suggestion? [_Add your roadmap ideas_](https://github.com/enricoros/big-agi/issues/new?&template=roadmap-request.md)
+- Want to contribute? [_Pick up a task!_](https://github.com/users/enricoros/projects/4/views/4) - _easy_ to _pro_
+
+### What's New in 1.10.0 · Jan 6, 2024 · The Year of AGI
+
+- **New UI**: for both desktop and mobile, sets the stage for future scale. [#201](https://github.com/enricoros/big-AGI/issues/201)
+- **Conversation Folders**: enhanced conversation organization. [#321](https://github.com/enricoros/big-AGI/issues/321)
+- **[LM Studio](https://lmstudio.ai/)** support and improved token management
+- Resizable panes in split-screen conversations.
+- Large performance optimizations
+- Developer enhancements: new UI framework, updated documentation for proxy settings on browserless/docker
+
+### What's New in 1.9.0 · Dec 28, 2023 · Creative Horizons
+
+- **DALL·E 3 integration** for enhanced image generation. [#212](https://github.com/enricoros/big-AGI/issues/212)
+- **Perfect scrolling mechanics** across devices. [#304](https://github.com/enricoros/big-AGI/issues/304)
+- Persona creation now supports **text input**. [#287](https://github.com/enricoros/big-AGI/pull/287)
+- Openrouter updates for better model management and rate limit handling
+- Image drawing UX improvements
+- Layout fix for Firefox users
+- Developer enhancements: Text2Image subsystem, Optima layout, ScrollToBottom library, Panes library, and Llms subsystem updates.
+
+### What's New in 1.8.0 · Dec 20, 2023
+
+- **Google Gemini Support**: Use the newest Google models. [#275](https://github.com/enricoros/big-agi/issues/275)
+- **Mistral Platform**: Mixtral and future models support. [#273](https://github.com/enricoros/big-agi/issues/273)
+- **Diagram Instructions**. Thanks to @joriskalz! [#280](https://github.com/enricoros/big-agi/pull/280)
+- Ollama Chats: Enhanced chatting experience. [#270](https://github.com/enricoros/big-agi/issues/270)
+- Mac Shortcuts Fix: Improved UX on Mac
+- **Single-Tab Mode**: Data integrity with single window. [#268](https://github.com/enricoros/big-agi/issues/268)
+- **Updated Models**: Latest Ollama (v0.1.17) and OpenRouter models
+- Official Downloads: Easy access to the latest big-AGI on [big-AGI.com](https://big-agi.com)
+- For developers: [troubleshot networking](https://github.com/enricoros/big-AGI/issues/276#issuecomment-1858591483), fixed Vercel deployment, cleaned up the LLMs/Streaming framework
+
+### What's New in... ?
+
+> [To The Moon And Back, Attachment Theory, Surf's Up, Loaded, and more releases...](docs/changelog.md).  
+> Check out the [big-AGI open roadmap](https://github.com/users/enricoros/projects/4/views/2)
 
 ## ✨ Key Features 👊
 
 ![Ask away, paste a ton, copy the gems](docs/pixels/big-AGI-compo1.png)
+[More](docs/pixels/big-AGI-compo2b.png), [screenshots](docs/pixels).
 
-- **AI Personas**
-- **Polished UI**: installable web app, mobile-friendly, token counters, etc.
-- **Fast UX**: Microphone, Camera OCR, Drag files, Voice Synthesis
-- **Models**: [OpenAI](https://platform.openai.com/overview), [Anthropic](https://www.anthropic.com/product), [Azure](https://oai.azure.com/), [OpenRouter](https://openrouter.ai/), [Local models](https://github.com/oobabooga/text-generation-webui), and more
-- **Private**: use your own API keys and self-host if you like
-- **Advanced**: PDF import & Summarization, code execution
-- **Integrations**: ElevenLabs, Helicone, Paste.gg, Prodia and more
+- **AI Personas**: Tailor your AI interactions with customizable personas
+- **Sleek UI/UX**: A smooth, intuitive, and mobile-responsive interface
+- **Efficient Interaction**: Voice commands, OCR, and drag-and-drop file uploads
+- **Multiple AI Models**: Choose from a variety of leading AI providers
+- **Privacy First**: Self-host and use your own API keys for full control
+- **Advanced Tools**: Execute code, import PDFs, and summarize documents
+- **Seamless Integrations**: Enhance functionality with various third-party services
+- **Open Roadmap**: Contribute to the progress of big-AGI
 
 ## 💖 Support
 
@@ -39,101 +87,14 @@ Or fork & run on Vercel
 
 <br/>
 
-## 🧠 Latest Drops
-
-#### Next
-
-- **Cloudflare API Gateway** support
-- **Helicone for Anthropic** support
-- **Text Tools** - incl. highlight differences
-
-#### 1.4.0: Sept/Oct: scale OUT
-
-- **Expanded Model Support**: Azure and [OpenRouter](https://openrouter.ai/docs#models) models, including gpt-4-32k
-- **Share and clone** conversations with public links
-- Removed the 20 chats hard limit ([Ashesh3](https://github.com/enricoros/big-agi/pull/158))
-- Latex Rendering
-- Augmented Chat modes (Labs)
-
-#### July/Aug: More Better Faster
-
-- **Camera OCR** - real-world AI - take a picture of a text, and chat with it
-- **Anthropic models** support, e.g. Claude
-- **Backup/Restore** - save chats, and restore them later
-- **[Local model support with Oobabooga server](docs/config-local-oobabooga)** - run your own LLMs!
-- **Flatten conversations** - conversations summarizer with 4 modes
-- **Fork conversations** - create a new chat, to experiment with different endings
-- New commands: /s to add a System message, and /a for an Assistant message
-- New Chat modes: Write-only - just appends the message, without assistant response
-- Fix STOP generation - in sync with the Vercel team to fix a long-standing NextJS issue
-- Fixes on the HTML block - particularly useful to see error pages
-
-#### June: scale UP
-
-- **[New OpenAI Models](https://openai.com/blog/function-calling-and-other-api-updates) support** - 0613 models, including 16k and 32k
-- **Cleaner UI** - with rationalized Settings, Modals, and Configurators
-- **Dynamic Models Configurator** - easy connection with different model vendors
-- **Multiple Model Vendors Support** framework to support many LLM vendors
-- **Per-model Options** (temperature, tokens, etc.) for fine-tuning AI behavior to your needs
-- Support for GPT-4-32k
-- Improved Dialogs and Messages
-- Much Enhanced DX: TRPC integration, modularization, pluggable UI, etc
-
-#### April / May: more #big-agi-energy
-
-- **[Google Search](docs/pixels/feature_react_google.png)** active in ReAct - add your keys to Settings > Google
-  Search
-- **[Reason+Act](docs/pixels/feature_react_turn_on.png)** preview feature - activate with 2-taps on the 'Chat' button
-- **[Image Generation](docs/pixels/feature_imagine_command.png)** using Prodia (BYO Keys) - /imagine - or menu option
-- **[Voice Synthesis](docs/pixels/feature_voice_1.png)** 📣 with ElevenLabs, including selection of custom voices
-- **[Precise Token Counter](docs/pixels/feature_token_counter.png)** 📈 extra-useful to pack the context window
-- **[Install Mobile APP](docs/pixels/feature_pwa.png)** 📲 looks like native (@harlanlewis)
-- **[UI language](docs/pixels/feature_language.png)** with auto-detect, and future app language! (@tbodyston)
-- **PDF Summarization** 🧩🤯 - ask questions to a PDF! (@fredliubojin)
-- **Code Execution: [Codepen](https://codepen.io/)/[Replit](https://replit.com/)** 💻 (@harlanlewis)
-- **[SVG Drawing](docs/pixels/feature_svg_drawing.png)** - draw with AI 🎨
-- Chats: multiple chats, AI titles, Import/Export, Selection mode
-- Rendering: Markdown, SVG, improved Code blocks
-- Integrations: OpenAI organization ID
-- [Cloudflare deployment instructions](docs/deploy-cloudflare.md),
-  [awesome-agi](https://github.com/enricoros/awesome-agi)
-- [Typing Avatars](docs/pixels/gif_typing_040123.gif) ⌨️
-  <!-- p><a href="docs/pixels/gif_typing_040123.gif"><img src="docs/pixels/gif_typing_040123.gif" width='700' alt="New Typing Avatars"/></a></p -->
-
-#### March: first release
-
-- **[AI Personas](docs/pixels/feature_purpose_two.png)** - including Code, Science, Corporate, and Chat 🎭
-- **Privacy**: user-owned API keys 🔑 and localStorage 🛡️
-- **Context** - Attach or [Drag & Drop files](docs/pixels/feature_drop_target.png) to add them to the prompt 📁
-- **Syntax highlighting** - for multiple languages 🌈
-- **Code Execution: Sandpack** -
-  [now on branch]((https://github.com/enricoros/big-agi/commit/f678a0d463d5e9cf0733f577e11bd612b7902d89)) `variant-code-execution`
-- Chat with GPT-4 and 3.5 Turbo 🧠💨
-- Real-time streaming of AI responses ⚡
-- **Voice Input** 🎙️ - works great on Chrome / Windows
-- Integration: **[Paste.gg](docs/pixels/feature_paste_gg.png)** integration for chat sharing 📥
-- Integration: **[Helicone](https://www.helicone.ai/)** integration for API observability 📊
-- 🌙 Dark model - Wide mode ⛶
-
-<br/>
-
-## Why this? 💡
-
-Because the official Chat ___lacks important features___, is ___more limited than the api___, at times
-___slow or unavailable___, and you cannot deploy it yourself, remix it, add features, or share it with
-your friends.
-Our users report that ___big-AGI is faster___, ___more reliable___, and ___features rich___
-with features that matter to them.
-
-![Much features, so fun](docs/pixels/big-AGI-compo2b.png)
-
-## Develop 🧩
+## 🧩 Develop
 
 ![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=&logo=typescript&logoColor=white)
 ![React](https://img.shields.io/badge/React-61DAFB?style=&logo=react&logoColor=black)
 ![Next.js](https://img.shields.io/badge/Next.js-000000?style=&logo=vercel&logoColor=white)
 
-Clone this repo, install the dependencies, and run the development server:
+Clone this repo, install the dependencies (all locally), and run the development server (which auto-watches the
+files for changes):
 
 ```bash
 git clone https://github.com/enricoros/big-agi.git
@@ -142,51 +103,58 @@ npm install
 npm run dev
 ```
 
-Now the app should be running on `http://localhost:3000`
+The development app will be running on `http://localhost:3000`. Development builds have the advantage of not requiring
+a build step, but can be slower than production builds. Also, development builds won't have timeout on edge functions.
 
-### Integrations:
+## 🌐 Deploy manually
 
+The _production_ build of the application is optimized for performance and is performed by the `npm run build` command,
+after installing the required dependencies.
+
+```bash
+# .. repeat the steps above up to `npm install`, then:
+npm run build
+npm run start --port 3000
+```
+
+The app will be running on the specified port, e.g. `http://localhost:3000`.
+
+Want to deploy with username/password? See the [Authentication](docs/deploy-authentication.md) guide.
+
+## 🐳 Deploy with Docker
+
+For more detailed information on deploying with Docker, please refer to the [docker deployment documentation](docs/deploy-docker.md).
+
+Build and run:
+
+```bash
+docker build -t big-agi .
+docker run -d -p 3000:3000 big-agi
+``` 
+
+Or run the official container:
+
+- manually: `docker run -d -p 3000:3000 ghcr.io/enricoros/big-agi`
+- or, with docker-compose: `docker-compose up` or see [the documentation](docs/deploy-docker.md) for a composer file with integrated browsing
+
+## ☁️ Deploy on Cloudflare Pages
+
+Please refer to the [Cloudflare deployment documentation](docs/deploy-cloudflare.md).
+
+## 🚀 Deploy on Vercel
+
+Create your GitHub fork, create a Vercel project over that fork, and deploy it. Or press the button below for convenience.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-agi&env=OPENAI_API_KEY&envDescription=Backend%20API%20keys%2C%20optional%20and%20may%20be%20overridden%20by%20the%20UI.&envLink=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-AGI%2Fblob%2Fmain%2Fdocs%2Fenvironment-variables.md&project-name=big-agi)
+
+## Integrations:
+
+* Local models: Ollama, Oobabooga, LocalAi, etc.
 * [ElevenLabs](https://elevenlabs.io/) Voice Synthesis (bring your own voice too) - Settings > Text To Speech
 * [Helicone](https://www.helicone.ai/) LLM Observability Platform - Models > OpenAI > Advanced > API Host: 'oai.hconeai.com'
 * [Paste.gg](https://paste.gg/) Paste Sharing - Chat Menu > Share via paste.gg
 * [Prodia](https://prodia.com/) Image Generation - Settings > Image Generation > Api Key & Model
 
-## Deploy with Docker 🐳
-
-For more detailed information on deploying with Docker, please refer to the [docker deployment documentation](docs/deploy-docker.md).
-
-### 🔧 Locally built image
-
-> Firstly, write all your API keys and env vars to an `.env` file, and make sure the env file is using *both build and run*.
-> See [docs/environment-variables.md](docs/environment-variables.md) for a list of all environment variables.
-
-```bash
-
-```bash
-docker build -t big-agi .
-docker run --detach 'big-agi'
-``` 
-
-### Pre-built image
-
-> Warning: the UI will still be asking for keys, as the image was built without the API keys
-
-```bash
-docker-compose up
-```
-
-## Deploy with Cloudflare Pages ☁️
-
-Please refer to the [Cloudflare deployment documentation](docs/deploy-cloudflare.md).
-
-## Deploy with Vercel 🚀
-
-Create your GitHub fork, create a Vercel project over that fork, and deploy it. Or press the button below for convenience.
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-agi&env=OPENAI_API_KEY,OPENAI_API_HOST&envDescription=OpenAI%20KEY%20for%20your%20deployment.%20Set%20HOST%20only%20if%20non-default.)
-
-
-
 <br/>
 
 This project is licensed under the MIT License.

app/api/llms/stream/route.ts

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

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

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

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

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

docker-compose.yaml

@@ -1,8 +1,12 @@
+# Very simple docker-compose file to run the app on http://localhost:3000 (or http://127.0.0.1:3000).
+#
+# For more examples, such runnin big-AGI alongside a web browsing service, see the `docs/docker` folder.
+
 version: '3.9'
 
 services:
   big-agi:
-    image: ghcr.io/enricoros/big-agi:main
+    image: ghcr.io/enricoros/big-agi:latest
     ports:
       - "3000:3000"
     env_file:

docs/changelog.md

@@ -0,0 +1,154 @@
+## Changelog
+
+This is a high-level changelog. Calls out some of the high level features batched
+by release.
+
+- For the live roadmap, please see [the GitHub project](https://github.com/users/enricoros/projects/4/views/2)
+
+### 1.11.0 - Jan 2024
+
+- milestone: [1.11.0](https://github.com/enricoros/big-agi/milestone/11)
+- 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.10.0 · Jan 6, 2024 · The Year of AGI
+
+- **New UI**: for both desktop and mobile, sets the stage for future scale. [#201](https://github.com/enricoros/big-AGI/issues/201)
+- **Conversation Folders**: enhanced conversation organization. [#321](https://github.com/enricoros/big-AGI/issues/321)
+- **[LM Studio](https://lmstudio.ai/)** support and improved token management
+- Resizable panes in split-screen conversations.
+- Large performance optimizations
+- Developer enhancements: new UI framework, updated documentation for proxy settings on browserless/docker
+
+### What's New in 1.9.0 · Dec 28, 2023 · Creative Horizons
+
+- **DALL·E 3 integration** for enhanced image generation. [#212](https://github.com/enricoros/big-AGI/issues/212)
+- **Perfect scrolling mechanics** across devices. [#304](https://github.com/enricoros/big-AGI/issues/304)
+- Persona creation now supports **text input**. [#287](https://github.com/enricoros/big-AGI/pull/287)
+- Openrouter updates for better model management and rate limit handling
+- Image drawing UX improvements
+- Layout fix for Firefox users
+- Developer enhancements: Text2Image subsystem, Optima layout, ScrollToBottom library, Panes library, and Llms subsystem updates.
+
+### What's New in 1.8.0 · Dec 20, 2023 · To The Moon And Back
+
+- **Google Gemini Support**: Use the newest Google models. [#275](https://github.com/enricoros/big-agi/issues/275)
+- **Mistral Platform**: Mixtral and future models support. [#273](https://github.com/enricoros/big-agi/issues/273)
+- **Diagram Instructions**. Thanks to @joriskalz! [#280](https://github.com/enricoros/big-agi/pull/280)
+- Ollama Chats: Enhanced chatting experience. [#270](https://github.com/enricoros/big-agi/issues/270)
+- Mac Shortcuts Fix: Improved UX on Mac
+- **Single-Tab Mode**: Data integrity with single window. [#268](https://github.com/enricoros/big-agi/issues/268)
+- **Updated Models**: Latest Ollama (v0.1.17) and OpenRouter models
+- Official Downloads: Easy access to the latest big-AGI on [big-AGI.com](https://big-agi.com)
+- For developers: [troubleshot networking](https://github.com/enricoros/big-AGI/issues/276#issuecomment-1858591483), fixed Vercel deployment, cleaned up the LLMs/Streaming framework
+
+### What's New in 1.7.0 · Dec 11, 2023 · Attachment Theory
+
+- **Attachments System Overhaul**: Drag, paste, link, snap, text, images, PDFs and more. [#251](https://github.com/enricoros/big-agi/issues/251)
+- **Desktop Webcam Capture**: Image capture now available as Labs feature. [#253](https://github.com/enricoros/big-agi/issues/253)
+- **Independent Browsing**: Full browsing support with Browserless. [Learn More](https://github.com/enricoros/big-agi/blob/main/docs/config-browse.md)
+- **Overheat LLMs**: Push the creativity with higher LLM temperatures. [#256](https://github.com/enricoros/big-agi/issues/256)
+- **Model Options Shortcut**: Quick adjust with `Ctrl+Shift+O`
+- Optimized Voice Input and Performance
+- Latest Ollama and Oobabooga models
+- For developers: **Password Protection**: HTTP Basic Auth. [Learn How](https://github.com/enricoros/big-agi/blob/main/docs/deploy-authentication.md)
+
+### What's New in 1.6.0 - Nov 28, 2023 · Surf's Up
+
+- **Web Browsing**: Download web pages within chats - [browsing guide](https://github.com/enricoros/big-agi/blob/main/docs/config-browse.md)
+- **Branching Discussions**: Create new conversations from any message
+- **Keyboard Navigation**: Swift chat navigation with new shortcuts (e.g. ctrl+alt+left/right)
+- **Performance Boost**: Faster rendering for a smoother experience
+- **UI Enhancements**: Refined interface based on user feedback
+- **New Features**: Anthropic Claude 2.1, `/help` command, and Flattener tool
+- **For Developers**: Code quality upgrades and snackbar notifications
+
+### What's New in 1.5.0 - Nov 19, 2023 · Loaded
+
+- **Continued Voice**: Engage with hands-free interaction for a seamless experience
+- **Visualization Tool**: Create data representations with our new visualization capabilities
+- **Ollama Local Models**: Leverage local models support with our comprehensive guide
+- **Text Tools**: Enjoy tools including highlight differences to refine your content
+- **Mermaid Diagramming**: Render complex diagrams with our Mermaid language support
+- **OpenAI 1106 Chat Models**: Experience the cutting-edge capabilities of the latest OpenAI models
+- **SDXL Support**: Enhance your image generation with SDXL support for Prodia
+- **Cloudflare OpenAI API Gateway**: Integrate with Cloudflare for a robust API gateway
+- **Helicone for Anthropic**: Utilize Helicone's tools for Anthropic models
+
+For Developers:
+
+- Runtime Server-Side configuration:  https://github.com/enricoros/big-agi/issues/189. Env vars are
+  not required to be set at build time anymore. The frontend will roundtrip to the backend at the
+  first request to get the configuration. See
+  https://github.com/enricoros/big-agi/blob/main/src/modules/backend/backend.router.ts.
+- CloudFlare developers: please change the deployment command to
+  `rm app/api/trpc-node/[trpc]/route.ts && npx @cloudflare/next-on-pages@1`,
+  as we transitioned to the App router in NextJS 14. The documentation in
+  [docs/deploy-cloudflare.md](../docs/deploy-cloudflare.md) is updated
+
+### 1.4.0: Sept/Oct: scale OUT
+
+- **Expanded Model Support**: Azure and [OpenRouter](https://openrouter.ai/docs#models) models, including gpt-4-32k
+- **Share and clone** conversations with public links
+- Removed the 20 chats hard limit ([Ashesh3](https://github.com/enricoros/big-agi/pull/158))
+- Latex Rendering
+- Augmented Chat modes (Labs)
+
+### July/Aug: More Better Faster
+
+- **Camera OCR** - real-world AI - take a picture of a text, and chat with it
+- **Anthropic models** support, e.g. Claude
+- **Backup/Restore** - save chats, and restore them later
+- **[Local model support with Oobabooga server](../docs/config-local-oobabooga)** - run your own LLMs!
+- **Flatten conversations** - conversations summarizer with 4 modes
+- **Fork conversations** - create a new chat, to try with different endings
+- New commands: /s to add a System message, and /a for an Assistant message
+- New Chat modes: Write-only - just appends the message, without assistant response
+- Fix STOP generation - in sync with the Vercel team to fix a long-standing NextJS issue
+- Fixes on the HTML block - particularly useful to see error pages
+
+### June: scale UP
+
+- **[New OpenAI Models](https://openai.com/blog/function-calling-and-other-api-updates) support** - 0613 models, including 16k and 32k
+- **Cleaner UI** - with rationalized Settings, Modals, and Configurators
+- **Dynamic Models Configurator** - easy connection with different model vendors
+- **Multiple Model Vendors Support** framework to support many LLM vendors
+- **Per-model Options** (temperature, tokens, etc.) for fine-tuning AI behavior to your needs
+- Support for GPT-4-32k
+- Improved Dialogs and Messages
+- Much Enhanced DX: TRPC integration, modularization, pluggable UI, etc
+
+### April / May: more #big-agi-energy
+
+- **[Google Search](../docs/pixels/feature_react_google.png)** active in ReAct - add your keys to Settings > Google
+  Search
+- **[Reason+Act](../docs/pixels/feature_react_turn_on.png)** preview feature - activate with 2-taps on the 'Chat' button
+- **[Image Generation](../docs/pixels/feature_imagine_command.png)** using Prodia (BYO Keys) - /imagine - or menu option
+- **[Voice Synthesis](../docs/pixels/feature_voice_1.png)** 📣 with ElevenLabs, including selection of custom voices
+- **[Precise Token Counter](../docs/pixels/feature_token_counter.png)** 📈 extra-useful to pack the context window
+- **[Install Mobile APP](../docs/pixels/feature_pwa.png)** 📲 looks like native (@harlanlewis)
+- **[UI language](../docs/pixels/feature_language.png)** with auto-detect, and future app language! (@tbodyston)
+- **PDF Summarization** 🧩🤯 - ask questions to a PDF! (@fredliubojin)
+- **Code Execution: [Codepen](https://codepen.io/)/[Replit](https://replit.com/)** 💻 (@harlanlewis)
+- **[SVG Drawing](../docs/pixels/feature_svg_drawing.png)** - draw with AI 🎨
+- Chats: multiple chats, AI titles, Import/Export, Selection mode
+- Rendering: Markdown, SVG, improved Code blocks
+- Integrations: OpenAI organization ID
+- [Cloudflare deployment instructions](../docs/deploy-cloudflare.md),
+  [awesome-agi](https://github.com/enricoros/awesome-agi)
+- [Typing Avatars](../docs/pixels/gif_typing_040123.gif) ⌨️
+  <!-- p><a href="../docs/pixels/gif_typing_040123.gif"><img src="../docs/pixels/gif_typing_040123.gif" width='700' alt="New Typing Avatars"/></a></p -->
+
+### March: first release
+
+- **[AI Personas](../docs/pixels/feature_purpose_two.png)** - including Code, Science, Corporate, and Chat 🎭
+- **Privacy**: user-owned API keys 🔑 and localStorage 🛡️
+- **Context** - Attach or [Drag & Drop files](../docs/pixels/feature_drop_target.png) to add them to the prompt 📁
+- **Syntax highlighting** - for multiple languages 🌈
+- **Code Execution: Sandpack** -
+  [now on branch]((https://github.com/enricoros/big-agi/commit/f678a0d463d5e9cf0733f577e11bd612b7902d89)) `variant-code-execution`
+- Chat with GPT-4 and 3.5 Turbo 🧠💨
+- Real-time streaming of AI responses ⚡
+- **Voice Input** 🎙️ - works great on Chrome / Windows
+- Integration: **[Paste.gg](../docs/pixels/feature_paste_gg.png)** integration for chat sharing 📥
+- Integration: **[Helicone](https://www.helicone.ai/)** integration for API observability 📊
+- 🌙 Dark model - Wide mode ⛶

docs/config-browse.md

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

docs/config-local-localai.md

@@ -30,5 +30,5 @@ For instance with [Use luna-ai-llama2 with docker compose](https://localai.io/ba
 
 > NOTE: LocalAI does not list details about the mdoels. Every model is assumed to be
 > capable of chatting, and with a context window of 4096 tokens.
-> Please update the [src/modules/llms/transports/server/openai/models.data.ts](../src/modules/llms/transports/server/openai/models.data.ts)
+> Please update the [src/modules/llms/transports/server/openai/models.data.ts](../src/modules/llms/server/openai/models.data.ts)
 > file with the mapping information between LocalAI model IDs and names/descriptions/tokens, etc.

docs/config-local-oobabooga.md

@@ -4,7 +4,7 @@ Integrate local Large Language Models (LLMs) with
 [oobabooga/text-generation-webui](https://github.com/oobabooga/text-generation-webui),
 a specialized interface that includes a custom variant of the OpenAI API for a smooth integration process.
 
-_Last updated on Nov 7, 2023_
+_Last updated on Dec 7, 2023_
 
 ### Components
 
@@ -20,26 +20,31 @@ This guide assumes that **big-AGI** is already installed on your system. Note th
 
 ### Text-web-ui Installation & Configuration:
 
-1. Install [text-generation-webui](https://github.com/oobabooga/text-generation-webui#Installation).
-    - Download the one-click installer, extract it, and double-click on "start" - ~10 minutes
-    - Close it afterwards as we need to modify the startup flags
+1. Install [text-generation-webui](https://github.com/oobabooga/text-generation-webui#Installation):
+    - Follow the instructions in the official page (basicall clone the repo and run a script) [~10 minutes]
+    - Stop the Web UI as we need to modify the startup flags to enable the OpenAI API
 2. Enable the **openai extension**
     - Edit `CMD_FLAGS.txt`
-    - Make sure that `--listen --extensions openai` is present and uncommented 
+    - Make sure that `--listen --api` is present and uncommented 
 3. Restart text-generation-webui
     - Double-click on "start"
     - You should see something like: 
       ```
-      2023-11-07 21:24:26 INFO:Loading the extension "openai"...
-      2023-11-07 21:24:27 INFO:OpenAI compatible API URL:
+      2023-12-07 21:51:21 INFO:Loading the extension "openai"...
+      2023-12-07 21:51:21 INFO:OpenAI-compatible API URL:
       
-      http://0.0.0.0:5000/v1
+      http://0.0.0.0:5000 
+      ...
+      INFO:     Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
+      Running on local URL:  http://0.0.0.0:7860
       ```
-    - The OpenAI API is now running on port 5000, on both localhost (127.0.0.1) and your network IP address
+    - This shows that:
+      - The Web UI is running on port 7860: http://127.0.0.1:7860
+      - **The OpenAI API is running on port 5000: http://127.0.0.1:5000**
 4. Load your first model
     - Open the text-generation-webui at [127.0.0.1:7860](http://127.0.0.1:7860/)
     - Switch to the **Model** tab
-    - Download, for instance, `TheBloke/Llama-2-7b-Chat-GPTQ:gptq-4bit-32g-actorder_True` - 4.3 GB
+    - Download, for instance, `TheBloke/Llama-2-7B-Chat-GPTQ`
     - Select the model once it's loaded
 
 ### Integrating text-web-ui with big-AGI:
@@ -51,4 +56,6 @@ This guide assumes that **big-AGI** is already installed on your system. Note th
         - The active model must be selected and LOADED on the text-generation-webui as it doesn't support model switching or parallel requests.
     - Select model & Chat
 
+![config-oobabooga-0.png](pixels/config-oobabooga-0.png)
+
 Enjoy the privacy and flexibility of local LLMs with `big-AGI` and `text-generation-webui`!

docs/config-ollama.md

@@ -5,31 +5,46 @@ This guide helps you connect [Ollama](https://ollama.ai) [models](https://ollama
 experience. The integration brings the popular big-AGI features to Ollama, including: voice chats,
 editing tools, models switching, personas, and more.
 
+_Last updated Dec 16, 2023_
+
 ![config-local-ollama-0-example.png](pixels/config-ollama-0-example.png)
 
 ## Quick Integration Guide
 
-1. **Ensure Ollama API Server is Running**: Before starting, make sure your Ollama API server is up and running.
-2. **Add Ollama as a Model Source**: In `big-AGI`, navigate to the **Models** section, select **Add a model source**, and choose **Ollama**.
-3. **Enter Ollama Host URL**: Provide the Ollama Host URL where the API server is accessible (e.g., `http://localhost:11434`).
-4. **Refresh Model List**: Once connected, refresh the list of available models to include the Ollama models.
-5. **Start Using AI Personas**: Select an Ollama model and begin interacting with AI personas tailored to your needs.
+1. **Ensure Ollama API Server is Running**: Follow the official instructions to get Ollama up and running on your machine
+   - For detailed instructions on setting up the Ollama API server, please refer to the
+   [Ollama download page](https://ollama.ai/download) and [instructions for linux](https://github.com/jmorganca/ollama/blob/main/docs/linux.md). 
+2. **Add Ollama as a Model Source**: In `big-AGI`, navigate to the **Models** section, select **Add a model source**, and choose **Ollama**
+3. **Enter Ollama Host URL**: Provide the Ollama Host URL where the API server is accessible (e.g., `http://localhost:11434`)
+4. **Refresh Model List**: Once connected, refresh the list of available models to include the Ollama models
+   > Optional: use the Ollama Admin interface to see which models are available and 'Pull' them in your local machine. Note
+   that this operation will likely timeout due to Edge Functions timeout on the big-AGI server while pulling, and
+   you'll have to press the 'Pull' button again, until a green message appears.
+5. **Chat with Ollama models**: select an Ollama model and begin chatting with AI personas
 
-### Ollama: installation and Setup
+**Visual Configuration Guide**:
 
-For detailed instructions on setting up the Ollama API server, please refer to the
-[Ollama download page](https://ollama.ai/download) and [instructions for linux](https://github.com/jmorganca/ollama/blob/main/docs/linux.md).
+* After adding the `Ollama` model vendor, entering the IP address of an Ollama server, and refreshing models:<br/>
+  <img src="pixels/config-ollama-1-models.png" alt="config-local-ollama-1-models.png" width="320">
 
-### Visual Guide
+* The `Ollama` admin panel, with the `Pull` button highlighted, after pulling the "Yi" model:<br/>
+  <img src="pixels/config-ollama-2-admin-pull.png" alt="config-local-ollama-2-admin-pull.png" width="320">
 
-* After adding the `Ollama` model vendor, entering the IP address of an Ollama server, and refreshing models:
-  <img src="pixels/config-ollama-1-models.png" alt="config-local-ollama-1-models.png" style="max-width: 320px;">
+* You can now switch model/persona dynamically and text/voice chat with the models:<br/>
+  <img src="pixels/config-ollama-3-chat.png" alt="config-local-ollama-3-chat.png" width="320">
 
-* The `Ollama` admin panel, with the `Pull` button highlighted, after pulling the "Yi" model:
-  <img src="pixels/config-ollama-2-admin-pull.png" alt="config-local-ollama-2-admin-pull.png" style="max-width: 320px;">
+<br/>
 
-* You can now switch model/persona dynamically and text/voice chat with the models:
-  <img src="pixels/config-ollama-3-chat.png" alt="config-local-ollama-3-chat.png" style="max-width: 320px;">
+### ⚠️ Network Troubleshooting
+
+If you get errors about the server having trouble connecting with Ollama, please see 
+[this message](https://github.com/enricoros/big-AGI/issues/276#issuecomment-1858591483) on Issue #276.
+
+And in brief, make sure the Ollama endpoint is accessible from the servers where you run big-AGI (which could
+be localhost or cloud servers).
+![Ollama Networking Chart](pixels/config-ollama-network.png)
+
+<br/>
 
 ### Advanced: Model parameters
 
@@ -68,6 +83,8 @@ Then, edit the nginx configuration file `/etc/nginx/sites-enabled/default` and a
 
 Reach out to our community if you need help with this.
 
+<br/>
+
 ### Community and Support
 
 Join our community to share your experiences, get help, and discuss best practices:
@@ -78,4 +95,4 @@ Join our community to share your experiences, get help, and discuss best practic
 ---
 
 `big-AGI` is committed to providing a powerful, intuitive, and privacy-respecting AI experience.
-We are excited for you to explore the possibilities with Ollama models. Happy creating!
+We are excited for you to explore the possibilities with Ollama models. Happy creating!

docs/deploy-authentication.md

@@ -0,0 +1,45 @@
+# Authentication
+
+`big-AGI` does not come with built-in authentication. To secure your deployment, you can implement authentication
+in one of the following ways:
+
+1. Build `big-AGI` with support for ⬇️ [HTTP Authentication](#http-authentication)
+2. Utilize user authentication features provided by your ⬇️ [cloud deployment platform](#cloud-deployments-authentication)
+3. Develop a custom authentication solution
+
+<br/>
+
+### HTTP Authentication
+
+[HTTP Basic Authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication) is a simple method
+to secure your application.
+
+To enable it in `big-AGI`, you **must manually build the application**:
+
+- Build `big-AGI` with HTTP authentication enabled:
+  - Clone the repository
+  - Rename `middleware_BASIC_AUTH.ts` to `middleware.ts`
+  - Build: usual simple build procedure (e.g. [Deploy manually](../README.md#-deploy-manually) or [Deploying with Docker](deploy-docker.md))
+
+- Configure the following [environment variables](environment-variables.md) before launching `big-AGI`:
+```dotenv
+HTTP_BASIC_AUTH_USERNAME=<your username>
+HTTP_BASIC_AUTH_PASSWORD=<your password>
+```
+
+- Start the application 🔒
+
+<br/>
+
+### Cloud Deployments Authentication
+
+> This approach allows you to enable authentication without rebuilding the application by using the features
+> provided by your cloud platform to manage user accounts and access.
+
+Many cloud deployment platforms offer built-in authentication mechanisms. Refer to the platform's documentation
+for setup instructions:
+
+1. [CloudFlare Access / Zero Trust](https://www.cloudflare.com/zero-trust/products/access/)
+2. [Vercel Authentication](https://vercel.com/docs/security/deployment-protection/methods-to-protect-deployments/vercel-authentication)
+3. [Vercel Password Protection](https://vercel.com/docs/security/deployment-protection/methods-to-protect-deployments/password-protection)
+4. Let us know when you test more solutions (Heroku, AWS IAM, Google IAP, etc.)

docs/deploy-docker.md

@@ -3,38 +3,41 @@
 Utilize Docker containers to deploy the big-AGI application for an efficient and automated deployment process.
 Docker ensures faster development cycles, easier collaboration, and seamless environment management.
 
-## 🔧 Local Build & Deployment
+## Build and run your container 🔧
 
 1. **Clone big-AGI**
-2. **Build the Docker Image**: Build a local docker image from the provided Dockerfile. The command is typically `docker build -t big-agi .`
-3. **Run the Docker Container**: Start a Docker container using the built image with the command `docker run -d -p 3000:3000 big-agi`
+   ```bash
+   git clone https://github.com/enricoros/big-agi.git
+   cd big-agi
+   ``` 
+2. **Build the Docker Image**: Build a local docker image from the provided Dockerfile:
+   ```bash
+   docker build -t big-agi .
+   ```
+3. **Run the Docker Container**: start a Docker container from the newly built image,
+   and expose its http port 3000 to your `localhost:3000` using:
+   ```bash
+   docker run -d -p 3000:3000 big-agi
+   ```
+4. Browse to [http://localhost:3000](http://localhost:3000)
 
-> Note: If the Docker container is built without setting environment variables,
-> the frontend UI will be unaware of them, despite the backend being able to use them at runtime.
-> Therefore, ensure all necessary environment variables are set during the build process.
+<br/>
 
-## Documentation
+## Run Official Containers 📦
 
-The big-AGI repository includes a Dockerfile and a GitHub Actions workflow for building and publishing a
-Docker image of the application.
+`big-AGI` is pre-built from source code and published as a Docker image on the GitHub Container Registry (ghcr).
+The build process is transparent, and happens via GitHub Actions, as described in the
+file.
 
-### Dockerfile: Containers
+### Official Images: [ghcr.io/enricoros/big-agi](https://github.com/enricoros/big-agi/pkgs/container/big-agi)
 
-> A local build is recommended, as the 'ghcr' container is built without environment variables.
+#### Run using *docker* 🚀
 
-The [`Dockerfile`](../Dockerfile) is used to create a Docker image. It establishes a Node.js environment,
-installs dependencies, and creates a production-ready version of the application as a local container.
+```bash
+docker run -d -p 3000:3000 ghcr.io/enricoros/big-agi:latest
+```
 
-### GitHub Actions workflow
-
-The [`.github/workflows/docker-image.yml`](../.github/workflows/docker-image.yml) file automates the
-building and publishing of the Docker images to the GitHub Container Registry (ghcr) when changes are
-pushed to the `main` branch.
-
-### Docker Compose
-
-In addition, the repository also includes a `docker-compose.yaml` file, configured to run the pre-built
-'ghcr image'. This file is used to define the `big-agi` service, the ports to expose, and the command to run.
+#### Run using *docker-compose* 🚀
 
 If you have Docker Compose installed, you can run the Docker container with `docker-compose up`
 to pull the Docker image (if it hasn't been pulled already) and start a Docker container. If you want to
@@ -44,4 +47,31 @@ update the image to the latest version, you can run `docker-compose pull` before
 docker-compose up -d
 ```
 
-Leverage Docker's capabilities for a reliable and efficient big-AGI deployment.
+### Make Local Services Visible to Docker 🌐
+
+To make local services running on your host machine accessible to a Docker container, such as a
+[Browseless](./config-browse.md) service or a local API, you can follow this simplified guide:
+
+| Operating System  | Steps to Make Local Services Visible to Docker                                                                                                                                                                                                                                                                                                                                               |
+|:------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Windows and macOS | Use the special DNS name `host.docker.internal` to refer to the host machine from within the Docker container. No additional network configuration is required. Access local services using `host.docker.internal:<PORT>`.                                                                                                                                                                   |
+| Linux             | Two options: *A*. Use <ins>--network="host"</ins> (`docker run --network="host" -d big-agi`) when running the Docker container to merge the container within the host network stack; however, this reduces container isolation. Alternatively: *B*. Connect to local services <ins>using the host's IP address</ins> directly, as host.docker.internal is not available by default on Linux. |
+
+<br/>
+
+### More Information
+
+The [`Dockerfile`](../Dockerfile) describes how to create a Docker image. It establishes a Node.js environment,
+installs dependencies, and creates a production-ready version of the application as a local container.
+
+The [`docker-compose.yaml`](../docker-compose.yaml) file is configured to run the
+official image (big-agi:latest). This file is used to define the `big-agi` service, to expose
+port 3000 on the host, and launch big-AGI within the container (startup command).
+
+The [`.github/workflows/docker-image.yml`](../.github/workflows/docker-image.yml) file is used
+to build the Official Docker images and publish them to the GitHub Container Registry (ghcr).
+The build process is transparent and happens via GitHub Actions.
+
+<br/>
+
+Leverage Docker's capabilities for a reliable and efficient big-AGI deployment!

docs/docker/docker-compose-browserless.yaml

@@ -0,0 +1,31 @@
+# This file is used to run `big-AGI` and `browserless` with Docker Compose.
+#
+# The two containers are linked together and `big-AGI` is configured to use `browserless`
+# as its Puppeteer endpoint (from the containers intranet, it is available browserless:3000).
+#
+# From your host, you can access big-AGI on http://127.0.0.1:3000 and browserless on http://127.0.0.1:9222.
+#
+# To start the containers, run:
+#   docker-compose -f docs/docker/docker-compose-browserless.yaml up
+
+version: '3.9'
+
+services:
+  big-agi:
+    image: ghcr.io/enricoros/big-agi:latest
+    ports:
+      - "3000:3000"
+    env_file:
+      - .env
+    environment:
+      - PUPPETEER_WSS_ENDPOINT=ws://browserless:3000
+    command: [ "next", "start", "-p", "3000" ]
+    depends_on:
+      - browserless
+
+  browserless:
+    image: browserless/chrome:latest
+    ports:
+      - "9222:3000"  # Map host's port 9222 to container's port 3000
+    environment:
+      - MAX_CONCURRENT_SESSIONS=10

docs/environment-variables.md

@@ -3,16 +3,12 @@
 This document provides an explanation of the environment variables used in the big-AGI application.
 
 **All variables are optional**; and _UI options_ take precedence over _backend environment variables_,
-which take place over _defaults_. This file is kept in sync with [`../src/common/types/env.d.ts`](../src/common/types/env.d.ts).
+which take place over _defaults_. This file is kept in sync with [`../src/server/env.mjs`](../src/server/env.mjs).
 
 ### Setting Environment Variables
 
 Environment variables can be set by creating a `.env` file in the root directory of the project.
 
-> For Docker deployment, ensure all necessary environment variables are set **both during build and run**.
-> If the Docker container is built without setting environment variables, the frontend UI will be unaware
-> of them, despite the backend being able to use them at runtime.
-
 The following is an example `.env` for copy-paste convenience:
 
 ```bash
@@ -28,6 +24,8 @@ AZURE_OPENAI_API_ENDPOINT=
 AZURE_OPENAI_API_KEY=
 ANTHROPIC_API_KEY=
 ANTHROPIC_API_HOST=
+GEMINI_API_KEY=
+MISTRAL_API_KEY=
 OLLAMA_API_HOST=
 OPENROUTER_API_KEY=
 
@@ -38,11 +36,20 @@ HELICONE_API_KEY=
 ELEVENLABS_API_KEY=
 ELEVENLABS_API_HOST=
 ELEVENLABS_VOICE_ID=
+# Text-To-Image
+PRODIA_API_KEY=
 # Google Custom Search
 GOOGLE_CLOUD_API_KEY=
 GOOGLE_CSE_ID=
-# Text-To-Image
-PRODIA_API_KEY=
+# Browse
+PUPPETEER_WSS_ENDPOINT=
+
+# Backend Analytics
+BACKEND_ANALYTICS=
+
+# Backend HTTP Basic Authentication (see `deploy-authentication.md` for turning on authentication)
+HTTP_BASIC_AUTH_USERNAME=
+HTTP_BASIC_AUTH_PASSWORD=
 ```
 
 ## Variables Documentation
@@ -74,6 +81,8 @@ requiring the user to enter an API key
 | `AZURE_OPENAI_API_KEY`      | Azure OpenAI API key, see [config-azure-openai.md](config-azure-openai.md)                                                    | Optional, but if set `AZURE_OPENAI_API_ENDPOINT` must also be set |
 | `ANTHROPIC_API_KEY`         | The API key for Anthropic                                                                                                     | Optional                                                          |
 | `ANTHROPIC_API_HOST`        | Changes the backend host for the Anthropic vendor, to enable platforms such as [config-aws-bedrock.md](config-aws-bedrock.md) | Optional                                                          |
+| `GEMINI_API_KEY`            | The API key for Google AI's Gemini                                                                                            | Optional                                                          |
+| `MISTRAL_API_KEY`           | The API key for Mistral                                                                                                       | Optional                                                          |
 | `OLLAMA_API_HOST`           | Changes the backend host for the Ollama vendor. See [config-ollama.md](config-ollama.md)                                      |                                                                   |
 | `OPENROUTER_API_KEY`        | The API key for OpenRouter                                                                                                    | Optional                                                          |
 
@@ -93,19 +102,22 @@ It is currently supported for:
 
 Enable the app to Talk, Draw, and Google things up.
 
-| Variable                 | Description                                                                                                             |
-|:-------------------------|:------------------------------------------------------------------------------------------------------------------------|
-| **Text-To-Speech**       | [ElevenLabs](https://elevenlabs.io/) is a high quality speech synthesis service                                         |
-| `ELEVENLABS_API_KEY`     | ElevenLabs API Key - used for calls, etc.                                                                               |
-| `ELEVENLABS_API_HOST`    | Custom host for ElevenLabs                                                                                              |
-| `ELEVENLABS_VOICE_ID`    | Default voice ID for ElevenLabs                                                                                         |
-| **Google Custom Search** | [Google Programmable Search Engine](https://programmablesearchengine.google.com/about/)  produces links to pages        |
-| `GOOGLE_CLOUD_API_KEY`   | Google Cloud API Key, used with the '/react' command - [Link to GCP](https://console.cloud.google.com/apis/credentials) |
-| `GOOGLE_CSE_ID`          | Google Custom/Programmable Search Engine ID - [Link to PSE](https://programmablesearchengine.google.com/)               |
-| **Text-To-Image**        | [Prodia](https://prodia.com/) is a reliable image generation service                                                    |
-| `PRODIA_API_KEY`         | Prodia API Key - used with '/imagine ...'                                                                               |
+| Variable                   | Description                                                                                                             |
+|:---------------------------|:------------------------------------------------------------------------------------------------------------------------|
+| **Text-To-Speech**         | [ElevenLabs](https://elevenlabs.io/) is a high quality speech synthesis service                                         |
+| `ELEVENLABS_API_KEY`       | ElevenLabs API Key - used for calls, etc.                                                                               |
+| `ELEVENLABS_API_HOST`      | Custom host for ElevenLabs                                                                                              |
+| `ELEVENLABS_VOICE_ID`      | Default voice ID for ElevenLabs                                                                                         |
+| **Google Custom Search**   | [Google Programmable Search Engine](https://programmablesearchengine.google.com/about/)  produces links to pages        |
+| `GOOGLE_CLOUD_API_KEY`     | Google Cloud API Key, used with the '/react' command - [Link to GCP](https://console.cloud.google.com/apis/credentials) |
+| `GOOGLE_CSE_ID`            | Google Custom/Programmable Search Engine ID - [Link to PSE](https://programmablesearchengine.google.com/)               |
+| **Text-To-Image**          | [Prodia](https://prodia.com/) is a reliable image generation service                                                    |
+| `PRODIA_API_KEY`           | Prodia API Key - used with '/imagine ...'                                                                               |
+| **Browse**                 |                                                                                                                         |
+| `PUPPETEER_WSS_ENDPOINT`   | Puppeteer WebSocket endpoint - used for browsing, etc.                                                                  |
+| **Backend**                |                                                                                                                         | 
+| `BACKEND_ANALYTICS`        | Semicolon-separated list of analytics flags (see backend.analytics.ts). Flags: `domain` logs the responding domain.     |
+| `HTTP_BASIC_AUTH_USERNAME` | See the [Authentication](deploy-authentication.md) guide. Username for HTTP Basic Authentication.                       |
+| `HTTP_BASIC_AUTH_PASSWORD` | Password for HTTP Basic Authentication.                                                                                 |
 
 ---
-
-
-

middleware_BASIC_AUTH.ts

@@ -0,0 +1,59 @@
+/**
+ * Middleware to protect `big-AGI` with HTTP Basic Authentication
+ *
+ * For more information on how to deploy with HTTP Basic Authentication, see:
+ *  - [deploy-authentication.md](docs/deploy-authentication.md)
+ */
+
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+
+
+// noinspection JSUnusedGlobalSymbols
+export function middleware(request: NextRequest) {
+
+  // Validate deployment configuration
+  if (!process.env.HTTP_BASIC_AUTH_USERNAME || !process.env.HTTP_BASIC_AUTH_PASSWORD) {
+    console.warn('HTTP Basic Authentication is enabled but not configured');
+    return new Response('Unauthorized/Unconfigured', unauthResponse);
+  }
+
+  // Request client authentication if no credentials are provided
+  const authHeader = request.headers.get('authorization');
+  if (!authHeader?.startsWith('Basic '))
+    return new Response('Unauthorized', unauthResponse);
+
+  // Request authentication if credentials are invalid
+  const base64Credentials = authHeader.split(' ')[1];
+  const credentials = Buffer.from(base64Credentials, 'base64').toString('ascii');
+  const [username, password] = credentials.split(':');
+  if (
+    !username || !password ||
+    username !== process.env.HTTP_BASIC_AUTH_USERNAME ||
+    password !== process.env.HTTP_BASIC_AUTH_PASSWORD
+  )
+    return new Response('Unauthorized', unauthResponse);
+
+  return NextResponse.next();
+}
+
+
+// Response to send when authentication is required
+const unauthResponse: ResponseInit = {
+  status: 401,
+  headers: {
+    'WWW-Authenticate': 'Basic realm="Secure big-AGI"',
+  },
+};
+
+export const config = {
+  matcher: [
+    // Include root
+    '/',
+    // Include pages
+    '/(call|index|news|personas|link)(.*)',
+    // Include API routes
+    '/api(.*)',
+    // Note: this excludes _next, /images etc..
+  ],
+};

next.config.js

@@ -1,39 +0,0 @@
-/** @type {import('next').NextConfig} */
-let nextConfig = {
-  reactStrictMode: true,
-  modularizeImports: {
-    '@mui/icons-material': {
-      transform: '@mui/icons-material/{{member}}',
-    },
-  },
-  webpack: (config, _options) => {
-    // @mui/joy: anything material gets redirected to Joy
-    config.resolve.alias['@mui/material'] = '@mui/joy';
-
-    // @dqbd/tiktoken: enable asynchronous WebAssembly
-    config.experiments = {
-      asyncWebAssembly: true,
-      layers: true,
-    };
-
-    return config;
-  },
-  // NOTE: the following shall be replaced by runtime config
-  env: {
-    HAS_SERVER_DB_PRISMA: !!process.env.POSTGRES_PRISMA_URL && !!process.env.POSTGRES_URL_NON_POOLING,
-    HAS_SERVER_KEYS_GOOGLE_CSE: !!process.env.GOOGLE_CLOUD_API_KEY && !!process.env.GOOGLE_CSE_ID,
-    HAS_SERVER_KEY_ANTHROPIC: !!process.env.ANTHROPIC_API_KEY,
-    HAS_SERVER_KEY_AZURE_OPENAI: !!process.env.AZURE_OPENAI_API_KEY && !!process.env.AZURE_OPENAI_API_ENDPOINT,
-    HAS_SERVER_KEY_ELEVENLABS: !!process.env.ELEVENLABS_API_KEY,
-    HAS_SERVER_HOST_OLLAMA: !!process.env.OLLAMA_API_HOST,
-    HAS_SERVER_KEY_OPENAI: !!process.env.OPENAI_API_KEY,
-    HAS_SERVER_KEY_OPENROUTER: !!process.env.OPENROUTER_API_KEY,
-    HAS_SERVER_KEY_PRODIA: !!process.env.PRODIA_API_KEY,
-  },
-};
-
-// conditionally enable the nextjs bundle analyzer
-if (process.env.ANALYZE_BUNDLE)
-  nextConfig = require('@next/bundle-analyzer')()(nextConfig);
-
-module.exports = nextConfig;

next.config.mjs

@@ -0,0 +1,41 @@
+/** @type {import('next').NextConfig} */
+let nextConfig = {
+  reactStrictMode: true,
+
+  // Note: disabled to chech whether the project becomes slower with this
+  // modularizeImports: {
+  //   '@mui/icons-material': {
+  //     transform: '@mui/icons-material/{{member}}',
+  //   },
+  // },
+
+  // [puppeteer] https://github.com/puppeteer/puppeteer/issues/11052
+  experimental: {
+    serverComponentsExternalPackages: ['puppeteer-core'],
+  },
+
+  webpack: (config, _options) => {
+    // @mui/joy: anything material gets redirected to Joy
+    config.resolve.alias['@mui/material'] = '@mui/joy';
+
+    // @dqbd/tiktoken: enable asynchronous WebAssembly
+    config.experiments = {
+      asyncWebAssembly: true,
+      layers: true,
+    };
+
+    return config;
+  },
+};
+
+// Validate environment variables, if set at build time. Will be actually read and used at runtime.
+// This is the reason both this file and the servr/env.mjs files have this extension.
+await import('./src/server/env.mjs');
+
+// conditionally enable the nextjs bundle analyzer
+if (process.env.ANALYZE_BUNDLE) {
+  const { default: withBundleAnalyzer } = await import('@next/bundle-analyzer');
+  nextConfig = withBundleAnalyzer({ openAnalyzer: true })(nextConfig);
+}
+
+export default nextConfig;

package.json

@@ -1,9 +1,9 @@
 {
   "name": "big-agi",
-  "version": "1.4.0",
+  "version": "1.10.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -15,53 +15,61 @@
   "dependencies": {
     "@dqbd/tiktoken": "^1.0.7",
     "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.16",
-    "@mui/joy": "^5.0.0-beta.14",
-    "@next/bundle-analyzer": "~14.0.2",
-    "@prisma/client": "^5.5.2",
+    "@mui/icons-material": "^5.15.2",
+    "@mui/joy": "^5.0.0-beta.20",
+    "@next/bundle-analyzer": "^14.0.4",
+    "@prisma/client": "^5.7.1",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@tanstack/react-query": "^4.36.1",
-    "@trpc/client": "^10.43.3",
-    "@trpc/next": "^10.43.3",
-    "@trpc/react-query": "^10.43.3",
-    "@trpc/server": "^10.43.3",
+    "@t3-oss/env-nextjs": "^0.7.1",
+    "@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",
     "browser-fs-access": "^0.35.0",
     "eventsource-parser": "^1.1.1",
     "idb-keyval": "^6.2.1",
-    "next": "~14.0.2",
-    "pdfjs-dist": "3.11.174",
+    "next": "^14.0.4",
+    "nprogress": "^0.2.0",
+    "pdfjs-dist": "4.0.269",
     "plantuml-encoder": "^1.4.0",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-katex": "^3.0.1",
-    "react-markdown": "^9.0.0",
+    "react-markdown": "^9.0.1",
+    "react-resizable-panels": "^1.0.5",
     "react-timeago": "^7.2.0",
     "remark-gfm": "^4.0.0",
     "superjson": "^2.2.1",
-    "tesseract.js": "^5.0.3",
+    "tesseract.js": "^5.0.4",
     "uuid": "^9.0.1",
     "zod": "^3.22.4",
-    "zustand": "~4.3.9"
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
-    "@types/node": "^20.9.0",
+    "@cloudflare/puppeteer": "^0.0.5",
+    "@types/node": "^20.10.6",
+    "@types/nprogress": "^0.2.3",
     "@types/plantuml-encoder": "^1.4.2",
     "@types/prismjs": "^1.26.3",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@types/react-katex": "^3.0.3",
-    "@types/react-timeago": "^4.1.6",
+    "@types/react": "^18.2.46",
+    "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-katex": "^3.0.4",
+    "@types/react-timeago": "^4.1.7",
     "@types/uuid": "^9.0.7",
-    "eslint": "^8.53.0",
-    "eslint-config-next": "~14.0.2",
-    "prettier": "^3.0.3",
-    "prisma": "^5.5.2",
-    "typescript": "^5.2.2"
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
+    "prettier": "^3.1.1",
+    "prisma": "^5.7.1",
+    "typescript": "^5.3.3"
   },
   "engines": {
     "node": "^20.0.0 || ^18.0.0"

pages/_app.tsx

@@ -1,56 +1,53 @@
 import * as React from 'react';
 import Head from 'next/head';
+import { MyAppProps } from 'next/app';
 import { Analytics as VercelAnalytics } from '@vercel/analytics/react';
-import { AppProps } from 'next/app';
-import { CacheProvider, EmotionCache } from '@emotion/react';
-import { CssBaseline, CssVarsProvider } from '@mui/joy';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { SpeedInsights as VercelSpeedInsights } from '@vercel/speed-insights/next';
 
+
+import { Brand } from '~/common/app.config';
 import { apiQuery } from '~/common/util/trpc.client';
 
 import 'katex/dist/katex.min.css';
-import '~/common/styles/CodePrism.css'
+import '~/common/styles/CodePrism.css';
 import '~/common/styles/GithubMarkdown.css';
-import { Brand } from '~/common/brand';
-import { createEmotionCache, theme } from '~/common/theme';
+import '~/common/styles/NProgress.css';
+import '~/common/styles/app.styles.css';
+
+import { ProviderBackendAndNoSSR } from '~/common/providers/ProviderBackendAndNoSSR';
+import { ProviderBootstrapLogic } from '~/common/providers/ProviderBootstrapLogic';
+import { ProviderSingleTab } from '~/common/providers/ProviderSingleTab';
+import { ProviderSnacks } from '~/common/providers/ProviderSnacks';
+import { ProviderTRPCQueryClient } from '~/common/providers/ProviderTRPCQueryClient';
+import { ProviderTheming } from '~/common/providers/ProviderTheming';
 
 
-// Client-side cache, shared for the whole session of the user in the browser.
-const clientSideEmotionCache = createEmotionCache();
+const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
+  <>
 
-export interface MyAppProps extends AppProps {
-  emotionCache?: EmotionCache;
-}
+    <Head>
+      <title>{Brand.Title.Common}</title>
+      <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />
+    </Head>
+
+    <ProviderTheming emotionCache={emotionCache}>
+      <ProviderSingleTab>
+        <ProviderBootstrapLogic>
+          <ProviderTRPCQueryClient>
+            <ProviderSnacks>
+              <ProviderBackendAndNoSSR>
+                <Component {...pageProps} />
+              </ProviderBackendAndNoSSR>
+            </ProviderSnacks>
+          </ProviderTRPCQueryClient>
+        </ProviderBootstrapLogic>
+      </ProviderSingleTab>
+    </ProviderTheming>
 
-function MyApp({ Component, emotionCache = clientSideEmotionCache, pageProps }: MyAppProps) {
-  const [queryClient] = React.useState(() => new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-      },
-      mutations: {
-        retry: false,
-      },
-    },
-  }));
-  return <>
-    <CacheProvider value={emotionCache}>
-      <Head>
-        <title>{Brand.Title.Common}</title>
-        <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />
-      </Head>
-      {/* Rect-query provider */}
-      <QueryClientProvider client={queryClient}>
-        <CssVarsProvider defaultMode='light' theme={theme}>
-          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-          <CssBaseline />
-          <Component {...pageProps} />
-        </CssVarsProvider>
-      </QueryClientProvider>
-    </CacheProvider>
     <VercelAnalytics debug={false} />
-  </>;
-}
+    <VercelSpeedInsights debug={false} />
 
-// enables the react-query api invocation
+  </>;
+
+// enables the React Query API invocation
 export default apiQuery.withTRPC(MyApp);

pages/_document.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { AppType } from 'next/app';
+import { AppType, MyAppProps } from 'next/app';
 import { default as Document, DocumentContext, DocumentProps, Head, Html, Main, NextScript } from 'next/document';
 import createEmotionServer from '@emotion/server/create-instance';
 import { getInitColorSchemeScript } from '@mui/joy/styles';
 
-import { Brand } from '~/common/brand';
-import { bodyFontClassName, createEmotionCache } from '~/common/theme';
-
-import { MyAppProps } from './_app';
+import { Brand } from '~/common/app.config';
+import { createEmotionCache } from '~/common/app.theme';
 
 
 interface MyDocumentProps extends DocumentProps {
@@ -16,7 +14,7 @@ interface MyDocumentProps extends DocumentProps {
 
 export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
   return (
-    <Html lang='en' className={bodyFontClassName}>
+    <Html lang='en'>
       <Head>
         {/* Meta (missing Title, set by the App or Page) */}
         <meta name='description' content={Brand.Meta.Description} />
@@ -53,9 +51,9 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
         {emotionStyleTags}
       </Head>
       <body>
-        {getInitColorSchemeScript()}
-        <Main />
-        <NextScript />
+      {getInitColorSchemeScript()}
+      <Main />
+      <NextScript />
       </body>
     </Html>
   );

pages/call.tsx

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

pages/index.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react';
 
 import { AppChat } from '../src/apps/chat/AppChat';
-import { useShowNewsOnUpdate } from '../src/apps/news/news.hooks';
+import { useRedirectToNewsOnUpdates } from '../src/apps/news/news.hooks';
 
-import { AppLayout } from '~/common/layout/AppLayout';
+import { withLayout } from '~/common/layout/withLayout';
 
 
-export default function ChatPage() {
-  // show the News page on updates
-  useShowNewsOnUpdate();
+export default function IndexPage() {
+  // show the News page if there are unseen updates
+  useRedirectToNewsOnUpdates();
 
-  return (
-    <AppLayout>
-      <AppChat />
-    </AppLayout>
-  );
+  // TODO: This Index page will point to the Dashboard (or a landing page) soon
+  // For now it offers the chat experience, but this will change. #299
+
+  return withLayout({ type: 'optima' }, <AppChat />);
 }

pages/labs.tsx

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

pages/link/callback_openrouter.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+
+import { Box, Typography } from '@mui/joy';
+
+import { useModelsStore } from '~/modules/llms/store-llms';
+
+import { InlineError } from '~/common/components/InlineError';
+import { apiQuery } from '~/common/util/trpc.client';
+import { navigateToIndex, useRouterQuery } from '~/common/app.routes';
+import { themeBgApp } from '~/common/app.theme';
+import { withLayout } from '~/common/layout/withLayout';
+
+
+function CallbackOpenRouterPage(props: { openRouterCode: string | undefined }) {
+
+  // external state
+  const { data, isError, error, isLoading } = apiQuery.backend.exchangeOpenRouterKey.useQuery({ code: props.openRouterCode || '' }, {
+    enabled: !!props.openRouterCode,
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+  });
+
+  // derived state
+  const isErrorInput = !props.openRouterCode;
+  const openRouterKey = data?.key ?? undefined;
+  const isSuccess = !!openRouterKey;
+
+
+  // Success: save the key and redirect to the chat app
+  React.useEffect(() => {
+    if (!isSuccess)
+      return;
+
+    // 1. Save the key as the client key
+    useModelsStore.getState().setOpenRoutersKey(openRouterKey);
+
+    // 2. Navigate to the chat app
+    void navigateToIndex(true); //.then(openModelsSetup);
+
+  }, [isSuccess, openRouterKey]);
+
+  return (
+    <Box sx={{
+      flexGrow: 1,
+      backgroundColor: themeBgApp,
+      overflowY: 'auto',
+      display: 'flex', justifyContent: 'center',
+      p: { xs: 3, md: 6 },
+    }}>
+
+      <Box sx={{
+        // my: 'auto',
+        display: 'flex', flexDirection: 'column', alignItems: 'center',
+        gap: 4,
+      }}>
+
+        <Typography level='title-lg'>
+          Welcome Back
+        </Typography>
+
+        {isLoading && <Typography level='body-sm'>Loading...</Typography>}
+
+        {isErrorInput && <InlineError error='There was an issue retrieving the code from OpenRouter.' />}
+
+        {isError && <InlineError error={error} />}
+
+        {data && (
+          <Typography level='body-md'>
+            Success! You can now close this window.
+          </Typography>
+        )}
+
+      </Box>
+
+    </Box>
+  );
+}
+
+
+/**
+ * This page will be invoked by OpenRouter as a Callback
+ *
+ * Docs: https://openrouter.ai/docs#oauth
+ * Example URL: https://localhost:3000/link/callback_openrouter?code=SomeCode
+ */
+export default function CallbackPage() {
+
+  // external state - get the 'code=...' from the URL
+  const { code } = useRouterQuery<{ code: string | undefined }>();
+
+  return withLayout({ type: 'plain' }, <CallbackOpenRouterPage openRouterCode={code} />);
+}

pages/link/chat/[chatLinkId].tsx

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

pages/link/share_target.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react';
-import { useRouter } from 'next/router';
 
 import { Alert, Box, Button, Typography } from '@mui/joy';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
-import { setComposerStartupText } from '../src/apps/chat/components/composer/store-composer';
+import { setComposerStartupText } from '../../src/apps/chat/components/composer/store-composer';
+
+import { callBrowseFetchPage } from '~/modules/browse/browse.client';
 
-import { AppLayout } from '~/common/layout/AppLayout';
 import { LogoProgress } from '~/common/components/LogoProgress';
 import { asValidURL } from '~/common/util/urlUtils';
+import { navigateToIndex, useRouterQuery } from '~/common/app.routes';
+import { themeBgApp } from '~/common/app.theme';
+import { withLayout } from '~/common/layout/withLayout';
 
 
 /**
@@ -28,23 +31,25 @@ function AppShareTarget() {
   const [isDownloading, setIsDownloading] = React.useState(false);
 
   // external state
-  const { query, push: routerPush, replace: routerReplace } = useRouter();
-
+  const { url: queryUrl, text: queryText } = useRouterQuery<{
+    url: string | string[] | undefined,
+    text: string | string[] | undefined,
+  }>();
 
   const queueComposerTextAndLaunchApp = React.useCallback((text: string) => {
     setComposerStartupText(text);
-    void routerReplace('/');
-  }, [routerReplace]);
+    void navigateToIndex(true);
+  }, []);
 
 
   // Detect the share Intent from the query
   React.useEffect(() => {
     // skip when query is not parsed yet
-    if (!Object.keys(query).length)
+    let queryTextItem = queryUrl || queryText || null;
+    if (!queryTextItem)
       return;
 
     // single item from the query
-    let queryTextItem: string[] | string | null = query.url || query.text || null;
     if (Array.isArray(queryTextItem))
       queryTextItem = queryTextItem[0];
 
@@ -55,9 +60,9 @@ function AppShareTarget() {
     else if (queryTextItem)
       setIntentText(queryTextItem);
     else
-      setErrorMessage('No text or url. Received: ' + JSON.stringify(query));
+      setErrorMessage('No text or url. Received: ' + JSON.stringify({ queryText, queryUrl }));
 
-  }, [query.url, query.text, query]);
+  }, [queryText, queryUrl]);
 
 
   // Text -> Composer
@@ -71,18 +76,15 @@ function AppShareTarget() {
   React.useEffect(() => {
     if (intentURL) {
       setIsDownloading(true);
-      // TEMP: until the Browse module is ready, just use the URL, verbatim
-      queueComposerTextAndLaunchApp(intentURL);
-      setIsDownloading(false);
-      /*callBrowseFetchSinglePage(intentURL)
-        .then(pageContent => {
-          if (pageContent)
-            queueComposerTextAndLaunchApp('\n\n```' + intentURL + '\n' + pageContent + '\n```\n');
+      callBrowseFetchPage(intentURL)
+        .then(page => {
+          if (page.stopReason !== 'error')
+            queueComposerTextAndLaunchApp('\n\n```' + intentURL + '\n' + page.content + '\n```\n');
           else
-            setErrorMessage('Could not read any data');
+            setErrorMessage('Could not read any data' + page.error ? ': ' + page.error : '');
         })
         .catch(error => setErrorMessage(error?.message || error || 'Unknown error'))
-        .finally(() => setIsDownloading(false));*/
+        .finally(() => setIsDownloading(false));
     }
   }, [intentURL, queueComposerTextAndLaunchApp]);
 
@@ -90,7 +92,7 @@ function AppShareTarget() {
   return (
 
     <Box sx={{
-      backgroundColor: 'background.level2',
+      backgroundColor: themeBgApp,
       display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
       flexGrow: 1,
     }}>
@@ -110,7 +112,7 @@ function AppShareTarget() {
         </Alert>
         <Button
           variant='solid' color='danger'
-          onClick={() => routerPush('/')}
+          onClick={() => navigateToIndex()}
           endDecorator={<ArrowBackIcon />}
           sx={{ mt: 2 }}
         >
@@ -130,12 +132,8 @@ function AppShareTarget() {
 
 /**
  * This page will be invoked on mobile when sharing Text/URLs/Files from other APPs
- * Example URL: https://get.big-agi.com/launch?title=This+Title&text=https%3A%2F%2Fexample.com%2Fapp%2Fpath
+ * Example URL: https://localhost:3000/link/share_target?title=This+Title&text=https%3A%2F%2Fexample.com%2Fapp%2Fpath
  */
-export default function LaunchPage() {
-  return (
-    <AppLayout>
-      <AppShareTarget />
-    </AppLayout>
-  );
+export default function ShareTargetPage() {
+  return withLayout({ type: 'plain' }, <AppShareTarget />);
 }

pages/news.tsx

@@ -3,16 +3,12 @@ import * as React from 'react';
 import { AppNews } from '../src/apps/news/AppNews';
 import { useMarkNewsAsSeen } from '../src/apps/news/news.hooks';
 
-import { AppLayout } from '~/common/layout/AppLayout';
+import { withLayout } from '~/common/layout/withLayout';
 
 
 export default function NewsPage() {
-  // update the last seen news version
+  // 'touch' the last seen news version
   useMarkNewsAsSeen();
 
-  return (
-    <AppLayout suspendAutoModelsSetup>
-      <AppNews />
-    </AppLayout>
-  );
+  return withLayout({ type: 'optima', suspendAutoModelsSetup: true }, <AppNews />);
 }

pages/personas.tsx

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

public/manifest.json

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

src/apps/AppPlaceholder.tsx

@@ -0,0 +1,48 @@
+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() {
+
+  // external state
+  const route = useRouterRoute();
+
+  // derived state
+  const placeholderAppName = capitalizeFirstLetter(route.replace('/', '') || 'Home');
+
+  return (
+    <Box sx={{
+      flexGrow: 1,
+      backgroundColor: themeBgApp,
+      overflowY: 'auto',
+      p: { xs: 3, md: 6 },
+      border: '1px solid blue',
+    }}>
+
+      <Box sx={{
+        my: 'auto',
+        display: 'flex', flexDirection: 'column', alignItems: 'center',
+        gap: 4,
+        border: '1px solid red',
+      }}>
+
+        <Typography level='h1'>
+          {placeholderAppName}
+        </Typography>
+        <Typography>
+          Intelligent applications to help you learn, think, and do
+        </Typography>
+
+      </Box>
+
+    </Box>
+  );
+}

src/apps/call/AppCall.tsx

@@ -1,24 +1,20 @@
 import * as React from 'react';
-import { useRouter } from 'next/router';
 
 import { Container, Sheet } from '@mui/joy';
 
-import { AppCallQueryParams } from '~/common/routes';
+import { AppCallQueryParams, useRouterQuery } from '~/common/app.routes';
 import { InlineError } from '~/common/components/InlineError';
 
 import { CallUI } from './CallUI';
 import { CallWizard } from './CallWizard';
 
 
-export const APP_CALL_ENABLED = false;
-
-
 export function AppCall() {
+
   // external state
-  const { query } = useRouter();
+  const { conversationId, personaId } = useRouterQuery<AppCallQueryParams>();
 
   // derived state
-  const { conversationId, personaId } = query as any as AppCallQueryParams;
   const validInput = !!conversationId && !!personaId;
 
   return (
@@ -36,7 +32,7 @@ export function AppCall() {
         gap: { xs: 2, md: 4 },
       }}>
 
-        {!validInput && <InlineError error={`Something went wrong. ${JSON.stringify(query)}`} />}
+        {!validInput && <InlineError error={`Something went wrong. ${conversationId}:${personaId}`} />}
 
         {validInput && (
           <CallWizard conversationId={conversationId}>

src/apps/call/CallUI.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';
-import { useRouter } from 'next/router';
 
 import { Box, Card, ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
@@ -15,20 +14,20 @@ import { useChatLLMDropdown } from '../chat/components/applayout/useLLMDropdown'
 
 import { EXPERIMENTAL_speakTextStream } from '~/modules/elevenlabs/elevenlabs.client';
 import { SystemPurposeId, SystemPurposes } from '../../data';
-import { VChatMessageIn } from '~/modules/llms/transports/chatGenerate';
-import { streamChat } from '~/modules/llms/transports/streamChat';
-import { useVoiceDropdown } from '~/modules/elevenlabs/useVoiceDropdown';
+import { llmStreamingChatGenerate, VChatMessageIn } from '~/modules/llms/llm.client';
+import { useElevenLabsVoiceDropdown } from '~/modules/elevenlabs/useElevenLabsVoiceDropdown';
 
 import { Link } from '~/common/components/Link';
 import { SpeechResult, useSpeechRecognition } from '~/common/components/useSpeechRecognition';
 import { conversationTitle, createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
 import { playSoundUrl, usePlaySoundUrl } from '~/common/util/audioUtils';
-import { useLayoutPluggable } from '~/common/layout/store-applayout';
+import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 
 import { CallAvatar } from './components/CallAvatar';
 import { CallButton } from './components/CallButton';
 import { CallMessage } from './components/CallMessage';
 import { CallStatus } from './components/CallStatus';
+import { launchAppChat, ROUTE_APP_CHAT } from '~/common/app.routes';
 
 
 function CallMenuItems(props: {
@@ -39,7 +38,7 @@ function CallMenuItems(props: {
 }) {
 
   // external state
-  const { voicesDropdown } = useVoiceDropdown(false, !props.override);
+  const { voicesDropdown } = useElevenLabsVoiceDropdown(false, !props.override);
 
   const handlePushToTalkToggle = () => props.setPushToTalk(!props.pushToTalk);
 
@@ -89,7 +88,6 @@ export function CallUI(props: {
   const responseAbortController = React.useRef<AbortController | null>(null);
 
   // external state
-  const { push: routerPush } = useRouter();
   const { chatLLMId, chatLLMDropdown } = useChatLLMDropdown();
   const { chatTitle, messages } = useChatStore(state => {
     const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
@@ -178,9 +176,7 @@ export function CallUI(props: {
       // command: close the call
       case 'Goodbye.':
         setStage('ended');
-        setTimeout(() => {
-          void routerPush('/');
-        }, 2000);
+        setTimeout(launchAppChat, 2000);
         return;
       // command: regenerate answer
       case 'Retry.':
@@ -216,7 +212,7 @@ export function CallUI(props: {
     responseAbortController.current = new AbortController();
     let finalText = '';
     let error: any | null = null;
-    streamChat(chatLLMId, callPrompt, responseAbortController.current.signal, (updatedMessage: Partial<DMessage>) => {
+    llmStreamingChatGenerate(chatLLMId, callPrompt, null, null, responseAbortController.current.signal, (updatedMessage: Partial<DMessage>) => {
       const text = updatedMessage.text?.trim();
       if (text) {
         finalText = text;
@@ -236,7 +232,7 @@ export function CallUI(props: {
       responseAbortController.current?.abort();
       responseAbortController.current = null;
     };
-  }, [isConnected, callMessages, chatLLMId, messages, personaVoiceId, personaSystemMessage, routerPush]);
+  }, [isConnected, callMessages, chatLLMId, messages, personaVoiceId, personaSystemMessage]);
 
   // [E] Message interrupter
   const abortTrigger = isConnected && isRecordingSpeech;
@@ -273,7 +269,7 @@ export function CallUI(props: {
     , [overridePersonaVoice, pushToTalk],
   );
 
-  useLayoutPluggable(chatLLMDropdown, null, menuItems);
+  usePluggableOptimaLayout(null, chatLLMDropdown, menuItems, 'CallUI');
 
 
   return <>
@@ -367,7 +363,7 @@ export function CallUI(props: {
       )}
 
       {/* [ended] Back / Call Again */}
-      {(isEnded || isDeclined) && <Link noLinkStyle href='/'><CallButton Icon={ArrowBackIcon} text='Back' variant='soft' /></Link>}
+      {(isEnded || isDeclined) && <Link noLinkStyle href={ROUTE_APP_CHAT}><CallButton Icon={ArrowBackIcon} text='Back' variant='soft' /></Link>}
       {(isEnded || isDeclined) && <CallButton Icon={CallIcon} text='Call Again' color='success' variant='soft' onClick={() => setStage('connected')} />}
 
     </Box>

src/apps/call/CallWizard.tsx

@@ -10,10 +10,10 @@ import MicIcon from '@mui/icons-material/Mic';
 import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 import WarningIcon from '@mui/icons-material/Warning';
 
-import { navigateBack } from '~/common/routes';
-import { openLayoutPreferences } from '~/common/layout/store-applayout';
+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';
 
 
@@ -81,6 +81,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
   const [recognitionOverride, setRecognitionOverride] = React.useState(false);
 
   // external state
+  const { openPreferencesTab } = useOptimaLayout();
   const recognition = useCapabilityBrowserSpeechRecognition();
   const synthesis = useCapabilityElevenLabs();
   const chatIsEmpty = useChatStore(state => {
@@ -103,7 +104,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
   const handleOverrideRecognition = () => setRecognitionOverride(true);
 
   const handleConfigureElevenLabs = () => {
-    openLayoutPreferences(3);
+    openPreferencesTab(3);
   };
 
   const handleFinishButton = () => {
@@ -199,7 +200,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
 
       <IconButton
         size='lg' variant={allGood ? 'soft' : 'solid'} color={allGood ? 'success' : 'danger'}
-        onClick={handleFinishButton} sx={{ borderRadius: '50px' }}
+        onClick={handleFinishButton} sx={{ borderRadius: '50px', mr: 0.5 }}
       >
         {allGood ? <ArrowForwardIcon sx={{ fontSize: '1.5em' }} /> : <CloseIcon sx={{ fontSize: '1.5em' }} />}
       </IconButton>

src/apps/call/components/CallMessage.tsx

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

src/apps/chat/AppChat.tsx

@@ -1,272 +1,565 @@
 import * as React from 'react';
-import { shallow } from 'zustand/shallow';
+import ForkRightIcon from '@mui/icons-material/ForkRight';
+import { Panel, PanelGroup } from 'react-resizable-panels';
 
-import { CmdRunProdia } from '~/modules/prodia/prodia.client';
-import { CmdRunReact } from '~/modules/aifn/react/react';
+import { useTheme } from '@mui/joy';
+
+import { useCapabilityTextToImage } from '~/modules/t2i/t2i.client';
+import { DiagramConfig, DiagramsModal } from '~/modules/aifn/digrams/DiagramsModal';
 import { FlattenerModal } from '~/modules/aifn/flatten/FlattenerModal';
+import { TradeConfig, TradeModal } from '~/modules/trade/TradeModal';
 import { imaginePromptFromText } from '~/modules/aifn/imagine/imaginePromptFromText';
-import { useModelsStore } from '~/modules/llms/store-llms';
+import { speakText } from '~/modules/elevenlabs/elevenlabs.client';
+import { useChatLLM, useModelsStore } from '~/modules/llms/store-llms';
 
+import { Brand } from '~/common/app.config';
 import { ConfirmationModal } from '~/common/components/ConfirmationModal';
-import { createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
-import { useGlobalShortcut } from '~/common/components/useGlobalShortcut';
-import { useLayoutPluggable } from '~/common/layout/store-applayout';
+import { GlobalShortcutItem, ShortcutKeyName, useGlobalShortcuts } from '~/common/components/useGlobalShortcut';
+import { GoodPanelResizeHandler } 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 { useFolderStore } from '~/common/state/store-folders';
+import { useOptimaLayout, usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
-import { ChatDrawerItems } from './components/applayout/ChatDrawerItems';
+import type { ComposerOutputMultiPart } from './components/composer/composer.types';
+import { ChatDrawerContentMemo } from './components/applayout/ChatDrawerItems';
 import { ChatDropdowns } from './components/applayout/ChatDropdowns';
 import { ChatMenuItems } from './components/applayout/ChatMenuItems';
 import { ChatMessageList } from './components/ChatMessageList';
-import { ChatModeId } from './components/composer/store-composer';
-import { CmdAddRoleMessage, extractCommands } from './commands';
 import { Composer } from './components/composer/Composer';
 import { Ephemerals } from './components/Ephemerals';
+import { ScrollToBottom } from './components/scroll-to-bottom/ScrollToBottom';
+import { ScrollToBottomButton } from './components/scroll-to-bottom/ScrollToBottomButton';
+import { usePanesManager } from './components/panes/usePanesManager';
 
-import { TradeConfig, TradeModal } from './trade/TradeModal';
+import { extractChatCommand, findAllChatCommands } from './commands/commands.registry';
 import { runAssistantUpdatingState } from './editors/chat-stream';
+import { runBrowseUpdatingState } from './editors/browse-load';
 import { runImageGenerationUpdatingState } from './editors/image-generate';
 import { runReActUpdatingState } from './editors/react-tangent';
 
+/**
+ * Mode: how to treat the input from the Composer
+ */
+export type ChatModeId =
+  | 'generate-text'
+  | 'append-user'
+  | 'generate-image'
+  | 'generate-react';
 
-const SPECIAL_ID_ALL_CHATS = 'all-chats';
 
+const SPECIAL_ID_WIPE_ALL: DConversationId = 'wipe-chats';
 
 export function AppChat() {
 
   // state
   const [isMessageSelectionMode, setIsMessageSelectionMode] = React.useState(false);
+  const [diagramConfig, setDiagramConfig] = React.useState<DiagramConfig | null>(null);
   const [tradeConfig, setTradeConfig] = React.useState<TradeConfig | null>(null);
-  const [clearConfirmationId, setClearConfirmationId] = React.useState<string | null>(null);
-  const [deleteConfirmationId, setDeleteConfirmationId] = React.useState<string | null>(null);
-  const [flattenConversationId, setFlattenConversationId] = React.useState<string | null>(null);
+  const [clearConversationId, setClearConversationId] = React.useState<DConversationId | null>(null);
+  const [deleteConversationId, setDeleteConversationId] = React.useState<DConversationId | null>(null);
+  const [flattenConversationId, setFlattenConversationId] = React.useState<DConversationId | null>(null);
+  const showNextTitle = React.useRef(false);
+  const composerTextAreaRef = React.useRef<HTMLTextAreaElement>(null);
+  const [_selectedFolderId, setSelectedFolderId] = React.useState<string | null>(null);
 
   // external state
-  const { activeConversationId, isConversationEmpty, hasAnyContent, duplicateConversation, deleteAllConversations, setMessages, systemPurposeId, setAutoTitle } = useChatStore(state => {
-    const conversation = state.conversations.find(conversation => conversation.id === state.activeConversationId);
-    const isConversationEmpty = conversation ? !conversation.messages.length : true;
-    const hasAnyContent = state.conversations.length > 1 || !isConversationEmpty;
+  const theme = useTheme();
+
+  const { openLlmOptions } = useOptimaLayout();
+
+  const { chatLLM } = useChatLLM();
+
+  const {
+    chatPanes,
+    focusedConversationId,
+    navigateHistoryInFocusedPane,
+    openConversationInFocusedPane,
+    openConversationInSplitPane,
+    paneIndex,
+    duplicatePane,
+    removePane,
+    setFocusedPane,
+  } = usePanesManager();
+
+  const {
+    title: focusedChatTitle,
+    chatIdx: focusedChatNumber,
+    isChatEmpty: isFocusedChatEmpty,
+    areChatsEmpty,
+    newConversationId,
+    conversationsLength,
+    _remove_systemPurposeId: focusedSystemPurposeId,
+    prependNewConversation,
+    branchConversation,
+    deleteConversation,
+    wipeAllConversations,
+    setMessages,
+  } = useConversation(focusedConversationId);
+
+  const { mayWork: capabilityHasT2I } = useCapabilityTextToImage();
+
+  const { folderConversationsCount, selectedFolderId } = useFolderStore(state => {
+    const selectedFolderId = state.useFolders ? _selectedFolderId : null;
     return {
-      activeConversationId: state.activeConversationId,
-      isConversationEmpty,
-      hasAnyContent,
-      duplicateConversation: state.duplicateConversation,
-      deleteAllConversations: state.deleteAllConversations,
-      setMessages: state.setMessages,
-      systemPurposeId: conversation?.systemPurposeId ?? null,
-      setAutoTitle: state.setAutoTitle,
+      folderConversationsCount: selectedFolderId
+        ? state.folders.find(folder => folder.id === selectedFolderId)?.conversationIds.length || 0
+        : conversationsLength,
+      selectedFolderId,
     };
-  }, shallow);
+  });
 
+  // Window actions
 
-  const handleExecuteConversation = async (chatModeId: ChatModeId, conversationId: string, history: DMessage[]) => {
+  const panesConversationIDs = chatPanes.length > 0 ? chatPanes.map((pane) => pane.conversationId) : [null];
+  const isSplitPane = chatPanes.length > 1;
+
+  const setFocusedConversationId = React.useCallback((conversationId: DConversationId | null) => {
+    conversationId && openConversationInFocusedPane(conversationId);
+  }, [openConversationInFocusedPane]);
+
+  const openSplitConversationId = React.useCallback((conversationId: DConversationId | null) => {
+    conversationId && openConversationInSplitPane(conversationId);
+  }, [openConversationInSplitPane]);
+
+  const toggleSplitPane = React.useCallback(() => {
+    if (isSplitPane)
+      removePane(paneIndex ?? chatPanes.length - 1);
+    else
+      duplicatePane(paneIndex ?? chatPanes.length - 1);
+  }, [chatPanes.length, duplicatePane, isSplitPane, paneIndex, removePane]);
+
+  const handleNavigateHistory = React.useCallback((direction: 'back' | 'forward') => {
+    if (navigateHistoryInFocusedPane(direction))
+      showNextTitle.current = true;
+  }, [navigateHistoryInFocusedPane]);
+
+  React.useEffect(() => {
+    if (showNextTitle.current) {
+      showNextTitle.current = false;
+      const title = (focusedChatNumber >= 0 ? `#${focusedChatNumber + 1} · ` : '') + (focusedChatTitle || 'New Chat');
+      const id = addSnackbar({ key: 'focused-title', message: title, type: 'title' });
+      return () => removeSnackbar(id);
+    }
+  }, [focusedChatNumber, focusedChatTitle]);
+
+  // Execution
+
+  const _handleExecute = React.useCallback(async (chatModeId: ChatModeId, conversationId: DConversationId, history: DMessage[]) => {
     const { chatLLMId } = useModelsStore.getState();
     if (!chatModeId || !conversationId || !chatLLMId) return;
 
     // "/command ...": overrides the chat mode
     const lastMessage = history.length > 0 ? history[history.length - 1] : null;
     if (lastMessage?.role === 'user') {
-      const pieces = extractCommands(lastMessage.text);
-      if (pieces.length == 2 && pieces[0].type === 'cmd' && pieces[1].type === 'text') {
-        const [command, prompt] = [pieces[0].value, pieces[1].value];
-        if (CmdRunProdia.includes(command)) {
-          setMessages(conversationId, history);
-          return await runImageGenerationUpdatingState(conversationId, prompt);
-        }
-        if (CmdRunReact.includes(command) && chatLLMId) {
-          setMessages(conversationId, history);
-          return await runReActUpdatingState(conversationId, prompt, chatLLMId);
-        }
-        if (CmdAddRoleMessage.includes(command)) {
-          lastMessage.role = command.startsWith('/s') ? 'system' : command.startsWith('/a') ? 'assistant' : 'user';
-          lastMessage.sender = 'Bot';
-          lastMessage.text = prompt;
-          return setMessages(conversationId, history);
+      const chatCommand = extractChatCommand(lastMessage.text)[0];
+      if (chatCommand && chatCommand.type === 'cmd') {
+        switch (chatCommand.providerId) {
+          case 'ass-browse':
+            setMessages(conversationId, history);
+            return await runBrowseUpdatingState(conversationId, chatCommand.params!);
+
+          case 'ass-t2i':
+            setMessages(conversationId, history);
+            return await runImageGenerationUpdatingState(conversationId, chatCommand.params!);
+
+          case 'ass-react':
+            setMessages(conversationId, history);
+            return await runReActUpdatingState(conversationId, chatCommand.params!, chatLLMId);
+
+          case 'chat-alter':
+            Object.assign(lastMessage, {
+              role: chatCommand.command.startsWith('/s') ? 'system' : chatCommand.command.startsWith('/a') ? 'assistant' : 'user',
+              sender: 'Bot',
+              text: chatCommand.params || '',
+            } satisfies Partial<DMessage>);
+            return setMessages(conversationId, history);
+
+          case 'cmd-help':
+            const chatCommandsText = findAllChatCommands()
+              .map(cmd => ` - ${cmd.primary}` + (cmd.alternatives?.length ? ` (${cmd.alternatives.join(', ')})` : '') + `: ${cmd.description}`)
+              .join('\n');
+            const helpMessage = createDMessage('assistant', 'Available Chat Commands:\n' + chatCommandsText);
+            helpMessage.originLLM = Brand.Title.Base;
+            return setMessages(conversationId, [...history, helpMessage]);
         }
       }
     }
 
     // synchronous long-duration tasks, which update the state as they go
-    if (chatLLMId && systemPurposeId) {
+    if (chatLLMId && focusedSystemPurposeId) {
       switch (chatModeId) {
-        case 'immediate':
-        case 'immediate-follow-up':
-          return await runAssistantUpdatingState(conversationId, history, chatLLMId, systemPurposeId, true, chatModeId === 'immediate-follow-up');
-        case 'write-user':
+        case 'generate-text':
+          return await runAssistantUpdatingState(conversationId, history, chatLLMId, focusedSystemPurposeId);
+
+        case 'append-user':
           return setMessages(conversationId, history);
-        case 'react':
+
+        case 'generate-image':
+          if (!lastMessage?.text)
+            break;
+          // also add a 'fake' user message with the '/draw' command
+          setMessages(conversationId, history.map(message => message.id !== lastMessage.id ? message : {
+            ...message,
+            text: `/draw ${lastMessage.text}`,
+          }));
+          return await runImageGenerationUpdatingState(conversationId, lastMessage.text);
+
+        case 'generate-react':
           if (!lastMessage?.text)
             break;
           setMessages(conversationId, history);
           return await runReActUpdatingState(conversationId, lastMessage.text, chatLLMId);
-        case 'draw-imagine':
-        case 'draw-imagine-plus':
-          if (!lastMessage?.text)
-            break;
-          const imagePrompt = chatModeId == 'draw-imagine-plus'
-            ? await imaginePromptFromText(lastMessage.text) || 'An error sign.'
-            : lastMessage.text;
-          setMessages(conversationId, history.map(message => message.id !== lastMessage.id ? message : {
-            ...message,
-            text: `${CmdRunProdia[0]} ${imagePrompt}`,
-          }));
-          return await runImageGenerationUpdatingState(conversationId, imagePrompt);
       }
     }
 
     // ISSUE: if we're here, it means we couldn't do the job, at least sync the history
     console.log('handleExecuteConversation: issue running', chatModeId, conversationId, lastMessage);
     setMessages(conversationId, history);
-  };
+  }, [focusedSystemPurposeId, setMessages]);
 
-  const _findConversation = (conversationId: string) =>
-    conversationId ? useChatStore.getState().conversations.find(c => c.id === conversationId) ?? null : null;
-
-  const handleExecuteChatHistory = async (conversationId: string, history: DMessage[]) =>
-    await handleExecuteConversation('immediate', conversationId, history);
-
-  const handleImagineFromText = async (conversationId: string, messageText: string) => {
-    const conversation = _findConversation(conversationId);
-    if (conversation)
-      return await handleExecuteConversation('draw-imagine-plus', conversationId, [...conversation.messages, createDMessage('user', messageText)]);
-  };
-
-  const handleComposerNewMessage = async (chatModeId: ChatModeId, conversationId: string, userText: string) => {
-    const conversation = _findConversation(conversationId);
-    if (conversation)
-      return await handleExecuteConversation(chatModeId, conversationId, [...conversation.messages, createDMessage('user', userText)]);
-  };
-
-  const handleRegenerateAssistant = async () => {
-    const conversation = activeConversationId ? _findConversation(activeConversationId) : null;
-    if (conversation?.messages?.length) {
-      const lastMessage = conversation.messages[conversation.messages.length - 1];
-      if (lastMessage.role === 'assistant') {
-        const newMessages = [...conversation.messages];
-        newMessages.pop();
-        return await handleExecuteConversation('immediate', conversation.id, newMessages);
-      }
+  const handleComposerAction = (chatModeId: ChatModeId, conversationId: DConversationId, multiPartMessage: ComposerOutputMultiPart): boolean => {
+    // validate inputs
+    if (multiPartMessage.length !== 1 || multiPartMessage[0].type !== 'text-block') {
+      addSnackbar({
+        key: 'chat-composer-action-invalid',
+        message: 'Only a single text part is supported for now.',
+        type: 'issue',
+        overrides: {
+          autoHideDuration: 2000,
+        },
+      });
+      return false;
     }
+    const userText = multiPartMessage[0].text;
+
+    // find conversation
+    const conversation = getConversation(conversationId);
+    if (!conversation)
+      return false;
+
+    // start execution (async)
+    void _handleExecute(chatModeId, conversationId, [
+      ...conversation.messages,
+      createDMessage('user', userText),
+    ]);
+    return true;
   };
-  useGlobalShortcut('r', true, true, handleRegenerateAssistant);
 
+  const handleConversationExecuteHistory = async (conversationId: DConversationId, history: DMessage[]) =>
+    await _handleExecute('generate-text', conversationId, history);
 
-  const handleClearConversation = (conversationId: string) => setClearConfirmationId(conversationId);
-
-  const handleConfirmedClearConversation = () => {
-    if (clearConfirmationId) {
-      setMessages(clearConfirmationId, []);
-      setAutoTitle(clearConfirmationId, '');
-      setClearConfirmationId(null);
+  const handleMessageRegenerateLast = React.useCallback(async () => {
+    const focusedConversation = getConversation(focusedConversationId);
+    if (focusedConversation?.messages?.length) {
+      const lastMessage = focusedConversation.messages[focusedConversation.messages.length - 1];
+      return await _handleExecute('generate-text', focusedConversation.id, lastMessage.role === 'assistant'
+        ? focusedConversation.messages.slice(0, -1)
+        : [...focusedConversation.messages],
+      );
     }
+  }, [focusedConversationId, _handleExecute]);
+
+  const handleTextDiagram = async (diagramConfig: DiagramConfig | null) => setDiagramConfig(diagramConfig);
+
+  const handleTextImagine = async (conversationId: DConversationId, messageText: string) => {
+    const conversation = getConversation(conversationId);
+    if (!conversation)
+      return;
+    const imaginedPrompt = await imaginePromptFromText(messageText) || 'An error sign.';
+    return await _handleExecute('generate-image', conversationId, [
+      ...conversation.messages,
+      createDMessage('user', imaginedPrompt),
+    ]);
   };
 
-  const handleDeleteAllConversations = () => setDeleteConfirmationId(SPECIAL_ID_ALL_CHATS);
+  const handleTextSpeak = async (text: string) => {
+    await speakText(text);
+  };
+
+  // Chat actions
+
+  const handleConversationNew = React.useCallback(() => {
+
+    // activate an existing new conversation if present, or create another
+    const conversationId = newConversationId
+      ? 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);
+
+    // focus the composer
+    composerTextAreaRef.current?.focus();
+
+  }, [focusedSystemPurposeId, newConversationId, prependNewConversation, selectedFolderId, setFocusedConversationId]);
+
+  const handleConversationImportDialog = () => setTradeConfig({ dir: 'import' });
+
+  const handleConversationExport = (conversationId: DConversationId | null) => setTradeConfig({ dir: 'export', conversationId });
+
+  const handleConversationBranch = React.useCallback((conversationId: DConversationId, messageId: string | null): DConversationId | null => {
+    showNextTitle.current = true;
+    const branchedConversationId = branchConversation(conversationId, messageId);
+    addSnackbar({
+      key: 'branch-conversation',
+      message: 'Branch started.',
+      type: 'success',
+      overrides: {
+        autoHideDuration: 3000,
+        startDecorator: <ForkRightIcon />,
+      },
+    });
+    const branchInAltPanel = useUXLabsStore.getState().labsSplitBranching;
+    if (branchInAltPanel)
+      openSplitConversationId(branchedConversationId);
+    else
+      setFocusedConversationId(branchedConversationId);
+    return branchedConversationId;
+  }, [branchConversation, openSplitConversationId, setFocusedConversationId]);
+
+  const handleConversationFlatten = (conversationId: DConversationId) => setFlattenConversationId(conversationId);
+
+  const handleConfirmedClearConversation = React.useCallback(() => {
+    if (clearConversationId) {
+      setMessages(clearConversationId, []);
+      setClearConversationId(null);
+    }
+  }, [clearConversationId, setMessages]);
+
+  const handleConversationClear = (conversationId: DConversationId) => setClearConversationId(conversationId);
 
   const handleConfirmedDeleteConversation = () => {
-    if (deleteConfirmationId) {
-      if (deleteConfirmationId === SPECIAL_ID_ALL_CHATS) {
-        deleteAllConversations();
-      }// else
-      //  deleteConversation(deleteConfirmationId);
-      setDeleteConfirmationId(null);
+    if (deleteConversationId) {
+      let nextConversationId: DConversationId | null;
+      if (deleteConversationId === SPECIAL_ID_WIPE_ALL)
+        nextConversationId = wipeAllConversations(focusedSystemPurposeId ?? undefined, selectedFolderId);
+      else
+        nextConversationId = deleteConversation(deleteConversationId);
+      setFocusedConversationId(nextConversationId);
+      setDeleteConversationId(null);
     }
   };
 
+  const handleConversationsDeleteAll = () => setDeleteConversationId(SPECIAL_ID_WIPE_ALL);
 
-  const handleImportConversation = () => setTradeConfig({ dir: 'import' });
+  const handleConversationDelete = React.useCallback(
+    (conversationId: DConversationId, bypassConfirmation: boolean) => {
+      if (bypassConfirmation) setFocusedConversationId(deleteConversation(conversationId));
+      else setDeleteConversationId(conversationId);
+    },
+    [deleteConversation, setFocusedConversationId],
+  );
 
-  const handleExportConversation = (conversationId: string | null) => setTradeConfig({ dir: 'export', conversationId });
+  // Shortcuts
 
-  const handleFlattenConversation = (conversationId: string) => setFlattenConversationId(conversationId);
+  const handleOpenChatLlmOptions = React.useCallback(() => {
+    const { chatLLMId } = useModelsStore.getState();
+    if (!chatLLMId) return;
+    openLlmOptions(chatLLMId);
+  }, [openLlmOptions]);
 
+  const shortcuts = React.useMemo((): GlobalShortcutItem[] => [
+    ['o', true, true, false, handleOpenChatLlmOptions],
+    ['r', true, true, false, handleMessageRegenerateLast],
+    ['n', true, false, true, handleConversationNew],
+    ['b', true, false, true, () => isFocusedChatEmpty || (focusedConversationId && handleConversationBranch(focusedConversationId, null))],
+    ['x', true, false, true, () => isFocusedChatEmpty || (focusedConversationId && handleConversationClear(focusedConversationId))],
+    ['d', true, false, true, () => focusedConversationId && handleConversationDelete(focusedConversationId, false)],
+    [ShortcutKeyName.Left, true, false, true, () => handleNavigateHistory('back')],
+    [ShortcutKeyName.Right, true, false, true, () => handleNavigateHistory('forward')],
+  ], [focusedConversationId, handleConversationBranch, handleConversationDelete, handleConversationNew, handleMessageRegenerateLast, handleNavigateHistory, handleOpenChatLlmOptions, isFocusedChatEmpty]);
+  useGlobalShortcuts(shortcuts);
 
   // Pluggable ApplicationBar components
 
   const centerItems = React.useMemo(() =>
-      <ChatDropdowns conversationId={activeConversationId} />,
-    [activeConversationId],
+      <ChatDropdowns
+        conversationId={focusedConversationId}
+        isSplitPanes={isSplitPane}
+        onToggleSplitPanes={toggleSplitPane}
+      />,
+    [focusedConversationId, isSplitPane, toggleSplitPane],
   );
 
-  const drawerItems = React.useMemo(() =>
-      <ChatDrawerItems
-        conversationId={activeConversationId}
-        onImportConversation={handleImportConversation}
-        onDeleteAllConversations={handleDeleteAllConversations}
+  const drawerContent = React.useMemo(() =>
+      <ChatDrawerContentMemo
+        activeConversationId={focusedConversationId}
+        disableNewButton={isFocusedChatEmpty}
+        onConversationActivate={setFocusedConversationId}
+        onConversationDelete={handleConversationDelete}
+        onConversationExportDialog={handleConversationExport}
+        onConversationImportDialog={handleConversationImportDialog}
+        onConversationNew={handleConversationNew}
+        onConversationsDeleteAll={handleConversationsDeleteAll}
+        selectedFolderId={selectedFolderId}
+        setSelectedFolderId={setSelectedFolderId}
       />,
-    [activeConversationId],
+    [focusedConversationId, handleConversationDelete, handleConversationNew, isFocusedChatEmpty, selectedFolderId, setFocusedConversationId],
   );
 
   const menuItems = React.useMemo(() =>
       <ChatMenuItems
-        conversationId={activeConversationId} isConversationEmpty={isConversationEmpty} hasConversations={hasAnyContent}
-        isMessageSelectionMode={isMessageSelectionMode} setIsMessageSelectionMode={setIsMessageSelectionMode}
-        onClearConversation={handleClearConversation}
-        onDuplicateConversation={duplicateConversation}
-        onExportConversation={handleExportConversation}
-        onFlattenConversation={handleFlattenConversation}
+        conversationId={focusedConversationId}
+        hasConversations={!areChatsEmpty}
+        isConversationEmpty={isFocusedChatEmpty}
+        isMessageSelectionMode={isMessageSelectionMode}
+        setIsMessageSelectionMode={setIsMessageSelectionMode}
+        onConversationBranch={handleConversationBranch}
+        onConversationClear={handleConversationClear}
+        onConversationExport={handleConversationExport}
+        onConversationFlatten={handleConversationFlatten}
       />,
-    [activeConversationId, duplicateConversation, hasAnyContent, isConversationEmpty, isMessageSelectionMode],
+    [areChatsEmpty, focusedConversationId, handleConversationBranch, isFocusedChatEmpty, isMessageSelectionMode],
   );
 
-  useLayoutPluggable(centerItems, drawerItems, menuItems);
+  usePluggableOptimaLayout(drawerContent, centerItems, menuItems, 'AppChat');
 
   return <>
 
-    <ChatMessageList
-      conversationId={activeConversationId}
-      isMessageSelectionMode={isMessageSelectionMode} setIsMessageSelectionMode={setIsMessageSelectionMode}
-      onExecuteChatHistory={handleExecuteChatHistory}
-      onImagineFromText={handleImagineFromText}
-      sx={{
-        flexGrow: 1,
-        backgroundColor: 'background.level1',
-        overflowY: 'auto', // overflowY: 'hidden'
-        minHeight: 96,
-      }} />
+    <PanelGroup
+      direction='horizontal'
+      id='app-chat-panels'
+    >
 
-    <Ephemerals
-      conversationId={activeConversationId}
-      sx={{
-        // flexGrow: 0.1,
-        flexShrink: 0.5,
-        overflowY: 'auto',
-        minHeight: 64,
-      }} />
+      {panesConversationIDs.map((_conversationId, idx, panels) =>
+        <React.Fragment key={`chat-pane-${idx}-${panels.length}-${_conversationId}`}>
+          <Panel
+            id={'chat-pane-' + _conversationId}
+            order={idx}
+            collapsible
+            defaultSize={panels.length > 0 ? Math.round(100 / panels.length) : undefined}
+            minSize={20}
+            onClick={(event) => {
+              const setFocus = chatPanes.length < 2 || !event.altKey;
+              setFocusedPane(setFocus ? idx : -1);
+            }}
+            onCollapse={() => setTimeout(() => removePane(idx), 50)}
+            style={{
+              // for anchoring the scroll button in place
+              position: 'relative',
+              // border only for active pane (if two or more panes)
+              ...(panesConversationIDs.length < 2
+                ? {}
+                : (_conversationId === focusedConversationId)
+                  ? { border: `2px solid ${theme.palette.primary.solidBg}` }
+                  : { border: `2px solid ${theme.palette.background.level1}` }),
+            }}
+          >
+
+            <ScrollToBottom
+              bootToBottom
+              stickToBottom
+              sx={{
+                // allows the content to be scrolled (all browsers)
+                overflowY: 'auto',
+                // actually make sure this scrolls & fills
+                height: '100%',
+              }}
+            >
+
+              <ChatMessageList
+                conversationId={_conversationId}
+                capabilityHasT2I={capabilityHasT2I}
+                chatLLMContextTokens={chatLLM?.contextTokens ?? null}
+                isMessageSelectionMode={isMessageSelectionMode}
+                setIsMessageSelectionMode={setIsMessageSelectionMode}
+                onConversationBranch={handleConversationBranch}
+                onConversationExecuteHistory={handleConversationExecuteHistory}
+                onTextDiagram={handleTextDiagram}
+                onTextImagine={handleTextImagine}
+                onTextSpeak={handleTextSpeak}
+                sx={{
+                  backgroundColor: themeBgApp,
+                  minHeight: '100%', // ensures filling of the blank space on newer chats
+                }}
+              />
+
+              <Ephemerals
+                conversationId={_conversationId}
+                sx={{
+                  // TODO: Fixme post panels?
+                  // flexGrow: 0.1,
+                  flexShrink: 0.5,
+                  overflowY: 'auto',
+                  minHeight: 64,
+                }}
+              />
+
+              {/* Visibility and actions are handled via Context */}
+              <ScrollToBottomButton />
+            </ScrollToBottom>
+          </Panel>
+
+          {/* Panel Separators & Resizers */}
+          {idx < panels.length - 1 && <GoodPanelResizeHandler />}
+
+        </React.Fragment>)}
+
+    </PanelGroup>
 
     <Composer
-      conversationId={activeConversationId} messageId={null}
-      isDeveloperMode={systemPurposeId === 'Developer'}
-      onNewMessage={handleComposerNewMessage}
+      chatLLM={chatLLM}
+      composerTextAreaRef={composerTextAreaRef}
+      conversationId={focusedConversationId}
+      capabilityHasT2I={capabilityHasT2I}
+      isDeveloperMode={focusedSystemPurposeId === 'Developer'}
+      onAction={handleComposerAction}
+      onTextImagine={handleTextImagine}
       sx={{
         zIndex: 21, // position: 'sticky', bottom: 0,
-        backgroundColor: 'background.surface',
+        backgroundColor: themeBgAppChatComposer,
         borderTop: `1px solid`,
         borderTopColor: 'divider',
         p: { xs: 1, md: 2 },
-      }} />
+      }}
+    />
 
-
-    {/* Import / Export  */}
-    {!!tradeConfig && <TradeModal config={tradeConfig} onClose={() => setTradeConfig(null)} />}
+    {/* Diagrams */}
+    {!!diagramConfig && <DiagramsModal config={diagramConfig} onClose={() => setDiagramConfig(null)} />}
 
     {/* Flatten */}
-    {!!flattenConversationId && <FlattenerModal conversationId={flattenConversationId} onClose={() => setFlattenConversationId(null)} />}
+    {!!flattenConversationId && (
+      <FlattenerModal
+        conversationId={flattenConversationId}
+        onConversationBranch={handleConversationBranch}
+        onClose={() => setFlattenConversationId(null)}
+      />
+    )}
+
+    {/* Import / Export  */}
+    {!!tradeConfig && (
+      <TradeModal
+        config={tradeConfig}
+        onConversationActivate={setFocusedConversationId}
+        onClose={() => setTradeConfig(null)}
+      />
+    )}
 
     {/* [confirmation] Reset Conversation */}
-    {!!clearConfirmationId && <ConfirmationModal
-      open onClose={() => setClearConfirmationId(null)} onPositive={handleConfirmedClearConversation}
-      confirmationText={'Are you sure you want to discard all the messages?'} positiveActionText={'Clear conversation'}
-    />}
+    {!!clearConversationId && (
+      <ConfirmationModal
+        open
+        onClose={() => setClearConversationId(null)}
+        onPositive={handleConfirmedClearConversation}
+        confirmationText='Are you sure you want to discard all messages?'
+        positiveActionText='Clear conversation'
+      />
+    )}
 
     {/* [confirmation] Delete All */}
-    {!!deleteConfirmationId && <ConfirmationModal
-      open onClose={() => setDeleteConfirmationId(null)} onPositive={handleConfirmedDeleteConversation}
-      confirmationText={deleteConfirmationId === SPECIAL_ID_ALL_CHATS
-        ? 'Are you absolutely sure you want to delete ALL conversations? This action cannot be undone.'
+    {!!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 sure you want to delete this conversation?'}
-      positiveActionText={deleteConfirmationId === SPECIAL_ID_ALL_CHATS
-        ? 'Yes, delete all'
+      positiveActionText={deleteConversationId === SPECIAL_ID_WIPE_ALL
+        ? `Yes, delete all ${folderConversationsCount} conversations`
         : 'Delete conversation'}
     />}
-
   </>;
 }

src/apps/chat/commands.ts

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

src/apps/chat/commands/CommandsAlter.tsx

@@ -0,0 +1,17 @@
+import type { ICommandsProvider } from './ICommandsProvider';
+
+export const CommandsAlter: ICommandsProvider = {
+  id: 'chat-alter',
+  rank: 20,
+
+  getCommands: () => [{
+    primary: '/assistant',
+    alternatives: ['/a'],
+    description: 'Injects assistant response',
+  }, {
+    primary: '/system',
+    alternatives: ['/s'],
+    description: 'Injects system message',
+  }],
+
+};

src/apps/chat/commands/CommandsBrowse.tsx

@@ -0,0 +1,15 @@
+import LanguageIcon from '@mui/icons-material/Language';
+
+import type { ICommandsProvider } from './ICommandsProvider';
+
+export const CommandsBrowse: ICommandsProvider = {
+  id: 'ass-browse',
+  rank: 25,
+
+  getCommands: () => [{
+    primary: '/browse',
+    description: 'Assistant will download the web page',
+    Icon: LanguageIcon,
+  }],
+
+};

src/apps/chat/commands/CommandsDraw.tsx

@@ -0,0 +1,16 @@
+import FormatPaintIcon from '@mui/icons-material/FormatPaint';
+
+import type { ICommandsProvider } from './ICommandsProvider';
+
+export const CommandsDraw: ICommandsProvider = {
+  id: 'ass-t2i',
+  rank: 10,
+
+  getCommands: () => [{
+    primary: '/draw',
+    alternatives: ['/imagine', '/img'],
+    description: 'Generate an image from text',
+    Icon: FormatPaintIcon,
+  }],
+
+};

src/apps/chat/commands/CommandsHelp.tsx

@@ -0,0 +1,14 @@
+import type { ICommandsProvider } from './ICommandsProvider';
+
+export const CommandsHelp: ICommandsProvider = {
+  id: 'cmd-help',
+  rank: 99,
+
+  getCommands: () => [{
+    primary: '/help',
+    alternatives: ['/?'],
+    noArgs: true,
+    description: 'Display this list of commands',
+  }],
+
+};

src/apps/chat/commands/CommandsReact.tsx

@@ -0,0 +1,15 @@
+import PsychologyIcon from '@mui/icons-material/Psychology';
+
+import type { ICommandsProvider } from './ICommandsProvider';
+
+export const CommandsReact: ICommandsProvider = {
+  id: 'ass-react',
+  rank: 15,
+
+  getCommands: () => [{
+    primary: '/react',
+    description: 'Use the AI ReAct strategy to answer your query (as sidebar)',
+    Icon: PsychologyIcon,
+  }],
+
+};

src/apps/chat/commands/ICommandsProvider.ts

@@ -0,0 +1,24 @@
+import type { FunctionComponent } from 'react';
+import type { CommandsProviderId } from './commands.registry';
+
+
+export interface ChatCommand {
+  primary: string; // The primary command
+  alternatives?: string[]; // Alternative commands
+  noArgs?: boolean; // Whether the command requires arguments
+  description: string; // Description of what the command does
+  // usage?: string; // Example of how to use the command
+  Icon?: FunctionComponent; // Icon to display next to the command
+}
+
+
+export interface ICommandsProvider {
+  id: CommandsProviderId;   // Unique identifier for the command provider
+  rank: number;             // Rank of the provider, used to sort the providers in the UI
+
+  // Function to get commands with their alternatives and details
+  getCommands: () => ChatCommand[];
+
+  // Function to execute a command with optional parameters
+  // executeCommand: (command: string, params?: string[]) => Promise<boolean>;
+}

src/apps/chat/commands/commands.registry.ts

@@ -0,0 +1,67 @@
+import { ChatCommand, ICommandsProvider } from './ICommandsProvider';
+
+import { CommandsAlter } from './CommandsAlter';
+import { CommandsBrowse } from './CommandsBrowse';
+import { CommandsDraw } from './CommandsDraw';
+import { CommandsHelp } from './CommandsHelp';
+import { CommandsReact } from './CommandsReact';
+
+
+export type CommandsProviderId = 'ass-browse' | 'ass-t2i' | 'ass-react' | 'chat-alter' | 'cmd-help';
+
+type TextCommandPiece =
+  | { type: 'text'; value: string; }
+  | { type: 'cmd'; providerId: CommandsProviderId, command: string; params?: string, isError?: boolean };
+
+
+const ChatCommandsProviders: Record<CommandsProviderId, ICommandsProvider> = {
+  'ass-browse': CommandsBrowse,
+  'ass-react': CommandsReact,
+  'ass-t2i': CommandsDraw,
+  'chat-alter': CommandsAlter,
+  'cmd-help': CommandsHelp,
+};
+
+export function findAllChatCommands(): ChatCommand[] {
+  return Object.values(ChatCommandsProviders)
+    .sort((a, b) => a.rank - b.rank)
+    .map(p => p.getCommands())
+    .flat();
+}
+
+export function extractChatCommand(input: string): TextCommandPiece[] {
+  const inputTrimmed = input.trim();
+
+  // quick exit: command does not start with '/'
+  if (!inputTrimmed.startsWith('/'))
+    return [{ type: 'text', value: input }];
+
+  // Find the first space to separate the command from its parameters (if any)
+  const firstSpaceIndex = inputTrimmed.indexOf(' ');
+  const potentialCommand = inputTrimmed.substring(0, firstSpaceIndex >= 0 ? firstSpaceIndex : inputTrimmed.length);
+
+  // Check if the potential command is an actual command
+  for (const provider of Object.values(ChatCommandsProviders)) {
+    for (const cmd of provider.getCommands()) {
+      if (cmd.primary === potentialCommand || cmd.alternatives?.includes(potentialCommand)) {
+
+        // command needs arguments: take the rest of the input as parameters
+        if (cmd.noArgs !== true) {
+          const params = firstSpaceIndex >= 0 ? inputTrimmed.substring(firstSpaceIndex + 1) : '';
+          return [{ type: 'cmd', providerId: provider.id, command: potentialCommand, params: params || undefined, isError: !params || undefined }];
+        }
+
+        // command without arguments, treat any text after as a separate text piece
+        const pieces: TextCommandPiece[] = [{ type: 'cmd', providerId: provider.id, command: potentialCommand, params: undefined }];
+        const textAfterCommand = firstSpaceIndex >= 0 ? inputTrimmed.substring(firstSpaceIndex + 1) : '';
+        if (textAfterCommand)
+          pieces.push({ type: 'text', value: textAfterCommand });
+        return pieces;
+
+      }
+    }
+  }
+
+  // No command found, return the entire input as text
+  return [{ type: 'text', value: input }];
+}

src/apps/chat/components/ChatMessageList.tsx

@@ -1,215 +1,239 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { Box, List, Sheet, Switch, Tooltip, Typography } from '@mui/joy';
+import { Box, List } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 
-import { useChatLLM } from '~/modules/llms/store-llms';
+import type { DiagramConfig } from '~/modules/aifn/digrams/DiagramsModal';
 
-import { createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
-import { useUIPreferencesStore } from '~/common/state/store-ui';
+import { ShortcutKeyName, useGlobalShortcut } from '~/common/components/useGlobalShortcut';
+import { InlineError } from '~/common/components/InlineError';
+import { createDMessage, DConversationId, DMessage, getConversation, useChatStore } from '~/common/state/store-chats';
+import { useCapabilityElevenLabs } from '~/common/components/useCapabilities';
+import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 
-import { ChatMessage } from './message/ChatMessage';
+import { ChatMessageMemo } from './message/ChatMessage';
 import { CleanerMessage, MessagesSelectionHeader } from './message/CleanerMessage';
 import { PersonaSelector } from './persona-selector/PersonaSelector';
-
-
-/**
- * [Experimental] A panel with tools for the chat
- */
-function ToolsPanel(props: { showDiff: boolean, setShowDiff: (showDiff: boolean) => void }) {
-  return (
-    <Sheet
-      variant='outlined' invertedColors
-      sx={{
-        position: 'fixed', top: 64, left: 8, zIndex: 101,
-        boxShadow: 'md', borderRadius: '100px',
-        p: 2,
-        display: 'flex', flexFlow: 'row wrap', alignItems: 'center', justifyContent: 'space-between', gap: 2,
-      }}
-    >
-      <Typography level='title-md'>
-        🪛
-      </Typography>
-      <Tooltip title='Highlight differences'>
-        <Switch
-          checked={props.showDiff} onChange={() => props.setShowDiff(!props.showDiff)}
-          startDecorator={<Typography level='title-md'>Diff</Typography>}
-        />
-      </Tooltip>
-    </Sheet>
-  );
-}
+import { useChatShowSystemMessages } from '../store-app-chat';
+import { useScrollToBottom } from './scroll-to-bottom/useScrollToBottom';
 
 
 /**
  * A list of ChatMessages
  */
 export function ChatMessageList(props: {
-  conversationId: string | null,
-  showTools?: boolean,
+  conversationId: DConversationId | null,
+  capabilityHasT2I: boolean,
+  chatLLMContextTokens: number | null,
   isMessageSelectionMode: boolean, setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
-  onExecuteChatHistory: (conversationId: string, history: DMessage[]) => void,
-  onImagineFromText: (conversationId: string, userText: string) => Promise<any>,
-  sx?: SxProps
+  onConversationBranch: (conversationId: DConversationId, messageId: string) => void,
+  onConversationExecuteHistory: (conversationId: DConversationId, history: DMessage[]) => void,
+  onTextDiagram: (diagramConfig: DiagramConfig | null) => Promise<any>,
+  onTextImagine: (conversationId: DConversationId, selectedText: string) => Promise<any>,
+  onTextSpeak: (selectedText: string) => Promise<any>,
+  sx?: SxProps,
 }) {
+
   // state
-  const [diffing, setDiffing] = React.useState<boolean>(false);
+  const [isImagining, setIsImagining] = React.useState(false);
+  const [isSpeaking, setIsSpeaking] = React.useState(false);
   const [selectedMessages, setSelectedMessages] = React.useState<Set<string>>(new Set());
 
   // external state
-  const { experimentalLabs, showSystemMessages } = useUIPreferencesStore(state => ({
-    experimentalLabs: state.experimentalLabs,
-    showSystemMessages: state.showSystemMessages,
-  }));
-  const { messages, editMessage, deleteMessage, historyTokenCount } = useChatStore(state => {
+  const { notifyBooting } = useScrollToBottom();
+  const { openPreferencesTab } = useOptimaLayout();
+  const [showSystemMessages] = useChatShowSystemMessages();
+  const { conversationMessages, historyTokenCount, editMessage, deleteMessage, setMessages } = useChatStore(state => {
     const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
     return {
-      messages: conversation ? conversation.messages : [],
-      editMessage: state.editMessage, deleteMessage: state.deleteMessage,
+      conversationMessages: conversation ? conversation.messages : [],
       historyTokenCount: conversation ? conversation.tokenCount : 0,
+      deleteMessage: state.deleteMessage,
+      editMessage: state.editMessage,
+      setMessages: state.setMessages,
     };
   }, shallow);
-  const { chatLLM } = useChatLLM();
+  const { mayWork: isSpeakable } = useCapabilityElevenLabs();
 
-  const handleMessageDelete = (messageId: string) =>
-    props.conversationId && deleteMessage(props.conversationId, messageId);
+  // derived state
+  const { conversationId, capabilityHasT2I, onConversationBranch, onConversationExecuteHistory, onTextDiagram, onTextImagine, onTextSpeak } = props;
 
-  const handleMessageEdit = (messageId: string, newText: string) =>
-    props.conversationId && editMessage(props.conversationId, messageId, { text: newText }, true);
 
-  const handleImagineFromText = (messageText: string): Promise<any> => {
-    if (props.conversationId)
-      return props.onImagineFromText(props.conversationId, messageText);
-    else
-      return Promise.reject('No conversation');
-  };
-
-  const handleRestartFromMessage = (messageId: string, offset: number) => {
-    const truncatedHistory = messages.slice(0, messages.findIndex(m => m.id === messageId) + offset + 1);
-    props.conversationId && props.onExecuteChatHistory(props.conversationId, truncatedHistory);
-  };
+  // text actions
 
   const handleRunExample = (text: string) =>
-    props.conversationId && props.onExecuteChatHistory(props.conversationId, [...messages, createDMessage('user', text)]);
+    conversationId && onConversationExecuteHistory(conversationId, [...conversationMessages, createDMessage('user', text)]);
 
 
-  // hide system messages if the user chooses so
-  // NOTE: reverse is because we'll use flexDirection: 'column-reverse' to auto-snap-to-bottom
-  const filteredMessages = messages.filter(m => m.role !== 'system' || showSystemMessages).reverse();
+  // message menu methods proxy
 
-  // when there are no messages, show the purpose selector
-  if (!filteredMessages.length)
-    return props.conversationId ? (
-      <Box sx={props.sx || {}}>
-        <PersonaSelector conversationId={props.conversationId} runExample={handleRunExample} />
-      </Box>
-    ) : null;
+  const handleConversationBranch = React.useCallback((messageId: string) => {
+    conversationId && onConversationBranch(conversationId, messageId);
+  }, [conversationId, onConversationBranch]);
+
+  const handleConversationRestartFrom = React.useCallback((messageId: string, offset: number) => {
+    const messages = getConversation(conversationId)?.messages;
+    if (messages) {
+      const truncatedHistory = messages.slice(0, messages.findIndex(m => m.id === messageId) + offset + 1);
+      conversationId && onConversationExecuteHistory(conversationId, truncatedHistory);
+    }
+  }, [conversationId, onConversationExecuteHistory]);
+
+  const handleConversationTruncate = React.useCallback((messageId: string) => {
+    const messages = getConversation(conversationId)?.messages;
+    if (conversationId && messages) {
+      const truncatedHistory = messages.slice(0, messages.findIndex(m => m.id === messageId) + 1);
+      setMessages(conversationId, truncatedHistory);
+    }
+  }, [conversationId, setMessages]);
+
+  const handleMessageDelete = React.useCallback((messageId: string) => {
+    conversationId && deleteMessage(conversationId, messageId);
+  }, [conversationId, deleteMessage]);
+
+  const handleMessageEdit = React.useCallback((messageId: string, newText: string) => {
+    conversationId && editMessage(conversationId, messageId, { text: newText }, true);
+  }, [conversationId, editMessage]);
+
+  const handleTextDiagram = React.useCallback(async (messageId: string, text: string) => {
+    conversationId && await onTextDiagram({ conversationId: conversationId, messageId, text });
+  }, [conversationId, onTextDiagram]);
+
+  const handleTextImagine = React.useCallback(async (text: string) => {
+    if (!capabilityHasT2I)
+      return openPreferencesTab(2);
+    if (conversationId) {
+      setIsImagining(true);
+      await onTextImagine(conversationId, text);
+      setIsImagining(false);
+    }
+  }, [capabilityHasT2I, conversationId, onTextImagine, openPreferencesTab]);
+
+  const handleTextSpeak = React.useCallback(async (text: string) => {
+    if (!isSpeakable)
+      return openPreferencesTab(3);
+    setIsSpeaking(true);
+    await onTextSpeak(text);
+    setIsSpeaking(false);
+  }, [isSpeakable, onTextSpeak, openPreferencesTab]);
 
 
-  const handleToggleSelected = (messageId: string, selected: boolean) => {
+  // operate on the local selection set
+
+  const handleSelectAll = (selected: boolean) => {
+    const newSelected = new Set<string>();
+    if (selected)
+      for (const message of conversationMessages)
+        newSelected.add(message.id);
+    setSelectedMessages(newSelected);
+  };
+
+  const handleSelectMessage = (messageId: string, selected: boolean) => {
     const newSelected = new Set(selectedMessages);
     selected ? newSelected.add(messageId) : newSelected.delete(messageId);
     setSelectedMessages(newSelected);
   };
 
-  const handleSelectAllMessages = (selected: boolean) => {
-    const newSelected = new Set<string>();
-    if (selected)
-      for (const message of messages)
-        newSelected.add(message.id);
-    setSelectedMessages(newSelected);
-  };
-
-  const handleDeleteSelectedMessages = () => {
-    if (props.conversationId)
+  const handleSelectionDelete = () => {
+    if (conversationId)
       for (const selectedMessage of selectedMessages)
-        deleteMessage(props.conversationId, selectedMessage);
+        deleteMessage(conversationId, selectedMessage);
     setSelectedMessages(new Set());
   };
 
-
-  // scrollbar style
-  // const scrollbarStyle: SxProps = {
-  //   '&::-webkit-scrollbar': {
-  //     md: {
-  //       width: 8,
-  //       background: theme.palette.neutral.plainHoverBg,
-  //     },
-  //   },
-  //   '&::-webkit-scrollbar-thumb': {
-  //     background: theme.palette.neutral.solidBg,
-  //     borderRadius: 6,
-  //   },
-  //   '&::-webkit-scrollbar-thumb:hover': {
-  //     background: theme.palette.neutral.solidHoverBg,
-  //   },
-  // };
+  useGlobalShortcut(props.isMessageSelectionMode && ShortcutKeyName.Esc, false, false, false, () => {
+    props.setIsMessageSelectionMode(false);
+  });
 
 
-  // pass the diff text to most recent assistant message, once done
-  const showTextTools = !!props.showTools || experimentalLabs;
-  let diffMessage: DMessage | undefined;
-  let diffText: string | undefined;
-  if (diffing && showTextTools) {
-    const [msgB, msgA] = filteredMessages.filter(m => m.role === 'assistant');
-    if (!msgB.typing && msgB?.text && msgA?.text) {
+  // text-diff functionality, find the messages to diff with
+
+  const { diffMessage, diffText } = 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 / 2 && lenB > lenA / 2) {
-        diffMessage = msgB;
-        diffText = textA;
-      }
+      if (lenA > 80 && lenB > 80 && lenA > lenB / 3 && lenB > lenA / 3)
+        return { diffMessage: msgB, diffText: textA };
     }
-  }
+    return { diffMessage: undefined, diffText: undefined };
+  }, [conversationMessages]);
 
 
+  // scroll to the very bottom of a new chat
+  React.useEffect(() => {
+    if (conversationId)
+      notifyBooting();
+  }, [conversationId, notifyBooting]);
+
+
+  // no content: show the persona selector
+
+  const filteredMessages = conversationMessages
+    .filter(m => m.role !== 'system' || showSystemMessages); // hide the System message if the user choses to
+
+
+  if (!filteredMessages.length)
+    return (
+      <Box sx={{ ...props.sx }}>
+        {conversationId
+          ? <PersonaSelector conversationId={conversationId} runExample={handleRunExample} />
+          : <InlineError severity='info' error='Select a conversation' sx={{ m: 2 }} />}
+      </Box>
+    );
+
   return (
     <List sx={{
       p: 0, ...(props.sx || {}),
       // this makes sure that the the window is scrolled to the bottom (column-reverse)
-      display: 'flex', flexDirection: 'column-reverse',
+      display: 'flex',
+      flexDirection: 'column',
       // fix for the double-border on the last message (one by the composer, one to the bottom of the message)
-      marginBottom: '-1px',
+      // marginBottom: '-1px',
     }}>
 
-      {filteredMessages.map((message, idx) =>
+      {props.isMessageSelectionMode && (
+        <MessagesSelectionHeader
+          hasSelected={selectedMessages.size > 0}
+          sumTokens={historyTokenCount}
+          onClose={() => props.setIsMessageSelectionMode(false)}
+          onSelectAll={handleSelectAll}
+          onDeleteMessages={handleSelectionDelete}
+        />
+      )}
+
+      {filteredMessages.map((message, idx, { length: count }) =>
         props.isMessageSelectionMode ? (
 
           <CleanerMessage
-            key={'sel-' + message.id} message={message}
-            isBottom={idx === 0} remainingTokens={(chatLLM ? chatLLM.contextTokens : 0) - historyTokenCount}
-            selected={selectedMessages.has(message.id)} onToggleSelected={handleToggleSelected}
+            key={'sel-' + message.id}
+            message={message}
+            remainingTokens={props.chatLLMContextTokens ? (props.chatLLMContextTokens - historyTokenCount) : undefined}
+            selected={selectedMessages.has(message.id)} onToggleSelected={handleSelectMessage}
           />
 
         ) : (
 
-          <ChatMessage
-            key={'msg-' + message.id} message={message} diffText={message === diffMessage ? diffText : undefined}
-            isBottom={idx === 0}
-            onMessageDelete={() => handleMessageDelete(message.id)}
-            onMessageEdit={newText => handleMessageEdit(message.id, newText)}
-            onMessageRunFrom={(offset: number) => handleRestartFromMessage(message.id, offset)}
-            onImagine={handleImagineFromText}
+          <ChatMessageMemo
+            key={'msg-' + message.id}
+            message={message}
+            diffPreviousText={message === diffMessage ? diffText : undefined}
+            isBottom={idx === count - 1}
+            isImagining={isImagining} isSpeaking={isSpeaking}
+            onConversationBranch={handleConversationBranch}
+            onConversationRestartFrom={handleConversationRestartFrom}
+            onConversationTruncate={handleConversationTruncate}
+            onMessageDelete={handleMessageDelete}
+            onMessageEdit={handleMessageEdit}
+            onTextDiagram={handleTextDiagram}
+            onTextImagine={handleTextImagine}
+            onTextSpeak={handleTextSpeak}
           />
 
         ),
       )}
 
-      {showTextTools && <ToolsPanel showDiff={diffing} setShowDiff={setDiffing} />}
-
-      {/* Header at the bottom because of 'row-reverse' */}
-      {props.isMessageSelectionMode && (
-        <MessagesSelectionHeader
-          hasSelected={selectedMessages.size > 0}
-          isBottom={filteredMessages.length === 0}
-          sumTokens={historyTokenCount}
-          onClose={() => props.setIsMessageSelectionMode(false)}
-          onSelectAll={handleSelectAllMessages}
-          onDeleteMessages={handleDeleteSelectedMessages}
-        />
-      )}
-
     </List>
   );
 }

src/apps/chat/components/Ephemerals.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { Box, Grid, IconButton, Sheet, Stack, styled, Typography, useTheme } from '@mui/joy';
+import { Box, Grid, IconButton, Sheet, styled, Typography } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 import CloseIcon from '@mui/icons-material/Close';
 
-import { DEphemeral, useChatStore } from '~/common/state/store-chats';
+import { DConversationId, DEphemeral, useChatStore } from '~/common/state/store-chats';
+import { lineHeightChatText } from '~/common/app.theme';
 
 
 const StateLine = styled(Typography)(({ theme }) => ({
@@ -15,7 +16,7 @@ const StateLine = styled(Typography)(({ theme }) => ({
   fontSize: theme.fontSize.xs,
   fontFamily: theme.fontFamily.code,
   marginLeft: theme.spacing(1),
-  lineHeight: 2,
+  lineHeight: lineHeightChatText,
 }));
 
 function isPrimitive(value: any): boolean {
@@ -32,8 +33,6 @@ function PrimitiveRender({ name, value }: { name: string, value: string | number
     return <StateLine><b>{name}</b>: <b>{value}</b></StateLine>;
   else if (typeof value === 'boolean')
     return <StateLine><b>{name}</b>: <b>{value ? 'true' : 'false'}</b></StateLine>;
-  else if (typeof value === 'symbol')
-    return <StateLine><b>{name}</b>: <b>{value.toString()}</b></StateLine>;
   else
     return <StateLine><b>{name}</b>: unknown?</StateLine>;
 }
@@ -54,11 +53,11 @@ function StateRenderer(props: { state: object }) {
   const entries = Object.entries(props.state);
 
   return (
-    <Stack>
-      <Typography level='body-sm' sx={{ mb: 1 }}>
-        Internal State
+    <Box>
+      <Typography fontSize='smaller' sx={{ mb: 1 }}>
+        ## Internal State
       </Typography>
-      <Sheet>
+      <Sheet sx={{ p: 1 }}>
         {!entries && <Typography level='body-sm'>No state variables</Typography>}
         {entries.map(([key, value]) =>
           isPrimitive(value)
@@ -70,13 +69,12 @@ function StateRenderer(props: { state: object }) {
                 : <Typography key={'state-' + key} level='body-sm'>{key}: {value}</Typography>,
         )}
       </Sheet>
-    </Stack>
+    </Box>
   );
 }
 
 
 function EphemeralItem({ conversationId, ephemeral }: { conversationId: string, ephemeral: DEphemeral }) {
-  const theme = useTheme();
   return <Box
     sx={{
       p: { xs: 1, md: 2 },
@@ -86,8 +84,8 @@ function EphemeralItem({ conversationId, ephemeral }: { conversationId: string,
     }}>
 
     {/* Title */}
-    {ephemeral.title && <Typography>
-      {ephemeral.title} <b>Development Tools</b>
+    {ephemeral.title && <Typography level='title-sm' sx={{ mb: 1.5 }}>
+      {ephemeral.title} Development Tools
     </Typography>}
 
     {/* Vertical | split */}
@@ -95,7 +93,7 @@ function EphemeralItem({ conversationId, ephemeral }: { conversationId: string,
 
       {/* Left pane (console) */}
       <Grid xs={12} md={ephemeral.state ? 6 : 12}>
-        <Typography fontSize='smaller' sx={{ overflowWrap: 'anywhere', whiteSpace: 'break-spaces', lineHeight: 1.75 }}>
+        <Typography fontSize='smaller' sx={{ overflowWrap: 'anywhere', whiteSpace: 'break-spaces', lineHeight: lineHeightChatText }}>
           {ephemeral.text}
         </Typography>
       </Grid>
@@ -104,8 +102,8 @@ function EphemeralItem({ conversationId, ephemeral }: { conversationId: string,
       {!!ephemeral.state && <Grid
         xs={12} md={6}
         sx={{
-          borderLeft: { md: `1px solid ${theme.palette.divider}` },
-          borderTop: { xs: `1px solid ${theme.palette.divider}`, md: 'none' },
+          borderLeft: { md: `1px dashed` },
+          borderTop: { xs: `1px dashed`, md: 'none' },
         }}>
         <StateRenderer state={ephemeral.state} />
       </Grid>}
@@ -125,10 +123,15 @@ function EphemeralItem({ conversationId, ephemeral }: { conversationId: string,
   </Box>;
 }
 
+// const dashedBorderSVG = encodeURIComponent(`
+//   <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>
+//     <rect x='0' y='0' width='100%' height='100%' fill='none' stroke='currentColor' stroke-width='2' stroke-dasharray='16, 2' />
+//   </svg>
+// `);
 
-export function Ephemerals(props: { conversationId: string | null, sx?: SxProps }) {
+
+export function Ephemerals(props: { conversationId: DConversationId | null, sx?: SxProps }) {
   // global state
-  const theme = useTheme();
   const ephemerals = useChatStore(state => {
     const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
     return conversation ? conversation.ephemerals : [];
@@ -140,7 +143,9 @@ export function Ephemerals(props: { conversationId: string | null, sx?: SxProps
     <Sheet
       variant='soft' color='success' invertedColors
       sx={{
-        border: `4px dashed ${theme.palette.divider}`,
+        // backgroundImage: `url("data:image/svg+xml,${dashedBorderSVG.replace('currentColor', '%23A1E8A1')}")`,
+        // backgroundSize: '100% 100%',
+        // backgroundRepeat: 'no-repeat',
         ...(props.sx || {}),
       }}>
 

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

@@ -1,72 +1,125 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { Box, ListDivider, ListItemDecorator, MenuItem, Typography } from '@mui/joy';
+import { Box, IconButton, ListDivider, ListItemDecorator, MenuItem, 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 { OpenAIIcon } from '~/common/components/icons/OpenAIIcon';
-import { closeLayoutDrawer } from '~/common/layout/store-applayout';
-import { useChatStore } from '~/common/state/store-chats';
+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 { ConversationItem } from './ConversationItem';
+import { ChatFolderList } from './folder/ChatFolderList';
+import { ChatDrawerItemMemo, ChatNavigationItemData } from './ChatNavigationItem';
+
+// type ListGrouping = 'off' | 'persona';
 
 
-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[],
+} => {
 
-export function ChatDrawerItems(props: {
-  conversationId: string | null
-  onDeleteAllConversations: () => void,
-  onImportConversation: () => void,
+  // 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, 'New Title'),
+      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 [grouping] = React.useState<ListGrouping>('off');
+  // const [grouping] = React.useState<ListGrouping>('off');
+  const { onConversationDelete, onConversationNew, onConversationActivate } = props;
 
   // external state
-  const { conversationIDs, topNewConversationId, maxChatMessages, setActiveConversationId, createConversation, deleteConversation } = useChatStore(state => ({
-    conversationIDs: state.conversations.map(conversation => conversation.id),
-    topNewConversationId: state.conversations.length ? state.conversations[0].messages.length === 0 ? state.conversations[0].id : null : null,
-    maxChatMessages: state.conversations.reduce((longest, conversation) => Math.max(longest, conversation.messages.length), 0),
-    setActiveConversationId: state.setActiveConversationId,
-    createConversation: state.createConversation,
-    deleteConversation: state.deleteConversation,
-  }), shallow);
-  const { experimentalLabs, showSymbols } = useUIPreferencesStore(state => ({
-    experimentalLabs: state.experimentalLabs,
-    showSymbols: state.zenMode !== 'cleaner',
-  }), shallow);
+  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 maxChatMessages = chatNavItems.reduce((longest, _c) => Math.max(longest, _c.messageCount), 1);
+  const selectConversationsCount = chatNavItems.length;
+  const nonEmptyChats = selectConversationsCount > 1 || (selectConversationsCount === 1 && !chatNavItems[0].isEmpty);
+  const singleChat = selectConversationsCount === 1;
+  const softMaxReached = selectConversationsCount >= 50;
 
 
-  const totalConversations = conversationIDs.length;
-  const hasChats = totalConversations > 0;
-  const singleChat = totalConversations === 1;
-  const softMaxReached = totalConversations >= 50;
+  const handleButtonNew = React.useCallback(() => {
+    onConversationNew();
+    closeDrawerOnMobile();
+  }, [closeDrawerOnMobile, onConversationNew]);
 
-  const handleNew = () => {
-    // if the first in the stack is a new conversation, just activate it
-    if (topNewConversationId)
-      setActiveConversationId(topNewConversationId);
-    else
-      createConversation();
-    closeLayoutDrawer();
-  };
-
-  const handleConversationActivate = React.useCallback((conversationId: string, closeMenu: boolean) => {
-    setActiveConversationId(conversationId);
+  const handleConversationActivate = React.useCallback((conversationId: DConversationId, closeMenu: boolean) => {
+    onConversationActivate(conversationId);
     if (closeMenu)
-      closeLayoutDrawer();
-  }, [setActiveConversationId]);
+      closeDrawerOnMobile();
+  }, [closeDrawerOnMobile, onConversationActivate]);
+
+  const handleConversationDelete = React.useCallback((conversationId: DConversationId) => {
+    !singleChat && conversationId && onConversationDelete(conversationId, true);
+  }, [onConversationDelete, singleChat]);
 
-  const handleConversationDelete = React.useCallback((conversationId: string) => {
-    if (!singleChat && conversationId)
-      deleteConversation(conversationId);
-  }, [deleteConversation, singleChat]);
 
   // grouping
-  let sortedIds = conversationIDs;
+  /*let sortedIds = conversationIDs;
   if (grouping === 'persona') {
     const conversations = useChatStore.getState().conversations;
 
@@ -83,79 +136,109 @@ export function ChatDrawerItems(props: {
 
     // flatten grouped conversations
     sortedIds = Object.values(groupedConversations).flat();
-  }
+  }*/
 
   return <>
 
-    {/*<ListItem>*/}
-    {/*  <Typography level='body-sm'>*/}
-    {/*    Active chats*/}
-    {/*  </Typography>*/}
-    {/*</ListItem>*/}
+    {/* Drawer Header */}
+    <PageDrawerHeader
+      title='Chats'
+      onClose={closeDrawer}
+      startButton={
+        <Tooltip title={useFolders ? 'Hide Folders' : 'Use Folders'}>
+          <IconButton onClick={toggleUseFolders}>
+            {useFolders ? <FolderOpenOutlinedIcon /> : <FolderOutlinedIcon />}
+          </IconButton>
+        </Tooltip>
+      }
+    />
 
-    <MenuItem disabled={!!topNewConversationId && topNewConversationId === props.conversationId} onClick={handleNew}>
-      <ListItemDecorator><AddIcon /></ListItemDecorator>
-      New
-    </MenuItem>
+    {/* Folders List */}
+    {useFolders && (
+      <ChatFolderList
+        folders={folders}
+        selectedFolderId={props.selectedFolderId}
+        onFolderSelect={props.setSelectedFolderId}
+      />
+    )}
 
-    <ListDivider sx={{ mb: 0 }} />
+    {/* Chats List */}
+    <PageDrawerList variant='plain' noTopPadding noBottomPadding tallRows>
 
-    <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>*/}
+      {useFolders && <ListDivider sx={{ mb: 0 }} />}
 
-      {sortedIds.map(conversationId =>
-        <ConversationItem
-          key={'c-id-' + conversationId}
-          conversationId={conversationId}
-          isActive={conversationId === props.conversationId}
-          isSingle={singleChat}
-          showSymbols={showSymbols}
-          maxChatMessages={(experimentalLabs || softMaxReached) ? maxChatMessages : 0}
-          conversationActivate={handleConversationActivate}
-          conversationDelete={handleConversationDelete}
-        />)}
-    </Box>
+      <MenuItem 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>
+      </MenuItem>
 
-    <ListDivider sx={{ mt: 0 }} />
+      {/*<ListDivider sx={{ mt: 0 }} />*/}
 
-    <MenuItem onClick={props.onImportConversation}>
-      <ListItemDecorator>
-        <FileUploadIcon />
-      </ListItemDecorator>
-      Import chats
-      <OpenAIIcon sx={{ fontSize: 'xl', ml: 'auto' }} />
-    </MenuItem>
+      <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>*/}
 
-    <MenuItem disabled={!hasChats} onClick={props.onDeleteAllConversations}>
-      <ListItemDecorator><DeleteOutlineIcon /></ListItemDecorator>
-      <Typography>
-        Delete {totalConversations >= 2 ? `all ${totalConversations} chats` : 'chat'}
-      </Typography>
-    </MenuItem>
+        {chatNavItems.map(item =>
+          <ChatDrawerItemMemo
+            key={'nav-' + item.conversationId}
+            item={item}
+            isLonely={singleChat}
+            maxChatMessages={(labsEnhancedUI || softMaxReached) ? maxChatMessages : 0}
+            showSymbols={showSymbols}
+            onConversationActivate={handleConversationActivate}
+            onConversationDelete={handleConversationDelete}
+          />)}
+      </Box>
 
-    {/*<ListItem>*/}
-    {/*  <Typography level='body-sm'>*/}
-    {/*    Scratchpad*/}
-    {/*  </Typography>*/}
-    {/*</ListItem>*/}
-    {/*<MenuItem>*/}
-    {/*  <ListItemDecorator />*/}
-    {/*  <Typography sx={{ opacity: 0.5 }}>*/}
-    {/*    Feature <Link href={`${Brand.URIs.OpenRepo}/issues/17`} target='_blank'>#17</Link>*/}
-    {/*  </Typography>*/}
-    {/*</MenuItem>*/}
+      <ListDivider sx={{ mt: 0 }} />
+
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+
+        <MenuItem onClick={props.onConversationImportDialog} sx={{ flex: 1 }}>
+          <ListItemDecorator>
+            <FileUploadIcon />
+          </ListItemDecorator>
+          Import
+          {/*<OpenAIIcon sx={{  ml: 'auto' }} />*/}
+        </MenuItem>
+
+        <MenuItem disabled={!nonEmptyChats} onClick={() => props.onConversationExportDialog(props.activeConversationId)} sx={{ flex: 1, display: 'flex', justifyContent: 'flex-end', gap: 2.5 }}>
+          Export
+          <FileDownloadIcon />
+        </MenuItem>
+      </Box>
+
+      <MenuItem disabled={!nonEmptyChats} onClick={props.onConversationsDeleteAll}>
+        <ListItemDecorator>
+          <DeleteOutlineIcon />
+        </ListItemDecorator>
+        Delete {selectConversationsCount >= 2 ? `all ${selectConversationsCount} chats` : 'chat'}
+      </MenuItem>
+
+    </PageDrawerList>
 
   </>;
 }

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

@@ -1,24 +1,51 @@
 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';
 
 
 export function ChatDropdowns(props: {
-  conversationId: string | null
+  conversationId: DConversationId | null
+  isSplitPanes: boolean
+  onToggleSplitPanes: () => void
 }) {
 
   // state
   const { chatLLMDropdown } = useChatLLMDropdown();
   const { personaDropdown } = usePersonaIdDropdown(props.conversationId);
+  const { folderDropdown } = useFolderDropdown(props.conversationId);
+
+  // external state
+  const labsSplitBranching = useUXLabsStore(state => state.labsSplitBranching);
 
   return <>
 
-    {/* Model selector */}
-    {chatLLMDropdown}
-
     {/* Persona selector */}
     {personaDropdown}
 
+    {/* Model selector */}
+    {chatLLMDropdown}
+
+    {/* 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/applayout/ChatMenuItems.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { shallow } from 'zustand/shallow';
 
-import { Badge, ListDivider, ListItemDecorator, MenuItem, Switch } from '@mui/joy';
+import { Box, ListDivider, ListItemDecorator, MenuItem, Switch } from '@mui/joy';
 import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
 import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
 import ClearIcon from '@mui/icons-material/Clear';
@@ -10,59 +9,68 @@ import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import ForkRightIcon from '@mui/icons-material/ForkRight';
 import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';
 
-import { closeLayoutMenu } from '~/common/layout/store-applayout';
-import { useUICounter, useUIPreferencesStore } from '~/common/state/store-ui';
+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';
 
 
 export function ChatMenuItems(props: {
-  conversationId: string | null, isConversationEmpty: boolean, hasConversations: boolean,
-  isMessageSelectionMode: boolean, setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
-  onClearConversation: (conversationId: string) => void,
-  onDuplicateConversation: (conversationId: string) => void,
-  onExportConversation: (conversationId: string | null) => void,
-  onFlattenConversation: (conversationId: string) => void,
+  conversationId: DConversationId | null,
+  hasConversations: boolean,
+  isConversationEmpty: boolean,
+  isMessageSelectionMode: boolean,
+  setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
+  onConversationBranch: (conversationId: DConversationId, messageId: string | null) => void,
+  onConversationClear: (conversationId: DConversationId) => void,
+  onConversationExport: (conversationId: DConversationId | null) => void,
+  onConversationFlatten: (conversationId: DConversationId) => void,
 }) {
 
   // external state
-  const { novel: shareBadge, touch: shareTouch } = useUICounter('export-share');
-  const { showSystemMessages, setShowSystemMessages } = useUIPreferencesStore(state => ({
-    showSystemMessages: state.showSystemMessages, setShowSystemMessages: state.setShowSystemMessages,
-  }), shallow);
+  const { closePageMenu } = useOptimaDrawers();
+  const { touch: shareTouch } = useUICounter('export-share');
+  const [showSystemMessages, setShowSystemMessages] = useChatShowSystemMessages();
 
   // derived state
   const disabled = !props.conversationId || props.isConversationEmpty;
 
-  const handleSystemMessagesToggle = () => setShowSystemMessages(!showSystemMessages);
 
-  const handleConversationExport = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    closeLayoutMenu();
-    props.onExportConversation(!disabled ? props.conversationId : null);
+  const closeMenu = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    closePageMenu();
+  };
+
+  const handleConversationClear = (event: React.MouseEvent<HTMLDivElement>) => {
+    closeMenu(event);
+    props.conversationId && props.onConversationClear(props.conversationId);
+  };
+
+  const handleConversationBranch = (event: React.MouseEvent<HTMLDivElement>) => {
+    closeMenu(event);
+    props.conversationId && props.onConversationBranch(props.conversationId, null);
+  };
+
+  const handleConversationExport = (event: React.MouseEvent<HTMLDivElement>) => {
+    closeMenu(event);
+    props.onConversationExport(!disabled ? props.conversationId : null);
     shareTouch();
   };
 
-  const handleConversationDuplicate = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    closeLayoutMenu();
-    props.conversationId && props.onDuplicateConversation(props.conversationId);
+  const handleConversationFlatten = (event: React.MouseEvent<HTMLDivElement>) => {
+    closeMenu(event);
+    props.conversationId && props.onConversationFlatten(props.conversationId);
   };
 
-  const handleConversationFlatten = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    closeLayoutMenu();
-    props.conversationId && props.onFlattenConversation(props.conversationId);
-  };
-
-  const handleToggleMessageSelectionMode = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    closeLayoutMenu();
+  const handleToggleMessageSelectionMode = (event: React.MouseEvent) => {
+    closeMenu(event);
     props.setIsMessageSelectionMode(!props.isMessageSelectionMode);
   };
 
-  const handleConversationClear = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    props.conversationId && props.onClearConversation(props.conversationId);
-  };
+  const handleToggleSystemMessages = () => setShowSystemMessages(!showSystemMessages);
+
 
   return <>
 
@@ -72,29 +80,21 @@ export function ChatMenuItems(props: {
     {/*  </Typography>*/}
     {/*</ListItem>*/}
 
-    <MenuItem onClick={handleSystemMessagesToggle}>
+    <MenuItem onClick={handleToggleSystemMessages}>
       <ListItemDecorator><SettingsSuggestIcon /></ListItemDecorator>
       System message
-      <Switch checked={showSystemMessages} onChange={handleSystemMessagesToggle} sx={{ ml: 'auto' }} />
+      <Switch checked={showSystemMessages} onChange={handleToggleSystemMessages} sx={{ ml: 'auto' }} />
     </MenuItem>
 
     <ListDivider inset='startContent' />
 
-    <MenuItem disabled={disabled} onClick={handleConversationDuplicate}>
-      <ListItemDecorator>
-        {/*<Badge size='sm' color='success'>*/}
-        <ForkRightIcon color='success' />
-        {/*</Badge>*/}
-      </ListItemDecorator>
-      Duplicate
+    <MenuItem disabled={disabled} onClick={handleConversationBranch}>
+      <ListItemDecorator><ForkRightIcon /></ListItemDecorator>
+      Branch
     </MenuItem>
 
     <MenuItem disabled={disabled} onClick={handleConversationFlatten}>
-      <ListItemDecorator>
-        {/*<Badge size='sm' color='success'>*/}
-        <CompressIcon color='success' />
-        {/*</Badge>*/}
-      </ListItemDecorator>
+      <ListItemDecorator><CompressIcon color='success' /></ListItemDecorator>
       Flatten
     </MenuItem>
 
@@ -109,16 +109,17 @@ export function ChatMenuItems(props: {
 
     <MenuItem disabled={!props.hasConversations} onClick={handleConversationExport}>
       <ListItemDecorator>
-        <Badge color='danger' invisible={!shareBadge || !props.hasConversations}>
-          <FileDownloadIcon />
-        </Badge>
+        <FileDownloadIcon />
       </ListItemDecorator>
       Share / Export ...
     </MenuItem>
 
     <MenuItem disabled={disabled} onClick={handleConversationClear}>
       <ListItemDecorator><ClearIcon /></ListItemDecorator>
-      Reset
+      <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
+        Reset Chat
+        {!disabled && <KeyStroke combo='Ctrl + Alt + X' />}
+      </Box>
     </MenuItem>
 
   </>;

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

@@ -1,104 +1,108 @@
 import * as React from 'react';
-import { shallow } from 'zustand/shallow';
 
-import { Avatar, Box, IconButton, ListItemDecorator, MenuItem, Typography } from '@mui/joy';
+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 { SystemPurposes } from '../../../../data';
+import { SystemPurposeId, SystemPurposes } from '../../../../data';
 
+import { DConversationId, useChatStore } from '~/common/state/store-chats';
 import { InlineTextarea } from '~/common/components/InlineTextarea';
-import { conversationTitle, useChatStore } from '~/common/state/store-chats';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 
 const DEBUG_CONVERSATION_IDs = false;
 
 
-export function ConversationItem(props: {
-  conversationId: string,
-  isActive: boolean, isSingle: boolean, showSymbols: boolean, maxChatMessages: number,
-  conversationActivate: (conversationId: string, closeMenu: boolean) => void,
-  conversationDelete: (conversationId: string) => void,
+export const ChatDrawerItemMemo = React.memo(ChatNavigationItem);
+
+export interface ChatNavigationItemData {
+  conversationId: DConversationId;
+  isActive: boolean;
+  isEmpty: boolean;
+  title: string;
+  messageCount: number;
+  assistantTyping: boolean;
+  systemPurposeId: SystemPurposeId;
+}
+
+function ChatNavigationItem(props: {
+  item: ChatNavigationItemData,
+  isLonely: boolean,
+  maxChatMessages: number,
+  showSymbols: boolean,
+  onConversationActivate: (conversationId: DConversationId, closeMenu: boolean) => void,
+  onConversationDelete: (conversationId: DConversationId) => void,
 }) {
 
   // state
   const [isEditingTitle, setIsEditingTitle] = React.useState(false);
   const [deleteArmed, setDeleteArmed] = React.useState(false);
+
+  // external state
   const doubleClickToEdit = useUIPreferencesStore(state => state.doubleClickToEdit);
 
-  // bind to conversation
-  const cState = useChatStore(state => {
-    const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
-    return conversation && {
-      isNew: conversation.messages.length === 0,
-      messageCount: conversation.messages.length,
-      assistantTyping: !!conversation.abortController,
-      systemPurposeId: conversation.systemPurposeId,
-      title: conversationTitle(conversation, 'new conversation'),
-      setUserTitle: state.setUserTitle,
-    };
-  }, shallow);
+  // derived state
+  const { conversationId, isActive, title, messageCount, assistantTyping, systemPurposeId } = 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 && !props.isActive)
+    if (deleteArmed && !isActive)
       setDeleteArmed(false);
-  }, [deleteArmed, props.isActive]);
+  }, [deleteArmed, isActive]);
 
-  // sanity check: shouldn't happen, but just in case
-  if (!cState) return null;
-  const { isNew, messageCount, assistantTyping, setUserTitle, systemPurposeId, title } = cState;
 
-  const handleActivate = () => props.conversationActivate(props.conversationId, true);
+  const handleConversationActivate = () => props.onConversationActivate(conversationId, true);
 
-  const handleEditBegin = () => setIsEditingTitle(true);
+  const handleTitleEdit = () => setIsEditingTitle(true);
 
-  const handleEdited = (text: string) => {
+  const handleTitleEdited = (text: string) => {
     setIsEditingTitle(false);
-    setUserTitle(props.conversationId, text);
+    useChatStore.getState().setUserTitle(conversationId, text);
   };
 
-  const handleDeleteBegin = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (!props.isActive)
-      props.conversationActivate(props.conversationId, false);
+  const handleDeleteButtonShow = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (!isActive)
+      props.onConversationActivate(conversationId, false);
     else
       setDeleteArmed(true);
   };
 
-  const handleDeleteConfirm = (e: React.MouseEvent) => {
+  const handleDeleteButtonHide = () => setDeleteArmed(false);
+
+  const handleConversationDelete = (event: React.MouseEvent) => {
     if (deleteArmed) {
       setDeleteArmed(false);
-      e.stopPropagation();
-      props.conversationDelete(props.conversationId);
+      event.stopPropagation();
+      props.onConversationDelete(conversationId);
     }
   };
 
-  const handleDeleteCancel = () => setDeleteArmed(false);
 
   const textSymbol = SystemPurposes[systemPurposeId]?.symbol || '❓';
-  const buttonSx: SxProps = { ml: 1, ...(props.isActive ? { color: 'white' } : {}) };
+  const buttonSx: SxProps = { ml: 1, ...(isActive ? { color: 'white' } : {}) };
 
   const progress = props.maxChatMessages ? 100 * messageCount / props.maxChatMessages : 0;
 
   return (
-    <MenuItem
-      variant={props.isActive ? 'solid' : 'plain'} color='neutral'
-      selected={props.isActive}
-      onClick={handleActivate}
+    <ListItemButton
+      variant={isActive ? 'soft' : 'plain'} color='neutral'
+      onClick={handleConversationActivate}
       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 prgoress bar */}
+      {/* Optional progress bar, underlay */}
       {progress > 0 && (
         <Box sx={{
           backgroundColor: 'neutral.softActiveBg',
@@ -129,20 +133,19 @@ export function ConversationItem(props: {
       {/* Text */}
       {!isEditingTitle ? (
 
-        <Box onDoubleClick={() => doubleClickToEdit ? handleEditBegin() : null} sx={{ flexGrow: 1 }}>
-          {DEBUG_CONVERSATION_IDs ? props.conversationId.slice(0, 10) : title}{assistantTyping && '...'}
+        <Box onDoubleClick={() => doubleClickToEdit ? handleTitleEdit() : null} sx={{ flexGrow: 1 }}>
+          {DEBUG_CONVERSATION_IDs ? conversationId.slice(0, 10) : title}{assistantTyping && '...'}
         </Box>
 
       ) : (
 
-        <InlineTextarea initialText={title} onEdit={handleEdited} sx={{ ml: -1.5, mr: -0.5, flexGrow: 1 }} />
+        <InlineTextarea initialText={title} onEdit={handleTitleEdited} sx={{ ml: -1.5, mr: -0.5, flexGrow: 1 }} />
 
       )}
 
       {/* // TODO: Commented code */}
       {/* Edit */}
       {/*<IconButton*/}
-      {/*  variant='plain' color='neutral'*/}
       {/*  onClick={() => props.onEditTitle(props.conversationId)}*/}
       {/*  sx={{*/}
       {/*    opacity: 0, transition: 'opacity 0.3s', ml: 'auto',*/}
@@ -151,25 +154,27 @@ export function ConversationItem(props: {
       {/*</IconButton>*/}
 
       {/* Delete Arming */}
-      {!props.isSingle && !deleteArmed && (
+      {!props.isLonely && !deleteArmed && (
         <IconButton
-          variant={props.isActive ? 'solid' : 'outlined'} color='neutral'
-          size='sm' sx={{ opacity: { xs: 1, sm: 0 }, transition: 'opacity 0.3s', ...buttonSx }}
-          onClick={handleDeleteBegin}>
+          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.isSingle && deleteArmed && <>
-        <IconButton size='sm' variant='solid' color='danger' sx={buttonSx} onClick={handleDeleteConfirm}>
+      {!props.isLonely && deleteArmed && <>
+        <IconButton size='sm' variant='solid' color='danger' sx={buttonSx} onClick={handleConversationDelete}>
           <DeleteOutlineIcon />
         </IconButton>
-        <IconButton size='sm' variant='solid' color='neutral' sx={buttonSx} onClick={handleDeleteCancel}>
+        <IconButton size='sm' variant='solid' color='neutral' sx={buttonSx} onClick={handleDeleteButtonHide}>
           <CloseIcon />
         </IconButton>
       </>}
-    </MenuItem>
 
+    </ListItemButton>
   );
 }

src/apps/chat/components/applayout/folder/AddFolderButton.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+import { Button, ListItem, ListItemDecorator } from '@mui/joy';
+import AddIcon from '@mui/icons-material/Add';
+import FolderIcon from '@mui/icons-material/Folder';
+
+import { InlineTextarea } from '~/common/components/InlineTextarea';
+import { getRotatingFolderColor, useFolderStore } from '~/common/state/store-folders';
+
+
+export function AddFolderButton() {
+
+  // state
+  const [isAddingFolder, setIsAddingFolder] = React.useState(false);
+  const [newFolderColor, setNewFolderColor] = React.useState<string | null>(null);
+
+
+  const handleAddFolder = () => {
+    setNewFolderColor(getRotatingFolderColor());
+    setIsAddingFolder(true);
+  };
+
+  const handleCreateFolder = (name: string) => {
+    if (name.trim())
+      useFolderStore.getState().createFolder(name.trim(), newFolderColor || undefined);
+    setIsAddingFolder(false);
+  };
+
+  const handleCancelAddFolder = () => {
+    setIsAddingFolder(false);
+  };
+
+  return isAddingFolder ? (
+    <ListItem sx={{
+      '--ListItem-paddingLeft': '0.75rem',
+      '--ListItem-minHeight': '3rem', // --Folder-ListItem-height
+      display: 'flex', alignItems: 'center', gap: 1,
+    }}>
+      <ListItemDecorator>
+        <FolderIcon style={{ color: newFolderColor || 'inherit' }} />
+      </ListItemDecorator>
+      <InlineTextarea
+        initialText='' placeholder='Folder Name'
+        onEdit={handleCreateFolder}
+        onCancel={handleCancelAddFolder}
+        sx={{
+          flexGrow: 1,
+        }} />
+      {/*<IconButton color='danger' onClick={handleCancelAddFolder}>*/}
+      {/*  <CloseIcon />*/}
+      {/*</IconButton>*/}
+    </ListItem>
+  ) : (
+    <Button
+      color='neutral'
+      variant='plain'
+      startDecorator={<AddIcon />}
+      onClick={handleAddFolder}
+      sx={{
+        // display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
+        // minHeight: '3rem', // --Folder-ListItem-height
+        // match the forder elements
+        paddingInline: '1.2rem',
+        gap: '0.75rem',
+        // fontWeight: 400,
+      }}
+    >
+      New folder
+    </Button>
+  );
+}

src/apps/chat/components/applayout/folder/ChatFolderList.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { DragDropContext, Draggable, DropResult } from 'react-beautiful-dnd';
+
+import { List, ListItem, ListItemButton, ListItemContent, ListItemDecorator, MenuList, Sheet, Typography } from '@mui/joy';
+import FolderIcon from '@mui/icons-material/Folder';
+
+import { DFolder, useFolderStore } from '~/common/state/store-folders';
+
+import { AddFolderButton } from './AddFolderButton';
+import { FolderListItem } from './FolderListItem';
+import { StrictModeDroppable } from './StrictModeDroppable';
+
+
+export function ChatFolderList(props: {
+  folders: DFolder[];
+  onFolderSelect: (folderId: string | null) => void;
+  selectedFolderId: string | null;
+}) {
+
+  // derived props
+  const { folders, onFolderSelect, selectedFolderId } = props;
+
+  // handlers
+
+  const onDragEnd = (result: DropResult) => {
+    if (!result.destination) return;
+    useFolderStore.getState().moveFolder(result.source.index, result.destination.index);
+  };
+
+
+  return (
+    <Sheet variant='soft' sx={{ p: 2 }}>
+      <MenuList
+        variant='plain'
+        sx={(theme) => ({
+          '& ul': {
+            '--List-gap': '0px',
+            bgcolor: 'background.surface',
+            '& > li:first-of-type > [role="button"]': {
+              borderTopRightRadius: 'var(--List-radius)',
+              borderTopLeftRadius: 'var(--List-radius)',
+            },
+            '& > li:last-child > [role="button"]': {
+              borderBottomRightRadius: 'var(--List-radius)',
+              borderBottomLeftRadius: 'var(--List-radius)',
+            },
+          },
+          // copied from the former PageDrawerList as this was contained
+          '--Icon-fontSize': 'var(--joy-fontSize-xl2)',
+          '--ListItemDecorator-size': '2.75rem',
+          '--ListItem-minHeight': '3rem', // --Folder-ListItem-height
+
+          '--List-radius': '8px',
+          '--List-gap': '1rem',
+          '--ListDivider-gap': '0px',
+          // '--ListItem-paddingY': '0.5rem',
+          // override global variant tokens
+          '--joy-palette-neutral-plainHoverBg': 'rgba(0 0 0 / 0.08)',
+          '--joy-palette-neutral-plainActiveBg': 'rgba(0 0 0 / 0.12)',
+          [theme.getColorSchemeSelector('light')]: {
+            '--joy-palette-divider': 'rgba(0 0 0 / 0.08)',
+          },
+          [theme.getColorSchemeSelector('dark')]: {
+            '--joy-palette-neutral-plainHoverBg': 'rgba(255 255 255 / 0.1)',
+            '--joy-palette-neutral-plainActiveBg': 'rgba(255 255 255 / 0.16)',
+          },
+        })}
+      >
+        <ListItem nested>
+          <DragDropContext onDragEnd={onDragEnd}>
+            <StrictModeDroppable
+              droppableId='folder'
+              renderClone={(provided, snapshot, rubric) => (
+                <FolderListItem
+                  folder={folders[rubric.source.index]}
+                  provided={provided}
+                  snapshot={snapshot}
+                  onFolderSelect={onFolderSelect}
+                  selectedFolderId={selectedFolderId}
+                />
+              )}
+            >
+              {(provided) => (
+                <List ref={provided.innerRef} {...provided.droppableProps}>
+
+                  {/* First item is the 'All' button */}
+                  <ListItem>
+                    <ListItemButton
+                      // handle folder select
+                      onClick={(event) => {
+                        event.stopPropagation(); // Prevent the ListItemButton's onClick from firing
+                        onFolderSelect(null);
+                      }}
+                      selected={selectedFolderId === null}
+                      sx={{
+                        border: 0,
+                        justifyContent: 'space-between',
+                        '&:hover .menu-icon': {
+                          visibility: 'visible', // Hide delete icon for default folder
+                        },
+                      }}
+                    >
+                      <ListItemDecorator>
+                        <FolderIcon />
+                      </ListItemDecorator>
+
+                      <ListItemContent>
+                        <Typography>All</Typography>
+                      </ListItemContent>
+                    </ListItemButton>
+                  </ListItem>
+
+                  {folders.map((folder, index) => (
+                    <Draggable key={folder.id} draggableId={folder.id} index={index}>
+                      {(provided, snapshot) => (
+                        <FolderListItem
+                          folder={folder}
+                          provided={provided}
+                          snapshot={snapshot}
+                          onFolderSelect={onFolderSelect}
+                          selectedFolderId={selectedFolderId}
+                        />
+                      )}
+                    </Draggable>
+                  ))}
+                  {provided.placeholder}
+                </List>
+              )}
+            </StrictModeDroppable>
+          </DragDropContext>
+        </ListItem>
+      </MenuList>
+
+      <AddFolderButton />
+    </Sheet>
+  );
+}

src/apps/chat/components/applayout/folder/FolderListItem.tsx

@@ -0,0 +1,319 @@
+import React, { useState } from 'react';
+import { 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';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Done from '@mui/icons-material/Done';
+import EditIcon from '@mui/icons-material/Edit';
+import FolderIcon from '@mui/icons-material/Folder';
+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';
+
+
+// Define the type for your props if you're using TypeScript
+type RenderItemProps = {
+  folder: DFolder;
+  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);
+  const [editingFolderId, setEditingFolderId] = useState<string | null>(null);
+
+  // State to control the open state of the Menu
+  const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLAnchorElement>(null);
+
+
+  // Menu
+  const handleMenuOpen = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    setMenuAnchorEl(event.currentTarget);
+    setDeleteArmed(false); // Reset delete armed state
+  };
+
+  const handleMenuClose = () => {
+    setMenuAnchorEl(null);
+  };
+
+
+  // Edit Title
+
+  const handleEditTitle = (event: React.MouseEvent<HTMLElement, MouseEvent>, folderId: string) => {
+    event.stopPropagation(); // Prevent the ListItemButton's onClick from firing
+    setEditingFolderId(folderId);
+  };
+
+  const handleCancelEditTitle = () => {
+    setEditingFolderId(null);
+  };
+
+  const handleSetTitle = (newTitle: string, folderId: string) => {
+    if (newTitle.trim())
+      useFolderStore.getState().setFolderName(folderId, newTitle.trim());
+    setEditingFolderId(null); // Exit edit mode
+    // Blur the input element if it's currently focused
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  };
+
+
+  // Deletion
+
+  const handleDeleteButtonShow = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    setDeleteArmed(true);
+  };
+
+  const handleDeleteConfirmed = (event: React.MouseEvent) => {
+    if (deleteArmed) {
+      setDeleteArmed(false);
+      event.stopPropagation();
+      useFolderStore.getState().deleteFolder(folder.id);
+      handleMenuClose();
+    }
+  };
+
+  const handleDeleteCanceled = (event: React.MouseEvent) => {
+    if (deleteArmed) {
+      setDeleteArmed(false);
+      event.stopPropagation();
+    }
+  };
+
+
+  // Color
+
+  const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    useFolderStore.getState().setFolderColor(folder.id, event.target.value);
+    handleMenuClose();
+  };
+
+
+  const getItemStyle = (isDragging: boolean, draggableStyle: DraggingStyle | NotDraggingStyle | undefined) => ({
+    userSelect: 'none',
+    borderRadius: '8px',
+    backgroundColor: isDragging ? 'rgba(0, 80, 80, 0.18)' : 'transparent',
+
+    ...draggableStyle,
+
+    // Any additional styles you want to apply during dragging
+    ...(isDragging &&
+      {
+        // Apply any drag-specific styles here
+        // marginLeft: '12px',
+      }),
+  });
+
+  const getListItemContentStyle = (isDragging: boolean, _draggableStyle: DraggingStyle | NotDraggingStyle | undefined) => ({
+    ...(isDragging && {
+      // Apply any drag-specific styles here
+      marginLeft: '20px',
+    }),
+  });
+
+  const getListItemDecoratorStyle = (isDragging: boolean, _draggableStyle: DraggingStyle | NotDraggingStyle | undefined) => ({
+    ...(isDragging && {
+      // Apply any drag-specific styles here
+      marginLeft: '12px',
+    }),
+  });
+
+  const handleFolderSelect = (folderId: string | null) => {
+    onFolderSelect(folderId);
+  };
+
+  return (
+    <ListItem
+      ref={provided.innerRef}
+      {...provided.draggableProps}
+      {...provided.dragHandleProps}
+      style={{
+        ...getItemStyle(snapshot.isDragging, provided.draggableProps.style),
+        userSelect: 'none',
+      }}
+    >
+      <ListItemButton
+        // handle folder select
+        onClick={(event) => {
+          event.stopPropagation(); // Prevent the ListItemButton's onClick from firing
+          handleFolderSelect(folder.id);
+        }}
+        selected={folder.id === selectedFolderId}
+        sx={{
+          border: 0,
+          justifyContent: 'space-between',
+          '&:hover .menu-icon': {
+            visibility: 'visible', // Hide delete icon for default folder
+          },
+        }}
+      >
+        <ListItemDecorator
+          style={{
+            ...getListItemDecoratorStyle(snapshot.isDragging, provided.draggableProps.style),
+            userSelect: 'none',
+          }}
+        >
+          <FolderIcon style={{ color: folder.color || 'inherit' }} />
+        </ListItemDecorator>
+
+        {editingFolderId === folder.id ? (
+          <InlineTextarea
+            initialText={folder.title}
+            onEdit={newTitle => handleSetTitle(newTitle, folder.id)}
+            onCancel={handleCancelEditTitle}
+            sx={{ ml: -1.5, mr: -0.5, flexGrow: 1 }}
+          />
+        ) : (
+          <ListItemContent
+            onDoubleClick={event => handleEditTitle(event, folder.id)}
+            style={{
+              ...getListItemContentStyle(snapshot.isDragging, provided.draggableProps.style),
+              userSelect: 'none',
+            }}
+          >
+            <Typography>{folder.title}</Typography>
+          </ListItemContent>
+        )}
+
+        {/* Icon to show the Popup menu */}
+        <IconButton
+          variant='outlined'
+          className='menu-icon'
+          onClick={handleMenuOpen}
+          sx={{
+            visibility: 'hidden',
+          }}
+        >
+          <MoreVertIcon />
+        </IconButton>
+
+        {!!menuAnchorEl && (
+          <CloseableMenu
+            open anchorEl={menuAnchorEl} onClose={handleMenuClose}
+            placement='top' zIndex={1301 /* need to be on top of the Modal on Mobile */}
+            sx={{ minWidth: 200 }}
+          >
+
+            <MenuItem
+              onClick={(event) => {
+                handleEditTitle(event, folder.id);
+                handleMenuClose();
+              }}
+            >
+              <ListItemDecorator>
+                <EditIcon />
+              </ListItemDecorator>
+              Edit
+            </MenuItem>
+
+            {!deleteArmed ? (
+              <MenuItem onClick={handleDeleteButtonShow}>
+                <ListItemDecorator>
+                  <DeleteOutlineIcon />
+                </ListItemDecorator>
+                Delete
+              </MenuItem>
+            ) : (
+              <>
+                <MenuItem onClick={handleDeleteCanceled}>
+                  <ListItemDecorator>
+                    <CloseIcon />
+                  </ListItemDecorator>
+                  Cancel
+                </MenuItem>
+                <MenuItem onClick={handleDeleteConfirmed} color='danger' sx={{ color: 'danger' }}>
+                  <ListItemDecorator>
+                    <DeleteOutlineIcon />
+                  </ListItemDecorator>
+                  Confirm Deletion
+                </MenuItem>
+              </>
+            )}
+
+            <MenuItem
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                p: 2,
+                minWidth: 200,
+              }}
+            >
+              <FormLabel
+                id='folder-color'
+                sx={{
+                  mb: 1.5,
+                  fontWeight: 'xl',
+                  textTransform: 'uppercase',
+                  fontSize: 'xs',
+                  letterSpacing: '0.1em',
+                }}
+              >
+                Color
+              </FormLabel>
+              <RadioGroup
+                aria-labelledby='product-color-attribute'
+                defaultValue={folder.color || 'warning'}
+                onChange={handleColorChange}
+                sx={{ gap: 2, flexWrap: 'wrap', flexDirection: 'row', maxWidth: 240 }}
+              >
+                {FOLDERS_COLOR_PALETTE.map((color, index) => (
+                  <Sheet
+                    key={index}
+                    sx={{
+                      position: 'relative',
+                      width: 20,
+                      height: 20,
+                      flexShrink: 0,
+                      bgcolor: `${color}`,
+                      borderRadius: '50%',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <Radio
+                      overlay
+                      variant='solid'
+                      checkedIcon={<Done />}
+                      value={color}
+                      color='neutral'
+                      slotProps={{
+                        input: { 'aria-label': color },
+                        radio: {
+                          sx: {
+                            display: 'contents',
+                            '--variant-borderWidth': '2px',
+                          },
+                        },
+                      }}
+                      sx={{
+                        '--joy-focus-outlineOffset': '4px',
+                        '--joy-palette-focusVisible': color,
+                        [`& .${radioClasses.action}.${radioClasses.focusVisible}`]: {
+                          outlineWidth: '2px',
+                        },
+                      }}
+                    />
+                  </Sheet>
+                ))}
+              </RadioGroup>
+            </MenuItem>
+
+          </CloseableMenu>
+        )}
+
+      </ListItemButton>
+    </ListItem>
+  );
+};

src/apps/chat/components/applayout/folder/StrictModeDroppable.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import { Droppable, DroppableProps } from "react-beautiful-dnd";
+
+export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
+    const [enabled, setEnabled] = useState(false);
+  
+    useEffect(() => {
+      const animation = requestAnimationFrame(() => setEnabled(true));
+  
+      return () => {
+        cancelAnimationFrame(animation);
+        setEnabled(false);
+      };
+    }, []);
+  
+    if (!enabled) {
+      return null;
+    }
+  
+    return <Droppable {...props}>{children}</Droppable>;
+  };
+  

src/apps/chat/components/applayout/folder/useFolderDropdown.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+
+import FolderIcon from '@mui/icons-material/Folder';
+
+import type { DConversationId } from '~/common/state/store-chats';
+import { DropdownItems, GoodDropdown } from '~/common/components/GoodDropdown';
+import { useFolderStore } from '~/common/state/store-folders';
+
+
+const SPECIAL_ID_REMOVE = '_REMOVE_';
+
+
+export function useFolderDropdown(conversationId: DConversationId | null) {
+
+  // external state
+  const { folders, useFolders } = useFolderStore();
+
+
+  // Prepare items for the dropdown
+  const folderItems: DropdownItems = React.useMemo(() => {
+    // add one item per folder
+    const items = folders.reduce((items, folder) => {
+      items[folder.id] = {
+        title: folder.title,
+        icon: <FolderIcon sx={{ color: folder.color }} />,
+      };
+      return items;
+    }, {} as DropdownItems);
+
+    // add one item representing no folder
+    items[SPECIAL_ID_REMOVE] = {
+      title: 'No Folder',
+    };
+
+    return items;
+  }, [folders]);
+
+
+  // Handle dropdown folder change
+  const handleFolderChange = React.useCallback((_event: any, folderId: string | null) => {
+    if (conversationId && folderId) {
+      // Remove conversation from all folders
+      folders.forEach(folder => {
+        if (folder.conversationIds.includes(conversationId)) {
+          useFolderStore.getState().removeConversationFromFolder(folder.id, conversationId);
+        }
+      });
+      // Add conversation to the selected folder
+      useFolderStore.getState().addConversationToFolder(folderId, conversationId);
+    }
+  }, [conversationId, folders]);
+
+  // find the folder ID for the active Conversation
+  const currentFolderId = folders.find(folder => folder.conversationIds.includes(conversationId || ''))?.id || null;
+
+  // Create the dropdown component
+  const folderDropdown = React.useMemo(() => {
+
+    // don't show the dropdown if folders are not enabled
+    if (!useFolders)
+      return null;
+
+    return (
+      <GoodDropdown
+        items={folderItems}
+        value={currentFolderId}
+        onChange={handleFolderChange}
+        placeholder='Select a folder'
+        showSymbols
+      />
+    );
+  }, [currentFolderId, folderItems, handleFolderChange, useFolders]);
+
+  return { folderDropdown };
+}

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

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

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

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

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

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-import { Button, IconButton } from '@mui/joy';
-import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
-
-import { hideOnDesktop, hideOnMobile } from '~/common/theme';
-
-import { CameraCaptureModal } from './CameraCaptureModal';
-
-const showOnDesktop = false; // process.env.NODE_ENV === 'development';
-
-
-export function CameraCaptureButton(props: { onOCR: (ocrText: string) => void }) {
-  // state
-  const [open, setOpen] = React.useState(false);
-
-  return <>
-
-    {/* The Button */}
-    <IconButton variant='plain' color='neutral' onClick={() => setOpen(true)} sx={hideOnDesktop}>
-      <AddAPhotoIcon />
-    </IconButton>
-
-    {/* Also show a button on desktop while in development */}
-    {showOnDesktop && <Button
-      fullWidth variant='plain' color='neutral' onClick={() => setOpen(true)} startDecorator={<AddAPhotoIcon />}
-      sx={{ ...hideOnMobile, justifyContent: 'flex-start' }}>
-      OCR
-    </Button>}
-
-    {/* The actual capture dialog, which will stream the video */}
-    {open && <CameraCaptureModal onCloseModal={() => setOpen(false)} onOCR={props.onOCR} />}
-
-  </>;
-}

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

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

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

@@ -3,12 +3,57 @@ import * as React from 'react';
 import { Box, MenuItem, Radio, Typography } from '@mui/joy';
 
 import { CloseableMenu } from '~/common/components/CloseableMenu';
+import { KeyStroke } from '~/common/components/KeyStroke';
+import { useUIPreferencesStore } from '~/common/state/store-ui';
 
-import { ChatModeId, ChatModeItems } from './store-composer';
+import { ChatModeId } from '../../AppChat';
 
 
-export const ChatModeMenu = (props: { anchorEl: HTMLAnchorElement | null, onClose: () => void, experimental: boolean, chatModeId: ChatModeId, onSetChatModeId: (chatMode: ChatModeId) => void }) =>
-  <CloseableMenu
+interface ChatModeDescription {
+  label: string;
+  description: string | React.JSX.Element;
+  shortcut?: string;
+  requiresTTI?: boolean;
+}
+
+const ChatModeItems: { [key in ChatModeId]: ChatModeDescription } = {
+  'generate-text': {
+    label: 'Chat',
+    description: 'Persona replies',
+  },
+  'append-user': {
+    label: 'Write',
+    description: 'Appends a message',
+    shortcut: 'Alt + Enter',
+  },
+  'generate-image': {
+    label: 'Draw',
+    description: 'AI Image Generation',
+    requiresTTI: true,
+  },
+  'generate-react': {
+    label: 'Reason + Act · α',
+    description: 'Answers questions in multiple steps',
+  },
+};
+
+
+function fixNewLineShortcut(shortcut: string, enterIsNewLine: boolean) {
+  if (shortcut === 'ENTER')
+    return enterIsNewLine ? 'Shift + Enter' : 'Enter';
+  return shortcut;
+}
+
+export function ChatModeMenu(props: {
+  anchorEl: HTMLAnchorElement | null, onClose: () => void,
+  chatModeId: ChatModeId, onSetChatModeId: (chatMode: ChatModeId) => void
+  capabilityHasTTI: boolean,
+}) {
+
+  // external state
+  const enterIsNewline = useUIPreferencesStore(state => state.enterIsNewline);
+
+  return <CloseableMenu
     placement='top-end' sx={{ minWidth: 320 }}
     open anchorEl={props.anchorEl} onClose={props.onClose}
   >
@@ -20,15 +65,20 @@ export const ChatModeMenu = (props: { anchorEl: HTMLAnchorElement | null, onClos
     {/*<ListDivider />*/}
 
     {/* ChatMode items */}
-    {Object.entries(ChatModeItems).filter(([, { experimental }]) => props.experimental || !experimental).map(([key, data]) =>
-      <MenuItem key={'chat-mode-' + key} onClick={() => props.onSetChatModeId(key as ChatModeId)}>
-        <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
-          <Radio checked={key === props.chatModeId} />
-          <Box>
-            <Typography>{data.label}</Typography>
-            <Typography level='body-sm'>{data.description}</Typography>
+    {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>
-        </Box>
-      </MenuItem>)}
+        </MenuItem>)}
 
-  </CloseableMenu>;
+  </CloseableMenu>;
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/apps/chat/components/composer/store-composer.ts

@@ -1,40 +1,8 @@
-import * as React from 'react';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 
 
-export type ChatModeId = 'immediate' | 'immediate-follow-up' | 'write-user' | 'react' | 'draw-imagine' | 'draw-imagine-plus';
-
-/// Describe the chat modes
-export const ChatModeItems: { [key in ChatModeId]: { label: string; description: string | React.JSX.Element; experimental?: boolean } } = {
-  'immediate': {
-    label: 'Chat',
-    description: 'Persona answers',
-  },
-  'immediate-follow-up': {
-    label: 'Chat Plus',
-    description: 'Augmented chat (diagrams)',
-  },
-  'write-user': {
-    label: 'Write',
-    description: 'Just append a message',
-  },
-  'react': {
-    label: 'Reason+Act',
-    description: 'Answer your questions with ReAct and search',
-  },
-  'draw-imagine': {
-    label: 'Draw',
-    description: 'AI Image Generation',
-  },
-  'draw-imagine-plus': {
-    label: 'Assisted Draw',
-    description: 'Assisted Image Generation',
-  },
-};
-
-
 /// Composer Store
 
 interface ComposerStore {
@@ -54,20 +22,11 @@ const useComposerStore = create<ComposerStore>()(
     {
       name: 'app-composer',
       version: 1,
-      /*migrate: (state: any, version): ComposerStore => {
-        // 0 -> 1: rename history to sentMessages
-        if (state && version === 0) {
-          state.sentMessages = state.history;
-          delete state.history;
-        }
-        return state as ComposerStore;
-      },*/
     }),
 );
 
+export const setComposerStartupText = (text: string | null) =>
+  useComposerStore.getState().setStartupText(text);
 
 export const useComposerStartupText = (): [string | null, (text: string | null) => void] =>
-  useComposerStore(state => [state.startupText, state.setStartupText], shallow);
-
-export const setComposerStartupText = (text: string | null) =>
-  useComposerStore.getState().setStartupText(text);
+  useComposerStore(state => [state.startupText, state.setStartupText], shallow);

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

@@ -3,23 +3,23 @@ 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, Stack, Tooltip, Typography, useTheme } from '@mui/joy';
+import { Avatar, Box, Button, CircularProgress, IconButton, ListDivider, ListItem, ListItemDecorator, MenuItem, Switch, Tooltip, Typography } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
+import AccountTreeIcon from '@mui/icons-material/AccountTree';
 import ClearIcon from '@mui/icons-material/Clear';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DifferenceIcon from '@mui/icons-material/Difference';
 import EditIcon from '@mui/icons-material/Edit';
 import Face6Icon from '@mui/icons-material/Face6';
-import FastForwardIcon from '@mui/icons-material/FastForward';
+import ForkRightIcon from '@mui/icons-material/ForkRight';
 import FormatPaintIcon from '@mui/icons-material/FormatPaint';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import PaletteOutlinedIcon from '@mui/icons-material/PaletteOutlined';
 import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 import ReplayIcon from '@mui/icons-material/Replay';
 import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';
 import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
-
-import { canUseElevenLabs, speakText } from '~/modules/elevenlabs/elevenlabs.client';
-import { canUseProdia } from '~/modules/prodia/prodia.client';
+import TelegramIcon from '@mui/icons-material/Telegram';
+import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
 
 import { CloseableMenu } from '~/common/components/CloseableMenu';
 import { DMessage } from '~/common/state/store-chats';
@@ -28,11 +28,13 @@ 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/copyToClipboard';
-import { cssRainbowColorKeyframes, hideOnMobile } from '~/common/theme';
+import { copyToClipboard } from '~/common/util/clipboardUtils';
+import { cssRainbowColorKeyframes, lineHeightChatText } from '~/common/app.theme';
 import { prettyBaseModel } from '~/common/util/modelUtils';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
+import { useChatShowTextDiff } from '../../store-app-chat';
+
 import { RenderCode } from './RenderCode';
 import { RenderHtml } from './RenderHtml';
 import { RenderImage } from './RenderImage';
@@ -43,8 +45,14 @@ import { RenderTextDiff } from './RenderTextDiff';
 import { parseBlocks } from './blocks';
 
 
+// How long is the user collapsed message
+const USER_COLLAPSED_LINES: number = 8;
+
+// Enable the automatic 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.
-const ENABLE_COPY_MESSAGE: boolean = false;
+const ENABLE_COPY_MESSAGE_OVERLAY: boolean = false;
 
 
 export function messageBackground(messageRole: DMessage['role'] | string, wasEdited: boolean, unknownAssistantIssue: boolean): string {
@@ -60,47 +68,54 @@ export function messageBackground(messageRole: DMessage['role'] | string, wasEdi
   }
 }
 
+const avatarIconSx = { width: 36, height: 36 };
+
 export function makeAvatar(messageAvatar: string | null, messageRole: DMessage['role'] | string, messageOriginLLM: string | undefined, messagePurposeId: SystemPurposeId | undefined, messageSender: string, messageTyping: boolean, size: 'sm' | undefined = undefined): React.JSX.Element {
   if (typeof messageAvatar === 'string' && messageAvatar)
     return <Avatar alt={messageSender} src={messageAvatar} />;
-  const iconSx = { width: 40, height: 40 };
-  const mascotSx = size === 'sm' ? { width: 40, height: 40 } : { width: 64, height: 64 };
+  const mascotSx = size === 'sm' ? avatarIconSx : { width: 64, height: 64 };
   switch (messageRole) {
     case 'system':
-      return <SettingsSuggestIcon sx={iconSx} />;  // https://em-content.zobj.net/thumbs/120/apple/325/robot_1f916.png
+      return <SettingsSuggestIcon sx={avatarIconSx} />;  // https://em-content.zobj.net/thumbs/120/apple/325/robot_1f916.png
+
+    case 'user':
+      return <Face6Icon sx={avatarIconSx} />;            // https://www.svgrepo.com/show/306500/openai.svg
 
     case 'assistant':
-      // display a gif avatar when the assistant is typing (people seem to love this, so keeping it after april fools')
+      // typing gif (people seem to love this, so keeping it after april fools')
+      const isTextToImage = messageOriginLLM === 'DALL·E' || messageOriginLLM === 'Prodia';
+      const isReact = messageOriginLLM?.startsWith('react-');
       if (messageTyping) {
         return <Avatar
           alt={messageSender} variant='plain'
-          src={messageOriginLLM === 'prodia'
-            ? 'https://i.giphy.com/media/5t9ujj9cMisyVjUZ0m/giphy.webp'
-            : messageOriginLLM?.startsWith('react-')
-              ? 'https://i.giphy.com/media/l44QzsOLXxcrigdgI/giphy.webp'
+          src={isTextToImage ? 'https://i.giphy.com/media/5t9ujj9cMisyVjUZ0m/giphy.webp'
+            : isReact ? 'https://i.giphy.com/media/l44QzsOLXxcrigdgI/giphy.webp'
               : 'https://i.giphy.com/media/jJxaUysjzO9ri/giphy.webp'}
-          sx={{ ...mascotSx, borderRadius: 'var(--joy-radius-sm)' }}
+          sx={{ ...mascotSx, borderRadius: 'sm' }}
         />;
       }
-      // display the purpose symbol
-      if (messageOriginLLM === 'prodia')
-        return <PaletteOutlinedIcon sx={iconSx} />;
-      const symbol = SystemPurposes[messagePurposeId!]?.symbol;
-      if (symbol)
-        return <Box
-          sx={{
-            fontSize: '24px',
-            textAlign: 'center',
-            width: '100%', minWidth: `${iconSx.width}px`, lineHeight: `${iconSx.height}px`,
-          }}
-        >
-          {symbol}
-        </Box>;
-      // default assistant avatar
-      return <SmartToyOutlinedIcon sx={iconSx} />; // https://mui.com/static/images/avatar/2.jpg
 
-    case 'user':
-      return <Face6Icon sx={iconSx} />;            // https://www.svgrepo.com/show/306500/openai.svg
+      // text-to-image: icon
+      if (isTextToImage)
+        return <FormatPaintIcon sx={{
+          ...avatarIconSx,
+          animation: `${cssRainbowColorKeyframes} 1s linear 2.66`,
+        }} />;
+
+      // purpose symbol (if present)
+      const symbol = SystemPurposes[messagePurposeId!]?.symbol;
+      if (symbol) return <Box sx={{
+        fontSize: '24px',
+        textAlign: 'center',
+        width: '100%',
+        minWidth: `${avatarIconSx.width}px`,
+        lineHeight: `${avatarIconSx.height}px`,
+      }}>
+        {symbol}
+      </Box>;
+
+      // default assistant avatar
+      return <SmartToyOutlinedIcon sx={avatarIconSx} />; // https://mui.com/static/images/avatar/2.jpg
   }
   return <Avatar alt={messageSender} />;
 }
@@ -135,13 +150,14 @@ function explainErrorInMessage(text: string, isAssistant: boolean, modelId?: str
     </>;
   } else if (text.includes('"context_length_exceeded"')) {
     // TODO: propose to summarize or split the input?
-    const pattern = /maximum context length is (\d+) tokens.+you requested (\d+) tokens/;
+    const pattern = /maximum context length is (\d+) tokens.+resulted in (\d+) tokens/;
     const match = pattern.exec(text);
     const usedText = match ? <b>{parseInt(match[2] || '0').toLocaleString()} tokens &gt; {parseInt(match[1] || '0').toLocaleString()}</b> : '';
     errorMessage = <>
       This thread <b>surpasses the maximum size</b> allowed for {modelId || 'this model'}. {usedText}.
       Please consider removing some earlier messages from the conversation, start a new conversation,
       choose a model with larger context, or submit a shorter new message.
+      {!usedText && ` -- ${text}`}
     </>;
   }
   // [OpenAI] {"error":{"message":"Incorrect API key provided: ...","type":"invalid_request_error","param":null,"code":"invalid_api_key"}}
@@ -158,10 +174,30 @@ function explainErrorInMessage(text: string, isAssistant: boolean, modelId?: str
       make sure the usage is under <Link noLinkStyle href='https://platform.openai.com/account/billing/limits' target='_blank'>the limits</Link>.
     </>;
   }
+  // else
+  //  errorMessage = <>{text || 'Unknown error'}</>;
 
   return { errorMessage, isAssistantError };
 }
 
+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);
+
 /**
  * The Message component is a customizable chat message UI component that supports
  * different roles (user, assistant, and system), text editing, syntax highlighting,
@@ -170,8 +206,44 @@ function explainErrorInMessage(text: string, isAssistant: boolean, modelId?: str
  * or collapsing long user messages.
  *
  */
-export function ChatMessage(props: { message: DMessage, diffText?: string, showDate?: boolean, isBottom?: boolean, noBottomBorder?: boolean, onMessageDelete?: () => void, onMessageEdit: (text: string) => void, onMessageRunFrom?: (offset: number) => void, onImagine?: (messageText: string) => Promise<void> }) {
+export 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,
+  onConversationBranch?: (messageId: string) => void,
+  onConversationRestartFrom?: (messageId: string, offset: number) => void,
+  onConversationTruncate?: (messageId: string) => void,
+  onMessageDelete?: (messageId: string) => void,
+  onMessageEdit?: (messageId: string, text: string) => void,
+  onTextDiagram?: (messageId: string, text: string) => Promise<void>
+  onTextImagine?: (text: string) => Promise<void>
+  onTextSpeak?: (text: string) => Promise<void>
+  sx?: SxProps,
+}) {
+
+  // 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);
+  const [selMenuText, setSelMenuText] = React.useState<string | null>(null);
+  const [isEditing, setIsEditing] = React.useState(false);
+
+  // external state
+  const { cleanerLooks, renderMarkdown, doubleClickToEdit } = useUIPreferencesStore(state => ({
+    cleanerLooks: state.zenMode === 'cleaner',
+    renderMarkdown: state.renderMarkdown,
+    doubleClickToEdit: state.doubleClickToEdit,
+  }), shallow);
+  const [showDiff, setShowDiff] = useChatShowTextDiff();
+  const textDiffs = useSanityTextDiffs(props.message.text, props.diffPreviousText, showDiff);
+
+  // derived state
   const {
+    id: messageId,
     text: messageText,
     sender: messageSender,
     avatar: messageAvatar,
@@ -182,99 +254,148 @@ export function ChatMessage(props: { message: DMessage, diffText?: string, showD
     created: messageCreated,
     updated: messageUpdated,
   } = props.message;
+
   const fromAssistant = messageRole === 'assistant';
   const fromSystem = messageRole === 'system';
   const fromUser = messageRole === 'user';
   const wasEdited = !!messageUpdated;
 
-  // state
-  const [diffs, setDiffs] = React.useState<TextDiff[] | null>(null);
-  const [forceExpanded, setForceExpanded] = React.useState(false);
-  const [isHovering, setIsHovering] = React.useState(false);
-  const [menuAnchor, setMenuAnchor] = React.useState<HTMLElement | null>(null);
-  const [isEditing, setIsEditing] = React.useState(false);
-  const [isImagining, setIsImagining] = React.useState(false);
-  const [isSpeaking, setIsSpeaking] = React.useState(false);
+  const showAvatars = props.hideAvatars !== true && !cleanerLooks;
 
-  // external state
-  const theme = useTheme();
-  const { showAvatars, renderMarkdown: _renderMarkdown, doubleClickToEdit } = useUIPreferencesStore(state => ({
-    showAvatars: state.zenMode !== 'cleaner',
-    renderMarkdown: state.renderMarkdown,
-    doubleClickToEdit: state.doubleClickToEdit,
-  }), shallow);
-  const renderMarkdown = _renderMarkdown && !fromSystem;
-  const isImaginable = canUseProdia() && !!props.onImagine;
-  const isImaginableEnabled = messageText?.length >= 2 && !messageText.startsWith('https://images.prodia.xyz/') && !(messageText.startsWith('/imagine') || messageText.startsWith('/img'));
-  const isSpeakable = canUseElevenLabs();
-  const isSpeakableEnabled = isImaginableEnabled;
+  const textSel = selMenuText ? selMenuText : messageText;
+  const isSpecialT2I = textSel.startsWith('https://images.prodia.xyz/') || textSel.startsWith('/draw ') || textSel.startsWith('/imagine ') || textSel.startsWith('/img ');
+  const couldDiagram = textSel?.length >= 100 && !isSpecialT2I;
+  const couldImagine = textSel?.length >= 2 && !isSpecialT2I;
+  const couldSpeak = couldImagine;
 
 
-  // Effect: text diffing vs the former message
-  React.useEffect(() => {
-    if (!props.diffText)
-      return setDiffs(null);
-    setDiffs(
-      cleanupEfficiency(makeDiff(props.diffText, messageText, {
-        timeout: 1,
-        checkLines: true,
-      }), 4),
-    );
-  }, [messageText, props.diffText]);
-
-
-  const closeOperationsMenu = () => setMenuAnchor(null);
-
-  const handleMenuCopy = (e: React.MouseEvent) => {
-    copyToClipboard(messageText);
-    e.preventDefault();
-    closeOperationsMenu();
+  const handleTextEdited = (editedText: string) => {
+    setIsEditing(false);
+    if (props.onMessageEdit && editedText?.trim() && editedText !== messageText)
+      props.onMessageEdit(messageId, editedText);
   };
 
-  const handleMenuEdit = (e: React.MouseEvent) => {
+  const handleUncollapse = () => setForceUserExpanded(true);
+
+
+  // Operations Menu
+
+  const closeOperationsMenu = () => setOpsMenuAnchor(null);
+
+  const handleOpsCopy = (e: React.MouseEvent) => {
+    copyToClipboard(textSel, 'Text');
+    e.preventDefault();
+    closeOperationsMenu();
+    closeSelectionMenu();
+  };
+
+  const handleOpsEdit = (e: React.MouseEvent) => {
     if (messageTyping && !isEditing) return; // don't allow editing while typing
     setIsEditing(!isEditing);
     e.preventDefault();
     closeOperationsMenu();
   };
 
-
-  const handleMenuImagine = async (e: React.MouseEvent) => {
+  const handleOpsConversationBranch = (e: React.MouseEvent) => {
     e.preventDefault();
-    if (props.onImagine) {
-      setIsImagining(true);
-      await props.onImagine(messageText);
-      setIsImagining(false);
-      closeOperationsMenu();
-    }
-  };
-
-  const handleMenuSpeak = async (e: React.MouseEvent) => {
-    e.preventDefault();
-    setIsSpeaking(true);
-    await speakText(messageText);
-    setIsSpeaking(false);
+    props.onConversationBranch && props.onConversationBranch(messageId);
     closeOperationsMenu();
   };
 
-  const handleMenuRunAgain = (e: React.MouseEvent) => {
+  const handleOpsConversationRestartFrom = (e: React.MouseEvent) => {
     e.preventDefault();
-    if (props.onMessageRunFrom) {
-      props.onMessageRunFrom(fromAssistant ? -1 : 0);
+    props.onConversationRestartFrom && props.onConversationRestartFrom(messageId, fromAssistant ? -1 : 0);
+    closeOperationsMenu();
+  };
+
+  const handleOpsToggleShowDiff = () => setShowDiff(!showDiff);
+
+  const handleOpsDiagram = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (props.onTextDiagram) {
+      await props.onTextDiagram(messageId, textSel);
       closeOperationsMenu();
+      closeSelectionMenu();
     }
   };
 
-  const handleTextEdited = (editedText: string) => {
-    setIsEditing(false);
-    if (editedText?.trim() && editedText !== messageText)
-      props.onMessageEdit(editedText);
+  const handleOpsImagine = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (props.onTextImagine) {
+      await props.onTextImagine(textSel);
+      closeOperationsMenu();
+      closeSelectionMenu();
+    }
   };
 
-  const handleExpand = () => setForceExpanded(true);
+  const handleOpsSpeak = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (props.onTextSpeak) {
+      await props.onTextSpeak(textSel);
+      closeOperationsMenu();
+      closeSelectionMenu();
+    }
+  };
+
+  const handleOpsTruncate = (_e: React.MouseEvent) => {
+    props.onConversationTruncate && props.onConversationTruncate(messageId);
+    closeOperationsMenu();
+  };
+
+  const handleOpsDelete = (_e: React.MouseEvent) => {
+    props.onMessageDelete && props.onMessageDelete(messageId);
+  };
 
 
-  // soft error handling
+  // Selection Menu
+
+  const removeSelectionAnchor = React.useCallback(() => {
+    if (selMenuAnchor) {
+      try {
+        document.body.removeChild(selMenuAnchor);
+      } catch (e) {
+        // ignore...
+      }
+    }
+  }, [selMenuAnchor]);
+
+  const openSelectionMenu = React.useCallback((event: MouseEvent, selectedText: string) => {
+    event.stopPropagation();
+    event.preventDefault();
+
+    // remove any stray anchor
+    removeSelectionAnchor();
+
+    // create a temporary fixed anchor element to position the menu
+    const anchorEl = document.createElement('div');
+    anchorEl.style.position = 'fixed';
+    anchorEl.style.left = `${event.clientX}px`;
+    anchorEl.style.top = `${event.clientY}px`;
+    document.body.appendChild(anchorEl);
+
+    setSelMenuAnchor(anchorEl);
+    setSelMenuText(selectedText);
+  }, [removeSelectionAnchor]);
+
+  const closeSelectionMenu = React.useCallback(() => {
+    // window.getSelection()?.removeAllRanges?.();
+    removeSelectionAnchor();
+    setSelMenuAnchor(null);
+    setSelMenuText(null);
+  }, [removeSelectionAnchor]);
+
+  const handleMouseUp = React.useCallback((event: MouseEvent) => {
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const selectedText = range.toString().trim();
+      if (selectedText.length > 0)
+        openSelectionMenu(event, selectedText);
+    }
+  }, [openSelectionMenu]);
+
+
+  // prettier upstream errors
   const { isAssistantError, errorMessage } = React.useMemo(
     () => explainErrorInMessage(messageText, fromAssistant, messageOriginLLM),
     [messageText, fromAssistant, messageOriginLLM],
@@ -292,25 +413,29 @@ export function ChatMessage(props: { message: DMessage, diffText?: string, showD
   // 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: fromAssistant ? 'neutral.plainHoverBg' : 'primary.plainActiveBg',
+    backgroundColor: props.codeBackground ? props.codeBackground : fromAssistant ? 'neutral.plainHoverBg' : 'primary.plainActiveBg',
     boxShadow: 'xs',
-    fontFamily: theme.fontFamily.code,
-    fontSize: '14px',
+    fontFamily: 'code',
+    fontSize: '0.875rem',
     fontVariantLigatures: 'none',
-    lineHeight: 1.75,
+    lineHeight: lineHeightChatText,
     borderRadius: 'var(--joy-radius-sm)',
   };
 
   // user message truncation
   let collapsedText = messageText;
   let isCollapsed = false;
-  if (fromUser && !forceExpanded) {
+  if (fromUser && !forceUserExpanded) {
     const lines = messageText.split('\n');
-    if (lines.length > 10) {
-      collapsedText = lines.slice(0, 10).join('\n');
+    if (lines.length > USER_COLLAPSED_LINES) {
+      collapsedText = lines.slice(0, USER_COLLAPSED_LINES).join('\n');
       isCollapsed = true;
     }
   }
@@ -318,8 +443,6 @@ export function ChatMessage(props: { message: DMessage, diffText?: string, showD
 
   return (
     <ListItem
-      // [alpha] Right-click menu: still in early development
-      // onContextMenu={event => setMenuAnchor(event.currentTarget)}
       sx={{
         display: 'flex', flexDirection: !fromAssistant ? 'row-reverse' : 'row', alignItems: 'flex-start',
         gap: { xs: 0, md: 1 }, px: { xs: 1, md: 2 }, py: 2,
@@ -328,51 +451,70 @@ export function ChatMessage(props: { message: DMessage, diffText?: string, showD
           borderBottom: '1px solid',
           borderBottomColor: 'divider',
         }),
-        ...(ENABLE_COPY_MESSAGE && { position: 'relative' }),
-        ...(props.isBottom === true && { mb: 'auto' }),
+        ...(ENABLE_COPY_MESSAGE_OVERLAY && { position: 'relative' }),
         '&:hover > button': { opacity: 1 },
+        ...props.sx,
       }}
     >
 
       {/* Avatar */}
-      {showAvatars && <Stack
-        sx={{ alignItems: 'center', minWidth: { xs: 50, md: 64 }, maxWidth: 80, textAlign: 'center' }}
-        onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}
-        onClick={event => setMenuAnchor(event.currentTarget)}>
+      {showAvatars && (
+        <Box
+          onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}
+          onClick={event => setOpsMenuAnchor(event.currentTarget)}
+          sx={{
+            // flexBasis: 0, // this won't let the item grow
+            display: 'flex', flexDirection: 'column', alignItems: 'center',
+            minWidth: { xs: 50, md: 64 }, maxWidth: 80,
+            textAlign: 'center',
+          }}
+        >
 
-        {isHovering ? (
-          <IconButton variant='soft' color={fromAssistant ? 'neutral' : 'primary'}>
-            <MoreVertIcon />
-          </IconButton>
-        ) : (
-          avatarEl
-        )}
+          {isHovering ? (
+            <IconButton variant='soft' color={fromAssistant ? 'neutral' : 'primary'} sx={avatarIconSx}>
+              <MoreVertIcon />
+            </IconButton>
+          ) : (
+            avatarEl
+          )}
 
-        {/* Assistant model name */}
-        {fromAssistant && (
-          <Tooltip title={messageOriginLLM || 'unk-model'} variant='solid'>
-            <Typography level='body-sm' sx={{
-              fontSize: { xs: 'xs', sm: 'sm' }, fontWeight: 500,
-              overflowWrap: 'anywhere',
-              ...(messageTyping ? { animation: `${cssRainbowColorKeyframes} 5s linear infinite` } : {}),
-            }}>
-              {prettyBaseModel(messageOriginLLM)}
-            </Typography>
-          </Tooltip>
-        )}
+          {/* Assistant model name */}
+          {fromAssistant && (
+            <Tooltip title={messageOriginLLM || 'unk-model'} variant='solid'>
+              <Typography level='body-xs' sx={{
+                overflowWrap: 'anywhere',
+                ...(messageTyping ? { animation: `${cssRainbowColorKeyframes} 5s linear infinite` } : {}),
+              }}>
+                {prettyBaseModel(messageOriginLLM)}
+              </Typography>
+            </Tooltip>
+          )}
 
-      </Stack>}
+        </Box>
+      )}
 
 
       {/* Edit / Blocks */}
-      {!isEditing ? (
+      {isEditing
 
-        <Box
-          onDoubleClick={(e) => doubleClickToEdit ? handleMenuEdit(e) : null}
+        ? <InlineTextarea
+          initialText={messageText} onEdit={handleTextEdited}
+          sx={{
+            ...blockSx,
+            flexGrow: 1,
+          }} />
+
+        : <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 && (
@@ -386,30 +528,33 @@ export function ChatMessage(props: { message: DMessage, diffText?: string, showD
             <Typography level='body-sm' color='warning' sx={{ mt: 1, mx: 1.5 }}>modified by user - auto-update disabled</Typography>
           )}
 
-          {!errorMessage && parseBlocks(collapsedText, fromSystem, diffs).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} />
-                : block.type === 'image'
-                  ? <RenderImage key={'image-' + index} imageBlock={block} allowRunAgain={props.isBottom === true} onRunAgain={handleMenuRunAgain} />
-                  : block.type === 'latex'
-                    ? <RenderLatex key={'latex-' + index} latexBlock={block} />
-                    : block.type === 'diff'
-                      ? <RenderTextDiff key={'latex-' + index} diffBlock={block} />
-                      : renderMarkdown
-                        ? <RenderMarkdown key={'text-md-' + index} textBlock={block} />
-                        : <RenderText key={'text-' + index} textBlock={block} />,
-          )}
-
           {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={handleExpand}>... expand ...</Button>
+            <Button variant='plain' color='neutral' onClick={handleUncollapse}>... expand ...</Button>
           )}
 
           {/* import VisibilityIcon from '@mui/icons-material/Visibility'; */}
@@ -419,19 +564,14 @@ export function ChatMessage(props: { message: DMessage, diffText?: string, showD
           {/*</Chip>*/}
 
         </Box>
-
-      ) : (
-
-        <InlineTextarea initialText={messageText} onEdit={handleTextEdited} sx={{ ...blockSx, lineHeight: 1.75, flexGrow: 1 }} />
-
-      )}
+      }
 
 
-      {/* Copy message */}
-      {ENABLE_COPY_MESSAGE && !fromSystem && !isEditing && (
+      {/* Overlay copy icon */}
+      {ENABLE_COPY_MESSAGE_OVERLAY && !fromSystem && !isEditing && (
         <Tooltip title={fromAssistant ? 'Copy message' : 'Copy input'} variant='solid'>
           <IconButton
-            variant='outlined' color='neutral' onClick={handleMenuCopy}
+            variant='outlined' onClick={handleOpsCopy}
             sx={{
               position: 'absolute', ...(fromAssistant ? { right: { xs: 12, md: 28 } } : { left: { xs: 12, md: 28 } }), zIndex: 10,
               opacity: 0, transition: 'opacity 0.3s',
@@ -442,60 +582,110 @@ export function ChatMessage(props: { message: DMessage, diffText?: string, showD
       )}
 
 
-      {/* Message Operations menu */}
-      {!!menuAnchor && (
+      {/* Operations Menu (3 dots) */}
+      {!!opsMenuAnchor && (
         <CloseableMenu
-          placement='bottom-end' sx={{ minWidth: 280 }}
-          open anchorEl={menuAnchor} onClose={closeOperationsMenu}
+          dense placement='bottom-end' sx={{ minWidth: 280 }}
+          open anchorEl={opsMenuAnchor} onClose={closeOperationsMenu}
         >
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <MenuItem variant='plain' disabled={messageTyping} onClick={handleMenuEdit} sx={{ flex: 1 }}>
-              <ListItemDecorator><EditIcon /></ListItemDecorator>
-              {isEditing ? 'Discard' : 'Edit'}
-              {/*{!isEditing && <span style={{ opacity: 0.5, marginLeft: '8px' }}>{doubleClickToEdit ? '(double-click)' : ''}</span>}*/}
-            </MenuItem>
-            <MenuItem onClick={handleMenuCopy} sx={{ flex: 1 }}>
+            {!!props.onMessageEdit && (
+              <MenuItem variant='plain' disabled={messageTyping} onClick={handleOpsEdit} sx={{ flex: 1 }}>
+                <ListItemDecorator><EditIcon /></ListItemDecorator>
+                {isEditing ? 'Discard' : 'Edit'}
+                {/*{!isEditing && <span style={{ opacity: 0.5, marginLeft: '8px' }}>{doubleClickToEdit ? '(double-click)' : ''}</span>}*/}
+              </MenuItem>
+            )}
+            <MenuItem onClick={handleOpsCopy} sx={{ flex: 1 }}>
               <ListItemDecorator><ContentCopyIcon /></ListItemDecorator>
               Copy
             </MenuItem>
           </Box>
+          {!!props.diffPreviousText && <ListDivider />}
+          {!!props.diffPreviousText && (
+            <MenuItem onClick={handleOpsToggleShowDiff}>
+              <ListItemDecorator><DifferenceIcon /></ListItemDecorator>
+              Show difference
+              <Switch checked={showDiff} onChange={handleOpsToggleShowDiff} sx={{ ml: 'auto' }} />
+            </MenuItem>
+          )}
           <ListDivider />
-          {!!props.onMessageRunFrom && (
-            <MenuItem onClick={handleMenuRunAgain}>
-              <ListItemDecorator>{fromAssistant ? <ReplayIcon /> : <FastForwardIcon />}</ListItemDecorator>
+          {!!props.onConversationRestartFrom && (
+            <MenuItem onClick={handleOpsConversationRestartFrom}>
+              <ListItemDecorator>{fromAssistant ? <ReplayIcon /> : <TelegramIcon />}</ListItemDecorator>
               {!fromAssistant
-                ? 'Run from here'
+                ? <>Restart <span style={{ opacity: 0.5 }}>from here</span></>
                 : !props.isBottom
-                  ? 'Retry from here'
+                  ? <>Retry <span style={{ opacity: 0.5 }}>from here</span></>
                   : <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
                     Retry
-                    <KeyStroke light combo='Ctrl + Shift + R' sx={hideOnMobile} />
+                    <KeyStroke combo='Ctrl + Shift + R' />
                   </Box>
               }
             </MenuItem>
           )}
-          {isImaginable && isImaginableEnabled && (
-            <MenuItem onClick={handleMenuImagine} disabled={!isImaginableEnabled || isImagining}>
-              <ListItemDecorator>{isImagining ? <CircularProgress size='sm' /> : <FormatPaintIcon color='success' />}</ListItemDecorator>
-              Imagine
+          {!!props.onConversationBranch && (
+            <MenuItem onClick={handleOpsConversationBranch} disabled={fromSystem}>
+              <ListItemDecorator>
+                <ForkRightIcon />
+              </ListItemDecorator>
+              Branch {!props.isBottom && <span style={{ opacity: 0.5 }}>from here</span>}
             </MenuItem>
           )}
-          {isSpeakable && isSpeakableEnabled && (
-            <MenuItem onClick={handleMenuSpeak} disabled={isSpeaking}>
-              <ListItemDecorator>{isSpeaking ? <CircularProgress size='sm' /> : <RecordVoiceOverIcon color='success' />}</ListItemDecorator>
-              Speak
+          {!!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.onMessageRunFrom && <ListDivider />}
           {!!props.onMessageDelete && (
-            <MenuItem onClick={props.onMessageDelete} disabled={false /*fromSystem*/}>
+            <MenuItem onClick={handleOpsDelete} disabled={false /*fromSystem*/}>
               <ListItemDecorator><ClearIcon /></ListItemDecorator>
-              Delete
+              Delete <span style={{ opacity: 0.5 }}>message</span>
             </MenuItem>
           )}
         </CloseableMenu>
       )}
 
+      {/* Selection (Contextual) Menu */}
+      {!!selMenuAnchor && (
+        <CloseableMenu
+          dense placement='bottom-start' sx={{ minWidth: 220 }}
+          open anchorEl={selMenuAnchor} onClose={closeSelectionMenu}
+        >
+          <MenuItem onClick={handleOpsCopy} sx={{ flex: 1 }}>
+            <ListItemDecorator><ContentCopyIcon /></ListItemDecorator>
+            Copy <span style={{ opacity: 0.5 }}>selection</span>
+          </MenuItem>
+          {!!props.onTextDiagram && <MenuItem onClick={handleOpsDiagram} disabled={!couldDiagram || props.isImagining}>
+            <ListItemDecorator><AccountTreeIcon color='success' /></ListItemDecorator>
+            Visualize ...
+          </MenuItem>}
+          {!!props.onTextImagine && <MenuItem onClick={handleOpsImagine} disabled={!couldImagine || props.isImagining}>
+            <ListItemDecorator>{props.isImagining ? <CircularProgress size='sm' /> : <FormatPaintIcon color='success' />}</ListItemDecorator>
+            Imagine
+          </MenuItem>}
+          {!!props.onTextSpeak && <MenuItem onClick={handleOpsSpeak} disabled={!couldSpeak || props.isSpeaking}>
+            <ListItemDecorator>{props.isSpeaking ? <CircularProgress size='sm' /> : <RecordVoiceOverIcon color='success' />}</ListItemDecorator>
+            Speak
+          </MenuItem>}
+        </CloseableMenu>
+      )}
+
     </ListItem>
   );
 }

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

@@ -6,14 +6,14 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 
 import { DMessage } from '~/common/state/store-chats';
 
-import { TokenBadge } from '../composer/TokenBadge';
+import { TokenBadgeMemo } from '../composer/TokenBadge';
 import { makeAvatar, messageBackground } from './ChatMessage';
 
 
 /**
  * Header bar for controlling the operations during the Selection mode
  */
-export const MessagesSelectionHeader = (props: { hasSelected: boolean, isBottom: boolean, sumTokens: number, onClose: () => void, onSelectAll: (selected: boolean) => void, onDeleteMessages: () => void }) =>
+export const MessagesSelectionHeader = (props: { hasSelected: boolean, sumTokens: number, onClose: () => void, onSelectAll: (selected: boolean) => void, onDeleteMessages: () => void }) =>
   <Sheet color='warning' variant='solid' invertedColors sx={{
     display: 'flex', flexDirection: 'row', alignItems: 'center',
     position: 'fixed', top: 0, left: 0, right: 0, zIndex: 101,
@@ -28,7 +28,7 @@ export const MessagesSelectionHeader = (props: { hasSelected: boolean, isBottom:
       Delete
     </Button>
 
-    <IconButton variant='plain' onClick={props.onClose}>
+    <IconButton onClick={props.onClose}>
       <ClearIcon />
     </IconButton>
   </Sheet>;
@@ -39,7 +39,7 @@ export const MessagesSelectionHeader = (props: { hasSelected: boolean, isBottom:
  *
  * Shall look similarly to the main ChatMessage, for consistency, but just allow a simple checkbox selection
  */
-export function CleanerMessage(props: { message: DMessage, isBottom: boolean, selected: boolean, remainingTokens?: number, onToggleSelected?: (messageId: string, selected: boolean) => void }) {
+export function CleanerMessage(props: { message: DMessage, selected: boolean, remainingTokens?: number, onToggleSelected?: (messageId: string, selected: boolean) => void }) {
 
   // derived state
   const {
@@ -77,7 +77,6 @@ export function CleanerMessage(props: { message: DMessage, isBottom: boolean, se
       borderBottom: '1px solid',
       borderBottomColor: 'divider',
       // position: 'relative',
-      ...(props.isBottom && { mb: 'auto' }),
       '&:hover > button': { opacity: 1 },
     }}>
 
@@ -85,7 +84,7 @@ export function CleanerMessage(props: { message: DMessage, isBottom: boolean, se
         <Checkbox size='md' checked={props.selected} onChange={handleCheckedChange} />
       </Box>}
 
-      <Box sx={{ display: 'flex', minWidth: { xs: 40, sm: 48 }, justifyContent: 'center' }}>
+      <Box sx={{ display: { xs: 'none', sm: 'flex' }, minWidth: { xs: 40, sm: 48 }, justifyContent: 'center' }}>
         {avatarEl}
       </Box>
 
@@ -94,10 +93,18 @@ export function CleanerMessage(props: { message: DMessage, isBottom: boolean, se
       </Typography>
 
       {props.remainingTokens !== undefined && <Box sx={{ display: 'flex', minWidth: { xs: 32, sm: 45 }, justifyContent: 'flex-end' }}>
-        <TokenBadge directTokens={messageTokenCount} tokenLimit={props.remainingTokens} inline />
+        <TokenBadgeMemo direct={messageTokenCount} limit={props.remainingTokens} inline />
       </Box>}
 
-      <Typography sx={{ flexGrow: 1, textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>
+      <Typography level='body-md' sx={{
+        flexGrow: 1,
+        textOverflow: 'ellipsis', overflow: 'hidden',
+        // whiteSpace: 'nowrap',
+        display: '-webkit-box',
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: 'vertical',
+        maxHeight: '2.9em',
+      }}>
         {messageText}
       </Typography>
 

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

@@ -8,66 +8,39 @@ 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/copyToClipboard';
+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';
 
 
+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)' },
+};
+
 function RenderCodeImpl(props: {
-  codeBlock: CodeBlock, sx?: SxProps,
+  codeBlock: CodeBlock, noCopyButton?: boolean, sx?: SxProps,
   highlightCode: (inferredCodeLanguage: string | null, blockCode: string) => string,
   inferCodeLanguage: (blockTitle: string, code: string) => string | null,
 }) {
+
   // state
   const [showHTML, setShowHTML] = React.useState(false);
-  const [showSVG, setShowSVG] = React.useState(true);
+  const [showMermaid, setShowMermaid] = React.useState(true);
   const [showPlantUML, setShowPlantUML] = React.useState(true);
+  const [showSVG, setShowSVG] = React.useState(true);
 
   // derived props
-  const { codeBlock: { blockTitle, blockCode }, highlightCode, inferCodeLanguage } = props;
-
-  const isHTML = heuristicIsHtml(blockCode);
-  const renderHTML = isHTML && showHTML;
-
-  const isSVG = blockCode.startsWith('<svg') && blockCode.endsWith('</svg>');
-  const renderSVG = isSVG && showSVG;
-
-  const isPlantUML =
-    (blockCode.startsWith('@startuml') && blockCode.endsWith('@enduml'))
-    || (blockCode.startsWith('@startmindmap') && blockCode.endsWith('@endmindmap'))
-    || (blockCode.startsWith('@startsalt') && blockCode.endsWith('@endsalt'))
-    || (blockCode.startsWith('@startwbs') && blockCode.endsWith('@endwbs'))
-    || (blockCode.startsWith('@startgantt') && blockCode.endsWith('@endgantt'));
-
-  let renderPlantUML = isPlantUML && showPlantUML;
-  const { data: plantUmlHtmlData } = useQuery({
-    enabled: renderPlantUML,
-    queryKey: ['plantuml', blockCode],
-    queryFn: async () => {
-      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}`);
-        const svg = await response.text();
-        const start = svg.indexOf('<svg ');
-        const end = svg.indexOf('</svg>');
-        if (start < 0 || end <= start)
-          return null;
-        return svg.slice(start, end + 6).replace('background:#FFFFFF;', '');
-      } catch (e) {
-        // ignore errors, and disable the component in that case
-        return null;
-      }
-    },
-    staleTime: 24 * 60 * 60 * 1000, // 1 day
-  });
-  renderPlantUML = renderPlantUML && !!plantUmlHtmlData;
+  const {
+    codeBlock: { blockTitle, blockCode, complete: blockComplete },
+    highlightCode, inferCodeLanguage,
+  } = props;
 
   // heuristic for language, and syntax highlight
   const { highlightedCode, inferredCodeLanguage } = React.useMemo(
@@ -78,6 +51,62 @@ function RenderCodeImpl(props: {
     }, [inferCodeLanguage, blockTitle, blockCode, highlightCode]);
 
 
+  // heuristics for specialized rendering
+
+  const isHTML = heuristicIsHtml(blockCode);
+  const renderHTML = isHTML && showHTML;
+
+  const isMermaid = blockTitle === 'mermaid' && blockComplete;
+  const renderMermaid = isMermaid && showMermaid;
+
+  const isPlantUML =
+    (blockCode.startsWith('@startuml') && blockCode.endsWith('@enduml'))
+    || (blockCode.startsWith('@startmindmap') && blockCode.endsWith('@endmindmap'))
+    || (blockCode.startsWith('@startsalt') && blockCode.endsWith('@endsalt'))
+    || (blockCode.startsWith('@startwbs') && blockCode.endsWith('@endwbs'))
+    || (blockCode.startsWith('@startgantt') && blockCode.endsWith('@endgantt'));
+
+  let renderPlantUML = isPlantUML && showPlantUML;
+  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;
+    },
+    staleTime: 24 * 60 * 60 * 1000, // 1 day
+  });
+  renderPlantUML = renderPlantUML && (!!plantUmlHtmlData || !!plantUmlError);
+
+  const isSVG = blockCode.startsWith('<svg') && blockCode.endsWith('</svg>');
+  const renderSVG = isSVG && showSVG;
+
+
   const languagesCodepen = ['html', 'css', 'javascript', 'json', 'typescript'];
   const canCodepen = isSVG || (!!inferredCodeLanguage && languagesCodepen.includes(inferredCodeLanguage));
 
@@ -86,84 +115,93 @@ function RenderCodeImpl(props: {
 
   const handleCopyToClipboard = (e: React.MouseEvent) => {
     e.stopPropagation();
-    copyToClipboard(blockCode);
+    copyToClipboard(blockCode, 'Code');
   };
 
   return (
-    <Box
-      component='code'
-      className={`language-${inferredCodeLanguage || 'unknown'}`}
-      sx={{
-        position: 'relative', mx: 0, p: 1.5, // this block gets a thicker border
-        display: 'block', fontWeight: 500,
-        whiteSpace: 'pre', // was 'break-spaces' before we implmented per-block scrolling
-        overflowX: 'auto',
-        '&:hover > .code-buttons': { opacity: 1 },
-        ...(props.sx || {}),
-      }}>
-
-      {/* Overlay Buttons */}
+    <Box sx={{ position: 'relative' /* for overlay buttons to stick properly */ }}>
       <Box
-        className='code-buttons'
+        component='code'
+        className={`language-${inferredCodeLanguage || 'unknown'}`}
         sx={{
-          backdropFilter: 'blur(8px)', // '... grayscale(0.8)
-          position: 'absolute', top: 0, right: 0, zIndex: 10, p: 0.5,
-          display: 'flex', flexDirection: 'row', gap: 1,
-          opacity: 0, transition: 'opacity 0.3s',
-          // '& > button': { backdropFilter: 'blur(6px)' },
+          fontWeight: 500, whiteSpace: 'pre', // was 'break-spaces' before we implemented per-block scrolling
+          mx: 0, p: 1.5, // this block gets a thicker border
+          display: 'block',
+          overflowX: 'auto',
+          '&:hover > .overlay-buttons': { opacity: 1 },
+          ...(props.sx || {}),
         }}>
-        {isSVG && (
-          <Tooltip title={renderSVG ? 'Show Code' : 'Render SVG'} variant='solid'>
-            <IconButton variant={renderSVG ? 'solid' : 'soft'} color='neutral' onClick={() => setShowSVG(!showSVG)}>
-              <ShapeLineOutlinedIcon />
-            </IconButton>
-          </Tooltip>
+
+        {/* Markdown Title (File/Type) */}
+        {blockTitle != inferredCodeLanguage && blockTitle.includes('.') && (
+          <Sheet sx={{ boxShadow: 'sm', borderRadius: 'sm', mb: 1 }}>
+            <Typography level='title-sm' sx={{ px: 1, py: 0.5 }}>
+              {blockTitle}
+              {/*{inferredCodeLanguage}*/}
+            </Typography>
+          </Sheet>
         )}
-        {isHTML && (
-          <Tooltip title={renderHTML ? 'Hide' : 'Show Web Page'} variant='solid'>
-            <IconButton variant={renderHTML ? 'solid' : 'soft'} color='danger' onClick={() => setShowHTML(!showHTML)}>
-              <HtmlIcon />
+
+        {/* Renders HTML, or inline SVG, inline plantUML rendered, or highlighted code */}
+        {renderHTML
+          ? <IFrameComponent htmlString={blockCode} />
+          : renderMermaid
+            ? <RenderCodeMermaid mermaidCode={blockCode} />
+            : <Box component='div'
+                   dangerouslySetInnerHTML={{
+                     __html:
+                       renderSVG
+                         ? blockCode
+                         : renderPlantUML
+                           ? (plantUmlHtmlData || (plantUmlError as string) || 'No PlantUML rendering.')
+                           : highlightedCode,
+                   }}
+                   sx={{
+                     ...(renderSVG ? { lineHeight: 0 } : {}),
+                     ...(renderPlantUML ? { textAlign: 'center' } : {}),
+                   }}
+            />}
+
+        {/* Code 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)}>
+                <HtmlIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+          {isMermaid && (
+            <Tooltip title={renderMermaid ? 'Show Code' : 'Render Mermaid'} variant='solid'>
+              <IconButton variant={renderMermaid ? 'solid' : 'outlined'} onClick={() => setShowMermaid(!showMermaid)}>
+                <SchemaIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+          {isPlantUML && (
+            <Tooltip title={renderPlantUML ? 'Show Code' : 'Render PlantUML'} variant='solid'>
+              <IconButton variant={renderPlantUML ? 'solid' : 'outlined'} onClick={() => setShowPlantUML(!showPlantUML)}>
+                <SchemaIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+          {isSVG && (
+            <Tooltip title={renderSVG ? 'Show Code' : 'Render SVG'} variant='solid'>
+              <IconButton variant={renderSVG ? 'solid' : 'outlined'} 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>
-        )}
-        {isPlantUML && (
-          <Tooltip title={renderPlantUML ? 'Show Code' : 'Render PlantUML'} variant='solid'>
-            <IconButton variant={renderPlantUML ? 'solid' : 'soft'} color='neutral' onClick={() => setShowPlantUML(!showPlantUML)}>
-              <SchemaIcon />
-            </IconButton>
-          </Tooltip>
-        )}
-        {canCodepen && <OpenInCodepen codeBlock={{ code: blockCode, language: inferredCodeLanguage || undefined }} />}
-        {canReplit && <OpenInReplit codeBlock={{ code: blockCode, language: inferredCodeLanguage || undefined }} />}
-        <Tooltip title='Copy Code' variant='solid'>
-          <IconButton variant='outlined' color='neutral' onClick={handleCopyToClipboard}>
-            <ContentCopyIcon />
-          </IconButton>
-        </Tooltip>
+          </Tooltip>}
+        </Box>
+
       </Box>
-
-      {/* Title (highlighted code) */}
-      {blockTitle != inferredCodeLanguage && blockTitle.includes('.') && <Sheet sx={{ boxShadow: 'sm', borderRadius: 'sm', mb: 1 }}>
-        <Typography level='title-sm' sx={{ px: 1, py: 0.5 }}>
-          {blockTitle}
-          {/*{inferredCodeLanguage}*/}
-        </Typography>
-      </Sheet>}
-
-      {/* Renders HTML, or inline SVG, inline plantUML rendered, or highlighted code */}
-      {renderHTML ? <IFrameComponent htmlString={blockCode} />
-        : <Box
-          dangerouslySetInnerHTML={{
-            __html:
-              renderSVG ? blockCode
-                : (renderPlantUML && plantUmlHtmlData) ? plantUmlHtmlData
-                  : highlightedCode,
-          }}
-          sx={{
-            ...(renderSVG ? { lineHeight: 0 } : {}),
-            ...(renderPlantUML ? { textAlign: 'center' } : {}),
-          }}
-        />}
     </Box>
   );
 }
@@ -175,12 +213,12 @@ const RenderCodeDynamic = React.lazy(async () => {
   const { highlightCode, inferCodeLanguage } = await import('./codePrism');
 
   return {
-    default: (props: { codeBlock: CodeBlock, sx?: SxProps }) =>
+    default: (props: { codeBlock: CodeBlock, noCopyButton?: boolean, sx?: SxProps }) =>
       <RenderCodeImpl highlightCode={highlightCode} inferCodeLanguage={inferCodeLanguage} {...props} />,
   };
 });
 
-export const RenderCode = (props: { codeBlock: CodeBlock, sx?: SxProps }) =>
+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>;

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

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { create } from 'zustand';
+
+import { Box } from '@mui/joy';
+
+import { appTheme } from '~/common/app.theme';
+import { isBrowser } from '~/common/util/pwaUtils';
+
+
+/**
+ * We are loading Mermaid from the CDN (and spending all the work to dynamically load it
+ * and strong type it), because the Mermaid dependencies (npm i mermaid) are too heavy
+ * and would slow down development for everyone.
+ *
+ * If you update this file, also make sure the interfaces/type definitions and initialization
+ * options are updated accordingly.
+ */
+const MERMAID_CDN_FILE: string = 'https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js';
+
+
+interface MermaidAPI {
+  initialize: (config: any) => void;
+  render: (id: string, text: string, svgContainingElement?: Element) => Promise<{ svg: string, bindFunctions?: (element: Element) => void }>;
+}
+
+// extend the Window interface, to allow for the mermaid API to be found
+declare global {
+  // noinspection JSUnusedGlobalSymbols
+  interface Window {
+    mermaid: MermaidAPI;
+  }
+}
+
+interface MermaidAPIStore {
+  mermaidAPI: MermaidAPI | null,
+  loadingError: string | null,
+}
+
+const useMermaidStore = create<MermaidAPIStore>()(
+  () => ({
+    mermaidAPI: null,
+    loadingError: null,
+  }),
+);
+
+let loadingStarted: boolean = false;
+let loadingError: string | null = null;
+
+
+function loadMermaidFromCDN() {
+  if (isBrowser && !loadingStarted) {
+    loadingStarted = true;
+    const script = document.createElement('script');
+    script.src = MERMAID_CDN_FILE;
+    script.defer = true;
+    script.onload = () => {
+      useMermaidStore.setState({
+        mermaidAPI: initializeMermaid(window.mermaid),
+        loadingError: null,
+      });
+    };
+    script.onerror = () => {
+      useMermaidStore.setState({
+        mermaidAPI: null,
+        loadingError: `Script load error for ${script.src}`,
+      });
+    };
+    document.head.appendChild(script);
+  }
+}
+
+function initializeMermaid(mermaidAPI: MermaidAPI): MermaidAPI {
+  mermaidAPI.initialize({
+    startOnLoad: false,
+
+    // gfx options
+    fontFamily: appTheme.fontFamily.code,
+    altFontFamily: appTheme.fontFamily.body,
+
+    // style configuration
+    htmlLabels: true,
+    securityLevel: 'loose',
+    theme: 'forest',
+
+    // per-chart configuration
+    mindmap: { useMaxWidth: false },
+    flowchart: { useMaxWidth: false },
+    sequence: { useMaxWidth: false },
+    timeline: { useMaxWidth: false },
+    class: { useMaxWidth: false },
+    state: { useMaxWidth: false },
+    pie: { useMaxWidth: false },
+    er: { useMaxWidth: false },
+    gantt: { useMaxWidth: false },
+    gitGraph: { useMaxWidth: false },
+  });
+  return mermaidAPI;
+}
+
+function useMermaidLoader() {
+  const { mermaidAPI } = useMermaidStore();
+  React.useEffect(() => {
+    if (!mermaidAPI)
+      loadMermaidFromCDN();
+  }, [mermaidAPI]);
+  return { mermaidAPI, isSuccess: !!mermaidAPI, isLoading: loadingStarted, error: loadingError };
+}
+
+
+export function RenderCodeMermaid(props: { mermaidCode: string }) {
+
+  // state
+  const [svgCode, setSvgCode] = React.useState<string | null>(null);
+  const hasUnmounted = React.useRef(false);
+  const mermaidContainerRef = React.useRef<HTMLDivElement>(null);
+
+  // external state
+  const { mermaidAPI, error: mermaidError } = useMermaidLoader();
+
+
+  // [effect] re-render on code changes
+  React.useEffect(() => {
+
+    if (!mermaidAPI)
+      return;
+
+    const updateSvgCode = () => {
+      const elementId = `mermaid-${Math.random().toString(36).substring(2, 9)}`;
+      mermaidAPI
+        .render(elementId, props.mermaidCode, mermaidContainerRef.current!)
+        .then(({ svg }) => {
+          if (mermaidContainerRef.current && !hasUnmounted.current) {
+            setSvgCode(svg);
+            // bindFunctions?.(mermaidContainerRef.current);
+          }
+        })
+        .catch((error) =>
+          console.warn('The AI-generated Mermaid code is invalid, please try again. Details below:\n >>', error.message),
+        );
+    };
+
+    // strict-mode de-bounce, plus watch for unmounts
+    hasUnmounted.current = false;
+    const timeout = setTimeout(updateSvgCode, 0);
+    return () => {
+      hasUnmounted.current = true;
+      clearTimeout(timeout);
+    };
+  }, [mermaidAPI, props.mermaidCode]);
+
+
+  // render errors when loading Mermaid. for syntax errors, the Error SVG will be rendered in-place
+  if (mermaidError)
+    return <div>Error: {mermaidError}</div>;
+
+  return (
+    <Box
+      component='div'
+      ref={mermaidContainerRef}
+      dangerouslySetInnerHTML={{ __html: svgCode || 'Loading Diagram...' }}
+    />
+  );
+
+}

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

@@ -2,9 +2,13 @@ import * as React from 'react';
 
 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';
 
 
 // this is used by the blocks parser (for full text detection) and by the Code component (for inline rendering)
@@ -53,50 +57,60 @@ export function RenderHtml(props: { htmlBlock: HtmlBlock, sx?: SxProps }) {
     if (key.startsWith('font'))
       delete sx[key];
 
+  const handleCopyToClipboard = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    copyToClipboard(props.htmlBlock.html, 'HTML');
+  };
+
   return (
-    <Box
-      sx={{
-        position: 'relative', mx: 0, p: 1.5, // this block gets a thicker border
-        minWidth: { xs: '300px', md: '750px', lg: '900px', xl: '1100px' },
-        '&:hover > .code-buttons': { opacity: 1 },
-        ...sx,
-      }}>
-
-      {/* Buttons */}
+    <Box sx={{ position: 'relative' /* for overlay buttons to stick properly */ }}>
       <Box
-        className='code-buttons'
         sx={{
-          position: 'absolute', top: 0, right: 0, zIndex: 10, mr: 7,
-          display: 'flex', flexDirection: 'row', gap: 1,
-          opacity: 0, transition: 'opacity 0.3s',
-        }}>
-        <Tooltip title={showHTML ? 'Hide' : 'Show Web Page'} variant='solid'>
-          <IconButton variant={showHTML ? 'solid' : 'soft'} color='danger' onClick={() => setShowHTML(!showHTML)}>
-            <WebIcon />
-          </IconButton>
-        </Tooltip>
-      </Box>
+          minWidth: { sm: '480px', md: '750px', lg: '950px', xl: '1200px' },
+          mx: 0, p: 1.5, // this block gets a thicker border
+          display: 'block',
+          overflowX: 'auto',
+          '&:hover > .overlay-buttons': { opacity: 1 },
+          ...sx,
+        }}
+      >
 
-      {/* Highlighted Code / SVG render */}
-      {showHTML
-        ? <IFrameComponent htmlString={props.htmlBlock.html} />
-        : <Box>
-          <Typography>
-            <b>CAUTION</b> - The content you are about to access is an HTML page. It is possible that an
-            unauthorized entity is monitoring this connection and has generated this content.
-            Please exercise caution and do not trust the contents blindly. Be aware that proceeding
-            may pose potential risks. Click the button to view the content, if you wish to proceed.
-          </Typography>
-          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', mt: 2 }}>
-            <Button variant='plain' color='neutral' onClick={() => setShowHTML(false)}>
-              Ignore
-            </Button>
-            <Button variant='solid' color='danger' onClick={() => setShowHTML(true)}>
-              Show Web Page
-            </Button>
+        {/* Highlighted Code / SVG render */}
+        {showHTML
+          ? <IFrameComponent htmlString={props.htmlBlock.html} />
+          : <Box>
+            <Typography>
+              <b>CAUTION</b> - The content you are about to access is an HTML page. It is possible that an
+              unauthorized entity is monitoring this connection and has generated this content.
+              Please exercise caution and do not trust the contents blindly. Be aware that proceeding
+              may pose potential risks. Click the button to view the content, if you wish to proceed.
+            </Typography>
+            <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', mt: 2 }}>
+              <Button variant='plain' color='neutral' onClick={() => setShowHTML(false)}>
+                Ignore
+              </Button>
+              <Button variant='solid' color='danger' onClick={() => setShowHTML(true)}>
+                Show Web Page
+              </Button>
+            </Box>
           </Box>
+        }
+
+        {/* External HTML Buttons */}
+        <Box className='overlay-buttons' sx={{ ...overlayButtonsSx, p: 1.5 }}>
+          <Tooltip title={showHTML ? 'Hide' : 'Show Web Page'} variant='solid'>
+            <IconButton variant={showHTML ? 'solid' : 'outlined'} color='danger' onClick={() => setShowHTML(!showHTML)}>
+              <WebIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title='Copy Code' variant='solid'>
+            <IconButton variant='outlined' onClick={handleCopyToClipboard}>
+              <ContentCopyIcon />
+            </IconButton>
+          </Tooltip>
         </Box>
-      }
+
+      </Box>
     </Box>
   );
 }

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

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