70505bd1fc
57f9ec0 added a CSS containment safety net for .markdown-content, but several rendering paths still overflowed or truncated on narrow viewports because they bypass those rules or actively disable wrapping: - Inline code longer than 120 chars renders as `block whitespace-pre` with no scroll container, so it bled past the viewport (white-space:pre defeats overflow-wrap). It now scrolls inside its own box via max-w-full overflow-x-auto. - Wide markdown tables never actually scrolled: Tailwind Typography forces width:100% + table-layout:auto on .prose table, so they shrank to fit instead of overflowing. Switched to a wrapper-<div> pattern (a custom `table` component, the approach used by DeepSeek/others) with min-w-max so wide tables keep natural column widths and scroll inside the conversation column; the old display:block rule on .markdown-content table is removed. - File-reference chips and inline link-preview cards used `truncate`, so long filenames/labels were ellipsized to one line. Now [overflow-wrap:anywhere] sm:truncate — wrap on mobile, truncate on desktop. - User-authored message bubbles don't pass through .markdown-content, so a long URL in the user's own message still burst the screen: under flex min-width:auto, break-words cannot reduce the item's min-content width. Added max-w-full min-w-0 + [overflow-wrap:anywhere]. No JS/agent/provider behavior touched. Desktop layout is unchanged — the new rules only engage when content would otherwise overflow. Verified: bun run lint (clean), bun run test (438 passed), bun run build. Refs #4693 Co-Authored-By: Claude <noreply@anthropic.com>
nanobot WebUI Source
This directory contains the React/TypeScript source for the nanobot WebUI. If
you installed nanobot-ai from PyPI and only want to use the bundled browser UI,
read the user guide in docs/webui.md. You do not need
Node.js, Bun, Vite, or anything in this directory unless you are changing the
frontend.
For the project overview, install guide, and general docs map, see the root README.md and docs/README.md.
Pick a Path
| Goal | Start with | Opens at |
|---|---|---|
| Use the bundled browser UI | docs/webui.md |
http://127.0.0.1:8765 |
| Use the WebUI from another device | docs/webui.md#lan-access |
http://<your-ip>:8765 |
| Change WebUI source code | Develop the WebUI (Vite HMR) | http://127.0.0.1:5173 |
| Debug setup failures | docs/troubleshooting.md#webui-problems |
Diagnosis order and common fixes |
The source app is built with Vite + React 18 + TypeScript + Tailwind 3 + shadcn/ui. It talks to the gateway over the WebSocket multiplex protocol and reads session metadata from the embedded REST surface on the same port.
Layout
webui/ source tree (this directory)
nanobot/web/dist/ build output served by the gateway
Develop the WebUI (Vite HMR)
1. Install nanobot from source
From the repository root:
python -m pip install -e .
Editable installs intentionally skip the WebUI bundle step — Vite HMR is faster than rebuilding
dist/on every change.
2. Enable the WebSocket channel
In ~/.nanobot/config.json, merge:
{ "channels": { "websocket": { "enabled": true } } }
3. Start the gateway
In one terminal:
nanobot gateway
4. Start the WebUI dev server
In another terminal:
cd webui
bun install # npm install also works
bun run dev
Then open http://127.0.0.1:5173.
By default the dev server proxies /api, /webui, /auth, and WebSocket traffic to http://127.0.0.1:8765.
If your gateway listens on a non-default port, point the dev server at it:
NANOBOT_API_URL=http://127.0.0.1:9000 bun run dev
Build for packaged runtime
You usually do not need to run this by hand: python -m build invokes the WebUI build automatically when packaging the wheel.
If you want to preview the production bundle locally without rebuilding the wheel:
cd webui
bun run build # writes to ../nanobot/web/dist
The gateway picks up the new bundle on the next restart.
Test
cd webui
bun run test
Acknowledgements
agent-chat-uifor UI and interaction inspiration across the chat surface.