Help

The help dialog opens from the toolbar. Its content is owned by the book at src/book/_help/help.tsx, so tbx update does not overwrite it.

New books from tbx create include this folder. Existing books pick it up on tbx update (added in 1.45.0 if missing).

Default content

The default Help component renders the full help UI in the book language:

import { useBook } from "@bside-tech/tbx";
import { HelpContent } from "../../ui/library/HelpContent";

export function Help() {
  const { language } = useBook();
  return <HelpContent forceLanguage={language} />;
}

HelpContent covers the table of contents, navigation (including reading modes), and the AMII / exercise legend with live examples.

When bookType is "minimal", the digital-mode item is hidden from the navigation section. Overlay icons in the AMII legend come from src/book/hotspotIcons.ts.

Language

Help copy is available in "en", "ro", "fr", and "de". Unknown values fall back to English.

By default help follows bookLanguage. Pass forceLanguage to show a specific locale regardless of the book language:

<HelpContent forceLanguage="fr" />

Multiple languages

Compose several HelpContent instances with different forceLanguage values. HeroUI Tabs (already in the template) lets the reader switch language without stacking two full help bodies:

import { Tabs } from "@heroui/react";
import { HelpContent } from "../../ui/library/HelpContent";

export function Help() {
  return (
    <Tabs>
      <Tabs.ListContainer>
        <Tabs.List aria-label="Help language">
          <Tabs.Tab id="ro">
            Română
            <Tabs.Indicator />
          </Tabs.Tab>
          <Tabs.Tab id="en">
            English
            <Tabs.Indicator />
          </Tabs.Tab>
        </Tabs.List>
      </Tabs.ListContainer>
      <Tabs.Panel id="ro">
        <HelpContent forceLanguage="ro" />
      </Tabs.Panel>
      <Tabs.Panel id="en">
        <HelpContent forceLanguage="en" />
      </Tabs.Panel>
    </Tabs>
  );
}

Partial help

Import individual sections instead of HelpContent if you only want some of the default UI. Each accepts the same forceLanguage prop:

• HelpSectionMenu
• HelpSectionNavigation
• HelpSectionExcercices

import { HelpSectionNavigation } from "../../ui/library/HelpContent";

export function Help() {
  return <HelpSectionNavigation forceLanguage="ro" />;
}

Fully custom

Replace the body of Help() with any React content. The toolbar still opens the same dialog; only what you render inside changes.