Wisp, an AI chat template for Next.js: Shiki in a worker, an IndexedDB store and eight traps

// Long chats are virtualised, so a block mounts again every time it scrolls back into view:
// keep recent results so it never pays for highlighting twice.
const cache = new Map<string, string>()
const CACHE_MAX = 300

function getWorker(): Worker | null {
  if (worker !== undefined) return worker
  try {
    worker = new Worker(new URL("./highlight.worker.ts", import.meta.url), { type: "module" })
    worker.onmessage = (e: MessageEvent<{ id: number; html: string | null }>) => {
      waiting.get(e.data.id)?.(e.data.html)
      waiting.delete(e.data.id)
    }
    worker.onerror = () => {
      // The worker couldn't start (or died): finish what it held on the main thread from now on.
      worker = null
      for (const done of waiting.values()) done(null)

/**
 * A page inside the main card: a sticky header (solid and edged once the page scrolls; a blur over moving text
 * would cost frames) over the page's own scroll area. `scrollRef` lets the conversation drive its virtual list
 * from the same element.
 */

{current ? (
  // Shiki escapes the code; the markup is its own spans.
  <div dangerouslySetInnerHTML={{ __html: current }} />
) : (
  // Same shape as Shiki's output (the newline between the line boxes, not inside them), so swapping in the
  // highlighted HTML doesn't move anything.
  <pre className="shiki">
    <code>
      {shown.split("\n").map((l, i) => (
        <React.Fragment key={i}>
          {i > 0 && "\n"}
          <span className="line">{l}</span>
        </React.Fragment>
      ))}
    </code>
  </pre>
)}

// The store module is also loaded while the server renders a page, where there is no IndexedDB: it only persists in the browser.
const hasIdb = () => typeof indexedDB !== "undefined"

const flush = () => {
  if (pending === undefined) return
  clearTimeout(pending)
  pending = undefined
  void idbSet(lastName, lastValue).catch(() => {})
}
// Reloading or closing the tab inside the coalescing window would lose the last change: write it now.
if (typeof window !== "undefined") window.addEventListener("pagehide", flush)

/** IndexedDB, with writes coalesced: streaming updates the store many times a second. */
const idbStorage: StateStorage = {
  getItem: async (name) => (hasIdb() ? ((await get<string>(name)) ?? null) : null),
  setItem: (name, value) => {
    if (!hasIdb()) return
    lastName = name
    lastValue = value
    clearTimeout(pending)
    pending = setTimeout(flush, 600)
  },
  removeItem: (name) => (hasIdb() ? del(name) : undefined),
}

/*
 * Scrollbars: no track and no arrows, just a faint 4 px rounded thumb in the text colour that brightens under the
 * pointer. (Revealing it only while the area is hovered doesn't work: Chromium doesn't repaint a scrollbar when its
 * box's :hover changes.) Chromium and Safari read the ::-webkit-scrollbar rules; Firefox, which doesn't, gets its own
 * thin scrollbar in the same colour. Setting scrollbar-width anywhere would make Chromium ignore these.
 */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }
}