Skip to content

feat: add echarts-in-chat desktop plugin - #11

Open
Tommy00748 wants to merge 1 commit into
NousResearch:mainfrom
Tommy00748:feat/echarts-in-chat
Open

feat: add echarts-in-chat desktop plugin#11
Tommy00748 wants to merge 1 commit into
NousResearch:mainfrom
Tommy00748:feat/echarts-in-chat

Conversation

@Tommy00748

Copy link
Copy Markdown

What

Add echarts-in-chat — a desktop plugin that renders ```echarts code blocks in the Hermes Desktop conversation stream as live, interactive charts (zoomable, legend-filterable, resize-aware), replacing the static code block in place.

What it demonstrates

  • Message-stream DOM injection — turning a rendered code block into a live component inside the chat (a pure-frontend plugin surface not yet covered in this repo).
  • Reload-safe singleton — survives repeated ⌘K reloads without stacking duplicate observers or double-processing blocks.
  • Race-free claimingpre.replaceWith(div) runs synchronously in the scan callback, so stale plugin instances can never steal a block mid-await.
  • Shiki integration quirks — content sniffing (shiki renders no language label), the 120px scroll-wrapper trap, and full-body scan + debounce + interval backstop for async highlighting.
  • Blob-URL reality — disk plugins execute from a blob:file:// URL where relative imports fail; ECharts loads via CDN with an optional local vendor path.

Usage

Write a code block with language echarts whose content is a valid ECharts option JSON:

```echarts
{ "xAxis": { "type": "category", "data": ["Mon","Tue"] },
  "yAxis": { "type": "value" },
  "series": [{ "type": "bar", "data": [120, 200] }] }
```

The block is replaced by a 400px-tall interactive chart ("hermesHeight" in the option overrides, clamped 280–560px).

Notes

  • Pure ESM, no build step; imports only what the disk loader allows (@hermes/plugin-sdk / react / react/jsx-runtime) — in practice it does pure DOM work and needs none of them.
  • ECharts 5.5.0 vendored (Apache-2.0) with jsDelivr CDN fallback.
  • Tested on the macOS desktop app (v0.20.x) through multiple plugin reload cycles.

Render ```echarts code blocks in the Hermes Desktop conversation stream as
live interactive charts. Demonstrates message-stream DOM injection,
reload-safe singletons, race-free block claiming, and the blob-URL
ECharts loading pattern.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant