feat(F0AiChatTextArea): neutral credit warning with CTA icon by daviz-fct · Pull Request #5268 · factorialco/f0

daviz-fct · 2026-08-26T13:34:20Z

Description

The soft credit warning banner that sits above the chat composer was painted with the info palette, which made a passive nudge read like a system notice. It now uses the neutral tokens, and the "Get credits" CTA takes an optional icon so hosts can mark the action as an upsell.

Type of change

Component enhancement / variant (existing component, no breaking change)

Screenshots (if applicable)

Implementation details

feat: swap the credit warning banner from the info palette to the neutral one

Which tokens

bg-f1-background-info → bg-f1-background-secondary and text-f1-foreground-info → text-f1-foreground-secondary, matching the neutral status pattern already used elsewhere (e.g. F0Tag status neutral).

The formBorder override drops from border-f1-border-info to border-f1-border, which is the border the composer form already carries by default, so the banner no longer tints it. The key is kept in the config so a future hard level can still override it.
feat: add an optional getCreditsIcon to AiChatCreditWarning, rendered to the left of the "Get credits" label

Why a prop instead of hardcoding the icon

The banner is host-driven: the CTA can point at billing, at a plan upgrade, or at an admin asking to raise an employee cap, so the icon belongs to the host. The prop is optional, so current consumers are unaffected and the button keeps rendering label-only when it is omitted.
chore: use the Upsell icon in the F0AiChatTextArea and Cocreation credit warning stories

The soft credit warning banner above the composer used the info palette, which read as a system notice rather than a passive nudge. It now uses the neutral tokens, and the "Get credits" CTA accepts an optional icon so hosts can mark it as an upsell. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

github-actions · 2026-08-26T13:34:53Z

🔍 Review policy: Feature

The PR title starts with feat, so this is a feature: it needs one approval from f0-devs AND one from f0-designers (rule 3).

Required approvals

Team	Why	Status
@factorialco/f0-devs	Features need a dev approval	✅ approved by @sauldom102
@factorialco/f0-designers	Features need a design approval	✅ approved by @warcos-fact

How this was decided

PRs touching only sds/ modules require their owners and nothing else.
Otherwise, docs-only changes (*.md, *.mdx, *.stories.tsx, anything in __stories__/) → one f0-general approval.
Otherwise, feat: titles → one f0-devs and one f0-designers approval. Not a feature? Fix the title prefix.
Anything else → one f0-devs approval.
Add the needs-design-review label to also request a design approval on any PR.
Creating a new sds/ module (new package.yml) additionally requires an f0-general approval.

Policy source: ownership/review-policy.ts · Team members: ownership/teams.yml

github-actions · 2026-08-26T13:35:37Z

✅ No untranslated copy added

Every user-visible string in this PR comes from the i18n layer. Codebase total unchanged at 133.

github-actions · 2026-08-26T13:36:25Z

✅ No New Circular Dependencies

No new circular dependencies detected. Current count: 0

github-actions · 2026-08-26T13:36:58Z

✅ Storybook docs — no pages lost

Every page reachable on main is still reachable here.

✏️ 31 updated

✏️ Updated — 31 page(s)/story/stories across 2 file(s)

The source file behind each of these changed. Detection is per file, so editing one story flags its siblings too.

src/kits/ai/F0AiChatTextArea/__stories__/F0AiChatTextArea.stories.tsx
src/patterns/Cocreation/__stories__/creation-with-ai.stories.tsx

Links point at the public Storybook, which is built from main — pages this PR adds resolve there only once it merges. Waiting on the Chromatic build to retarget them at this PR.

Snapshot of the Storybook index (docs pages + stories) compared against main. Non-blocking.

github-actions · 2026-08-26T13:38:47Z

🔍 Visual review for your branch is published 🔍

Here are the links to:

github-actions · 2026-08-26T13:39:29Z

📦 Alpha Package Version Published

Use pnpm i github:factorialco/f0#npm/alpha-pr-5268 to install the package

Use pnpm i github:factorialco/f0#43a933f71d68af97afee6dfa72b98954706e221a to install this specific commit

github-actions · 2026-08-26T13:42:04Z

✅ No breaking public API changes

No public exports were removed, renamed, or had existing props/types changed in a breaking way compared to main.

Comparing f0, experimental and ai against main. Adding components, types, or optional props is safe. This check is non-blocking.

⚠️ Could not analyze component-status (no-base) — a build may have failed; results may be incomplete.

github-actions · 2026-08-26T13:42:54Z

♿ Accessibility (axe) — components changed in this PR

7 issues across 6 stories — all non-blocking (todo).

