Skip to content

feat(apollo-wind): add ChatHero and PromptSuggestions chat primitives - #1368

Merged
BenGSchulz merged 1 commit into
mainfrom
feat/apollo-wind-chat-hero
Oct 15, 2026
Merged

BenGSchulz merged 1 commit into
mainfrom
feat/apollo-wind-chat-hero

Conversation

@BenGSchulz

Copy link
Copy Markdown
Contributor

Summary

Adds the first-run and suggestion primitives for the Wind chat renderer (MST-16381, W-7) and removes the last two static chat mocks. Both components are matched against ApChat's Material first-run experience (chat-fre.tsx) and suggestions (chat-suggestions.tsx), so R-6 can map the service onto them without behaviour gaps.

  • PromptSuggestions: a role="group" of chips named by strings.label. Items are { label, prompt?, id?, icon? }, so AutopilotChatSuggestion passes straight in, and onSelect(item) leaves sending vs prefilling to the caller (ApChat's sendOnClick). Vertical by default like ApChat; orientation="horizontal" keeps one row that scrolls under scroll-fade-x. density maps ApChat's compact padding and font, showLabel renders the "Suggestions" title ApChat shows after a reply, animated slides the group in like ApChat's popUpFromBottom, disabled, and chips carry data-index for test hooks.
  • ChatHero: compound ChatHero / ChatHeroHeader / ChatHeroLogo / ChatHeroTitle (h2, asChild) / ChatHeroDescription with layout and density.
    • layout="docked": bottom-anchored, start-aligned copy above a footer composer, which is how ApChat's Embedded first-run looks today.
    • layout="centered": the centered home (CAS ask) with the composer inside an 800px column, as in the Delegate template.
    • Empty title or description renders nothing and an empty header hides, because CAS passes "" when an agent has no welcome copy.
  • New animate-slide-in-from-bottom utility next to the existing slide-ins in tailwind.utilities.css (apollo-wind ships no tw-animate plugin); only fades under reduced motion.
  • Removes components/custom/chat-first-experience* and components/custom/chat-prompt-suggestions*. The Delegate Home story is rebuilt on ChatHero + PromptSuggestions with a few class overrides; the getting-started table and apollo-ai-context.md list the new components.
  • Chat/Patterns gains Embedded, empty state (docked) and Fullscreen, empty state (centered; the composer moves to the footer once the conversation starts). All four panel stories now sit on bg-background.

Parity with ApChat

Feature ApChat (Material) Wind
Position Absolute at the bottom of the message area, composer in the footer docked (Embedded); centered adds the home layout for FullScreen
Title / description H4 token, then primary font in foreground-de-emp Same size and line height (text-xl / text-sm, text-xs compact); semibold title like EmptyState
Suggestion data { label, prompt } keyed by label Same shape, plus optional id and icon
Click sendOnClick sends, else sets the prompt; both focus the input onSelect(item); the caller does either (see the Send Or Prefill story)
Layout Vertical stack, chips fit content, long labels wrap Same by default; horizontal is opt-in
Compact Padding 2x8 / 8x16, font S / M, 8px gap Same mapping
After a reply Bold "Suggestions" title, 300ms rise showLabel, animated
A11y Plain buttons, no group name role="group" with an accessible name, native button keyboard handling

Decisions worth a look

  • ChatHero is a layout, not a composer wrapper. The composer is a child, so each host builds its own (Delegate's DemoComposer, the panel's compact one) and docked can omit it.
  • Default chip keeps the Wind raised look (surface-raised, subtle border, rounded-xl, rounded-lg compact) rather than ApChat's transparent chip.
  • Suggestion lifecycle stays in the chat layer. Note for R-6: DOCS.md says dynamic suggestions clear once a request is sent, but ChatService.setSuggestions and chat-message.tsx never clear them, so R-6 should pick which behaviour Wind follows.
  • Density is a per-component prop, like ChatComposer, until W-8's provider.

Test plan

  • vitest: select by click and keyboard, group name and strings, visible label wiring, empty list, disabled, orientation and density attributes, icons, hero submit through the composer, suggestion pass-through, empty copy (also through asChild), axe for both components in both layouts; full apollo-wind suite (2823 tests)
  • tsc, Biome on touched files (both index files fail organizeImports on main too)
  • Storybook: Delegate Home computed styles match the old mock (40/36px title at -0.8px, 37px gap, 40px raised chips with 12px radius, secondary text); empty-state patterns in light and dark; suggestion click starts the transcript; animation runs; horizontal focus ring not clipped
  • Reviewer: visual check of Templates > Delegate > Home against main, and Chat/Patterns empty states

Part of epic MST-16172 (Apollo Chat revamp). Plan: https://uipath.atlassian.net/wiki/spaces/CLD/pages/91226013878

🤖 Generated with Claude Code

Adds the first-run and suggestion primitives the Wind chat renderer
needs, matched against ApChat's first-run experience and suggestions:

- PromptSuggestions: a role="group" of chips named by strings.label.
  Items are { label, prompt?, id?, icon? }, so AutopilotChatSuggestion
  passes straight in; onSelect returns the item and the caller decides
  between sending and prefilling. Vertical by default like ApChat, with
  a horizontal orientation that scrolls under scroll-fade-x. The default
  chip keeps the Wind raised look (surface-raised, subtle border, hover
  fill); density maps ApChat's compact padding and font. showLabel renders the visible
  "Suggestions" title ApChat shows after a reply; animated slides the
  group in like ApChat's popUpFromBottom, through a new
  animate-slide-in-from-bottom utility that only fades under reduced
  motion. Chips carry data-index for test hooks.
- ChatHero: compound layout with ChatHeroHeader, ChatHeroLogo,
  ChatHeroTitle (h2, asChild) and ChatHeroDescription. layout="docked"
  bottom-anchors start-aligned copy above a footer composer, as ApChat's
  Embedded first-run does; layout="centered" is the centered home with
  the composer inside an 800px column. Empty title or description copy
  renders nothing (also through asChild) and an empty header hides, since
  CAS passes "" when an agent has no welcome copy.

Removes the custom/chat-first-experience and custom/chat-prompt-suggestions
mocks. The Delegate Home story rebuilds the mock on ChatHero with a few class
overrides (computed styles match the old mock); the getting-started
table and apollo-ai-context list the new components. Chat/Patterns gains
Embedded and Fullscreen empty-state stories, and all four panel stories
now sit on bg-background.

Refs: MST-16381

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Copilot AI balanced review requested due to automatic review settings October 14, 2026 01:09

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@github-actions

github-actions Bot commented Oct 14, 2026 •

Copy link
Copy Markdown
Contributor

Apollo Coded App preview deployments are ready.

Project Status Preview Updated (PT)
apollo-design Ready Preview · Logs Oct 13, 2026, 06:18:20 PM
apollo-docs Ready Preview · Logs Oct 13, 2026, 06:18:20 PM
apollo-landing Ready Preview · Logs Oct 13, 2026, 06:18:20 PM
apollo-vertex Ready Preview · Logs Oct 13, 2026, 06:18:20 PM

@github-actions github-actions Bot added pkg:apollo-wind size:XXL 1,000+ changed lines. labels Oct 14, 2026
@github-actions

Copy link
Copy Markdown
Contributor

Dependency License Review

  • ✅ 1942 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 2 package(s) excluded (see details below)
License distribution
License Packages
MIT 1708
ISC 91
Apache-2.0 56
BSD-3-Clause 28
BSD-2-Clause 23
BlueOak-1.0.0 8
MPL-2.0 4
MIT-0 3
CC0-1.0 3
MIT OR Apache-2.0 2
(MIT OR Apache-2.0) 2
Unlicense 2
LGPL-3.0-or-later 1
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
Unknown 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.3.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json

@github-actions

Copy link
Copy Markdown
Contributor

Storybook visual diff

⚠️ Visual changes detected: 32 added, 4 removed (of 64 compared, 28 unchanged). View report

Baseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs

Updated (PT): Oct 13, 2026, 06:21:11 PM

@github-actions

Copy link
Copy Markdown
Contributor

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package Coverage New-line coverage Packed (gzip) Unpacked vs main
@uipath/apollo-core — — 42.02 MB 50.17 MB ±0
@uipath/apollo-react 51.2% — 7.98 MB 31.43 MB +168 B
@uipath/apollo-ui-icons — — 2.86 MB 6.97 MB ±0
@uipath/apollo-wind 79.0% 100.0% (46/46) 785.7 KB 4.57 MB +4.3 KB
@uipath/ap-chat 85.8% — 40.36 MB 45.58 MB ±0

"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.

@BenGSchulz
BenGSchulz marked this pull request as ready for review October 14, 2026 16:03
@BenGSchulz
BenGSchulz merged commit 5582d41 into main Oct 15, 2026
41 checks passed
@BenGSchulz
BenGSchulz deleted the feat/apollo-wind-chat-hero branch October 15, 2026 20:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pkg:apollo-wind size:XXL 1,000+ changed lines.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants