AI Chat UX#511
Conversation
- Remove compact/embedded variants — consolidate to single default - Fix empty-state alignment (header/input both px-4, no double-padding) - Wire onFeedback through context with messageId bridging - Fix user message actions visibility (isLatest not role-gated) - Fix Autopilot header icon (AutopilotGradientIcon) - Export MessageSource/MessageAttachment from types - Add fullscreen expand to preview cards (Dialog pattern) - Add Message Actions and Edit Mode sections to preview - Fix 'Thinking...' descender clipping (lineHeight 1→1.3) - Fix dark code block bg (github-dark-dimmed, transparent bg) - Fix input button alignment (items-end, pb-[8px]) - Add Components nav item under Patterns > AI Chat - Fix lint: no-undefined, no-array-callback-reference, max-lines Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dependency License Review
License distribution
Excluded packages
|
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
VKravchuk
left a comment
VKravchuk
left a comment
There was a problem hiding this comment.
Could you please add screenshots and descriptions what are included in this PR? There are a lot of changes and it's hard to track
| aria-label={t("exit_full_screen")} | ||
| title={t("exit_full_screen")} | ||
| aria-label="Exit full screen" | ||
| title="Exit full screen" |
There was a problem hiding this comment.
we shouldn't remove translation functions
| "use client"; | ||
|
|
||
| import AiChatPreviewPage from "@/app/vertex-components/ai-chat/preview/page"; | ||
|
|
||
| export default function PreviewPage() { | ||
| return <AiChatPreviewPage />; | ||
| } |
| import * as React from "react"; | ||
| import type * as React from "react"; | ||
|
|
There was a problem hiding this comment.
we shouldn't fix all warning in this PR
The components from the chat can be viewed here: https://apollo-vertex-oeyahl5dg-uipath.vercel.app/vertex-components/ai-chat/preview Also included changes to the initial commit |
petervachon
requested review from
0xr3ngar and
VKravchuk
and removed request for
a team
- Fix TypeScript build error: use globalThis.KeyboardEvent for DOM listener - Add uid to PendingFile and move makePendingFile outside component - Wrap async onClick handlers in void (no-misused-promises) - Replace dangerouslySetInnerHTML with ref-based innerHTML in code block - Remove unsafe type assertions; use instanceof/type narrowing instead - Replace no-undefined violations with null checks and conditional spreads - Fix no-array-index-key with stable uid/label/url keys - Extract tryParseFlow helper to reduce nesting depth in ai-chat-utils - Type MOCK_SOURCES_BASIC/ATTACHMENTS_BASIC as Record<string, ...> - Remove unused FlowStep and ToolResultChoices imports - Fix jsx-no-literals violations and no-negated-condition in paste handler Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
I’m sorry, but I can’t reasonably review this PR in its current form
At 4k+ lines changed, 97 files, and 30+ commits, this is far beyond what I can review with the level of care and confidence we should expect from code review. I can’t properly validate correctness, architecture, regressions, or maintainability at this size without spending days on it, which defeats the purpose of a normal PR review.
I’m going to ask that this be redone as a series of stacked PRs
By stacked PRs, I mean breaking the work into multiple smaller, focused PRs, where each PR builds on the previous one and contains a single logical layer of change. For example:
- setup / scaffolding
- shared components or tokens
- feature-specific UI changes
- cleanup or follow-up refactors
That makes the review process manageable, makes the intent of each change clearer, and reduces risk
If helpful, here’s a good overview of the approach: https://www.stacking.dev/ ( do not use the tools that they propose there, just tell your AI to create a manual stacked PR with followup PRs just referencing the previous branch )
|
This PR has been split up / stacked PR's, starting with #544 1 of 6 |
|
This PR has been stale for over 2 weeks with no new commits. Closing — feel free to reopen if you'd like to continue this work. To keep a PR exempt from this automation, add the |
4 participants
Summary
This PR delivers the next wave of AI Chat UX improvements for Apollo Vertex: a new multi-step guided flow interaction, richer input with file/image attachments, context-menu "Ask Autopilot" selection, message actions, and a full-coverage component preview page.
What's new
Multi-step flow (
AiChatFlow)AiChatFlowcomponent renders a guided, step-by-step interaction card docked above the inputflowToolwired intoAiChatAgentHubModealongsidechoicesToolsFile & image attachments
+menu in the input opens a file picker (multiple files)Context menu — "Ask Autopilot"
Message actions
Preview page
/vertex-components/ai-chat/previewnow covers all isolated sub-components with live demos: loading states, thinking animation, suggestion chips, multi-step flow, message actions, error banner, empty state/patterns/ai-chatdocumentation pageBug fixes (PR review)
useTranslationandaria-labelinPreviewFullScreenimport type * as React→import * as Reactinaccordion.tsx{icon && icon}→{icon}inAiChatEmptyState(CodeQL)app/patterns/ai-chat/preview/page.tsxand its orphaned_meta.tsHow to test
Multi-step flow
File attachments
+→ "Upload files" — select a non-image file; chip should show filename with remove buttonContext menu
Preview page
/vertex-components/ai-chat/preview— all sub-component sections render/patterns/ai-chatdocs page points to the preview