refactor(web): composer controls own their look instead of restyling ui components #13209
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -52,6 +52,11 @@ const formatPendingPrimaryActionLabel = (input: { | |
| return input.questionIndex > 0 ? "Submit answers" : "Submit answer"; | ||
| }; | ||
|
|
||
| // The composer's labeled primary actions (Submit, Refine, Implement) share the send button's | ||
| // message-action pill, so they are composer-owned buttons rather than restyled Buttons. | ||
| const messageActionPillClassName = | ||
| "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-full bg-message-action font-medium text-base text-message-action-foreground shadow-xs shadow-message-action/24 outline-none hover:bg-message-action-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 disabled:shadow-none sm:text-sm"; | ||
|
Contributor
There was a problem hiding this comment. Shared primitives over custom controls: this class turns several raw Suggested fix: No diff; the fix requires adding a shared Posted via Macroscope — UI Consistency |
||
|
|
||
| const preventPointerFocus: PointerEventHandler<HTMLElement> = (event) => { | ||
| event.preventDefault(); | ||
| }; | ||
|
|
@@ -112,7 +117,6 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({ | |
| <Button | ||
| size="icon-sm" | ||
| variant="outline" | ||
| {...pointerFocusProps} | ||
| onClick={onPreviousPendingQuestion} | ||
| disabled={pendingAction.isResponding} | ||
|
|
@@ -124,7 +128,6 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({ | |
| <Button | ||
| size="sm" | ||
| variant="outline" | ||
| {...pointerFocusProps} | ||
| onClick={onPreviousPendingQuestion} | ||
| disabled={pendingAction.isResponding} | ||
|
|
@@ -133,13 +136,9 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({ | |
| </Button> | ||
| ) | ||
| ) : null} | ||
| <button | ||
| type="submit" | ||
| className={cn(messageActionPillClassName, "h-8 sm:h-7", compact ? "px-3" : "px-4")} | ||
| {...pointerFocusProps} | ||
| disabled={ | ||
| isEnvironmentUnavailable || | ||
|
|
@@ -153,47 +152,44 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({ | |
| isResponding: pendingAction.isResponding, | ||
| questionIndex: pendingAction.questionIndex, | ||
| })} | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| if (showPlanFollowUpPrompt) { | ||
| if (promptHasText) { | ||
| return ( | ||
| <button | ||
| type="submit" | ||
| className={cn(messageActionPillClassName, "h-9 sm:h-8", compact ? "px-3" : "px-4")} | ||
| {...pointerFocusProps} | ||
| disabled={isSendBusy || isSendDisabled || isConnecting || isEnvironmentUnavailable} | ||
| > | ||
| {isConnecting || isSendBusy ? "Sending..." : "Refine"} | ||
| </button> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div data-chat-composer-implement-actions="true" className="flex items-center justify-end"> | ||
| <button | ||
| type="submit" | ||
| className={cn(messageActionPillClassName, "h-9 rounded-r-none px-4 sm:h-8")} | ||
| {...pointerFocusProps} | ||
| disabled={isSendBusy || isSendDisabled || isConnecting || isEnvironmentUnavailable} | ||
| > | ||
| {isConnecting || isSendBusy ? "Sending..." : "Implement"} | ||
| </button> | ||
| <Menu> | ||
| <MenuTrigger | ||
| render={ | ||
| <button | ||
| type="button" | ||
| className={cn( | ||
| messageActionPillClassName, | ||
| "h-9 rounded-l-none border-l border-message-action-foreground/20 px-2 sm:h-8", | ||
| )} | ||
| aria-label="Implementation actions" | ||
| {...pointerFocusProps} | ||
| disabled={isSendBusy || isSendDisabled || isConnecting || isEnvironmentUnavailable} | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shared primitives over custom controls: this recreates
ui/Buttonandui/SelectTriggerstyling instead of composing those primitives. Add the composer sizes/variants to the UI primitives and haveComposerControldelegate to them.Suggested fix: No diff; the fix requires coordinated primitive variants and component changes.
Posted via Macroscope — UI Consistency