[codex] fix follow-up suggestions layout (#2836)

* fix follow-up suggestions layout

* fix agent chat welcome layout transition

---------

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
This commit is contained in:
DanielWalnut
2026-05-10 15:10:44 +08:00
committed by GitHub
parent 08ee7adeba
commit dfa4eb0c1a
4 changed files with 101 additions and 74 deletions
+12 -21
View File
@@ -110,7 +110,6 @@ export function InputBox({
threadId,
initialValue,
onContextChange,
onFollowupsVisibilityChange,
onSubmit,
onStop,
...props
@@ -143,7 +142,6 @@ export function InputBox({
reasoning_effort?: "minimal" | "low" | "medium" | "high";
},
) => void;
onFollowupsVisibilityChange?: (visible: boolean) => void;
onSubmit?: (message: PromptInputMessage) => void;
onStop?: () => void;
}) {
@@ -350,24 +348,10 @@ export function InputBox({
!followupsHidden &&
(followupsLoading || followups.length > 0);
const followupsVisibilityChangeRef = useRef(onFollowupsVisibilityChange);
useEffect(() => {
followupsVisibilityChangeRef.current = onFollowupsVisibilityChange;
}, [onFollowupsVisibilityChange]);
useEffect(() => {
followupsVisibilityChangeRef.current?.(showFollowups);
}, [showFollowups]);
useEffect(() => {
messagesRef.current = thread.messages;
}, [thread.messages]);
useEffect(() => {
return () => followupsVisibilityChangeRef.current?.(false);
}, []);
useEffect(() => {
const streaming = status === "streaming";
const wasStreaming = wasStreamingRef.current;
@@ -442,26 +426,33 @@ export function InputBox({
}, [context.model_name, disabled, isMock, status, threadId]);
return (
<div ref={promptRootRef} className="relative flex flex-col gap-4">
<div
ref={promptRootRef}
className={cn(
"relative flex flex-col",
isWelcomeMode ? "gap-4" : "gap-2",
)}
>
{showFollowups && (
<div className="flex items-center justify-center pb-2">
<div className="flex items-center justify-center pb-1">
<div className="flex items-center gap-2">
{followupsLoading ? (
<div className="text-muted-foreground bg-background/80 rounded-full border px-4 py-2 text-xs backdrop-blur-sm">
<div className="text-muted-foreground bg-background/80 rounded-full border px-4 py-1.5 text-xs backdrop-blur-sm">
{t.inputBox.followupLoading}
</div>
) : (
<Suggestions className="min-h-16 w-fit items-start">
<Suggestions className="w-fit items-center">
{followups.map((s) => (
<Suggestion
key={s}
className="py-1.5"
suggestion={s}
onClick={() => handleFollowupClick(s)}
/>
))}
<Button
aria-label={t.common.close}
className="text-muted-foreground cursor-pointer rounded-full px-3 text-xs font-normal"
className="text-muted-foreground h-auto cursor-pointer rounded-full px-2.5 py-1.5 text-xs font-normal"
variant="outline"
size="sm"
type="button"