Story	Rule	WCAG	Impact	Nodes	Mode
Kits/AI/F0AiChat / Default	`color-contrast`	WCAG 1.4.3 AA (2.0)	serious	2	🟡 `todo`
Kits/AI/F0AiChat / Host Overlay Dismissal	`color-contrast`	WCAG 1.4.3 AA (2.0)	serious	2	🟡 `todo`
Kits/AI/F0AiChat / With Reply To Selection	`color-contrast`	WCAG 1.4.3 AA (2.0)	serious	2	🟡 `todo`
Kits/AI/F0AiChat / With Footer	`color-contrast`	WCAG 1.4.3 AA (2.0)	serious	2	🟡 `todo`
Patterns/AI Cocreation/Standard flow / Resource Cards	`color-contrast`	WCAG 1.4.3 AA (2.0)	serious	2	🟡 `todo`
Kits/AI/F0AiChat/Widget drop / Drag Widget To Quote	`aria-prohibited-attr`	WCAG 4.1.2 A (2.0)	serious	14	🟡 `todo`
Kits/AI/F0AiChat/Widget drop / Drag Widget To Quote	`scrollable-region-focusable`	WCAG 2.1.1 A (2.0)	serious	1	🟡 `todo`

_{Scope: only stories in the files/component folders this PR changed. It can't yet flag downstream ripple from shared-code/token changes, or diff against main (planned: base-vs-head delta).}

github-actions · 2026-08-26T13:48:36Z

Coverage Report for packages/react

Status	Category	Percentage	Covered / Total
🔵	Lines	69%	29118 / 42199
🔵	Statements	67.95%	30802 / 45326
🔵	Functions	61.84%	6950 / 11238
🔵	Branches	61.64%	21804 / 35372

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/react/src/kits/ai/F0AiChat/types.ts	100%	100%	100%	100%
packages/react/src/kits/ai/F0AiChatTextArea/components/CreditWarningWrapper.tsx	71.42%	16.66%	100%	66.66%	32-71

Generated in workflow #17533 for commit 355e7cf by the Vitest Coverage Report Action

warcos-fact

LGTM

daviz-fct requested a review from a team as a code owner August 26, 2026 13:34

github-actions Bot added feat react Changes affect packages/react labels Aug 26, 2026

warcos-fact approved these changes Aug 26, 2026

View reviewed changes

sauldom102 approved these changes Aug 27, 2026

View reviewed changes

daviz-fct added 2 commits August 27, 2026 18:30

Merge branch 'main' into feat/credit-warning-neutral-cta-icon

9b8fa23

Merge branch 'main' into feat/credit-warning-neutral-cta-icon

a7f9fe0

Navigation Menu

Uh oh!

feat(F0AiChatTextArea): neutral credit warning with CTA icon - #5268

feat(F0AiChatTextArea): neutral credit warning with CTA icon#5268
daviz-fct wants to merge 3 commits into
mainfrom
feat/credit-warning-neutral-cta-icon

daviz-fct commented Aug 26, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 26, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 26, 2026

Uh oh!

github-actions Bot commented Aug 26, 2026

Uh oh!

github-actions Bot commented Aug 26, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 26, 2026

Uh oh!

github-actions Bot commented Aug 26, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 26, 2026

Uh oh!

github-actions Bot commented Aug 26, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 26, 2026

Uh oh!

warcos-fact left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

daviz-fct commented Aug 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Screenshots (if applicable)

Implementation details

Uh oh!

github-actions Bot commented Aug 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 Review policy: Feature

Required approvals

Uh oh!

github-actions Bot commented Aug 26, 2026

✅ No untranslated copy added

Uh oh!

github-actions Bot commented Aug 26, 2026

✅ No New Circular Dependencies

Uh oh!

github-actions Bot commented Aug 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Storybook docs — no pages lost

Uh oh!

github-actions Bot commented Aug 26, 2026

🔍 Visual review for your branch is published 🔍

Uh oh!

github-actions Bot commented Aug 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Alpha Package Version Published

Uh oh!

github-actions Bot commented Aug 26, 2026

✅ No breaking public API changes

Uh oh!

github-actions Bot commented Aug 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

♿ Accessibility (axe) — components changed in this PR

Uh oh!

github-actions Bot commented Aug 26, 2026

Coverage Report for packages/react

Uh oh!

warcos-fact left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

daviz-fct commented Aug 26, 2026 •

edited

Loading

github-actions Bot commented Aug 26, 2026 •

edited

Loading

github-actions Bot commented Aug 26, 2026 •

edited

Loading

github-actions Bot commented Aug 26, 2026 •

edited

Loading

github-actions Bot commented Aug 26, 2026 •

edited

Loading