mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Ben Taylor
c266142354
Fixes #5775. ## Problem After #5099 scoped the streamdown markdown/table styles under `[data-copilotkit] [data-streamdown="…"]`, the **table action controls** (copy / download) are still unstyled for hosts that import `@copilotkit/react-core/v2/styles.css` but don't also ship streamdown's raw Tailwind utilities. streamdown renders the controls row, per-button wrappers, trigger buttons, dropdown popovers and menu items with unprefixed utilities (`flex`, `items-center`, `justify-end`, `gap-1`, `cursor-pointer`, `p-1`, …) and **no stable `data-streamdown` attribute**, so CopilotKit's packaged CSS didn't cover them — the controls rendered as vertically stacked plain icons instead of a right-aligned row. ## Fix Add scoped fallback selectors under `[data-copilotkit] [data-streamdown="table-wrapper"]`, targeting the controls chrome **structurally** (since it has no `data-streamdown` hook): - controls row → `> div:first-child:not(:last-child)` (flex, right-aligned, gap) - per-button wrapper → `… > div` (relative, positions the popover) - trigger buttons → `… > div > button` (matches the code-block copy/download button styling) - dropdown popover → `… > div > div` - popover menu items → `… > div > div > button` The controls row is `table-wrapper`'s first child **only when controls are enabled**; `:not(:last-child)` leaves a control-less table (whose single child is the scroll container, already styled by #5099) untouched. ## Verification - **Compiles.** Built `globals.css` through the Tailwind v4 CLI — every `@apply` resolves (e.g. `bg-background` → `var(--background)`, `shadow-lg` → the shadow vars, `min-w-[120px]` → `min-width:120px`) and all five rules emit with correct values. - **Selectors match the real DOM.** A new DOM test (`streamdown-table-controls.test.tsx`) renders a real `<Streamdown>` table and asserts the controls row is `table-wrapper`'s first-non-only child, carries no `data-streamdown` attribute, and contains the trigger buttons under `> div > button` — i.e. the scoped selectors target real elements. This also guards against streamdown markup drift. - **Selector presence** guarded by `streamdown-styles.test.ts` (whitespace-robust). - Full `styles/__tests__` suite green; `oxlint`/`oxfmt` clean. ## Note (out of scope, discovered while fixing) At runtime in streamdown `1.6.11` the `<table>` element is stamped `data-streamdown="table-wrapper"` (not `"table"`): `MarkdownTable` passes `data-streamdown="table-wrapper"` as a prop that leaks through `...rest` onto the `<table>`, overriding the intended `"table"`. So #5099's `[data-streamdown="table"]` selector currently matches nothing, and the table also matches the `table-wrapper` rules. The controls fix here is unaffected (its child-combinator selectors don't match the table's `thead`/`tbody` children), but the `[data-streamdown="table"]` selector is worth a separate follow-up / upstream report. 🤖 Generated with [Claude Code](https://claude.com/claude-code)