Fix Nova chat composer spacing (#958)

This commit is contained in:
Dhravya Shah 2026-05-17 00:43:52 -07:00 • committed by GitHub
parent fd78633fcf
commit 28a60f5620
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 21 additions and 4 deletions

View file

@ -38,7 +38,7 @@ export function HomeChatComposer({
return (
<div className={cn(className)}>
<div className="mx-auto w-full max-w-[720px] px-4 pt-1 pb-3 md:pb-4">
<div className="mx-auto w-full max-w-[720px] px-4 pt-1 pb-[max(1.25rem,calc(env(safe-area-inset-bottom)+1rem))] md:pb-6">
<ChatInput
value={input}
onChange={(e) => setInput(e.target.value)}

View file

@ -776,6 +776,9 @@ export function ChatSidebar({
const isStackedInput = layout === "page"
const showHeaderRow = !isPageDesktop || isMobile || !isStackedInput
const isResponding = status === "submitted" || status === "streaming"
const showInputStatusStrip =
!isStackedInput || isResponding || messages.length > 0
const chatHistorySheet = (
<Sheet
@ -1127,14 +1130,20 @@ export function ChatSidebar({
</div>
)}
<div className="shrink-0">
<div
className={cn(
"shrink-0",
isStackedInput &&
"px-4 pb-[max(1.25rem,calc(env(safe-area-inset-bottom)+1rem))] md:pb-6",
)}
>
<ChatInput
value={input}
onChange={(e) => setInput(e.target.value)}
onSend={handleSend}
onStop={stop}
onKeyDown={handleKeyDown}
isResponding={status === "submitted" || status === "streaming"}
isResponding={isResponding}
activeStatus={
status === "submitted"
? "Thinking…"
@ -1142,6 +1151,7 @@ export function ChatSidebar({
? "Structuring response…"
: "Waiting for input…"
}
showStatusStrip={showInputStatusStrip}
onExpandedChange={setIsInputExpanded}
chainOfThoughtComponent={
messages.length > 0 ? <ChainOfThought messages={messages} /> : null

View file

@ -4,7 +4,7 @@ import { ChevronUpIcon } from "lucide-react"
import NovaOrb from "@/components/nova/nova-orb"
import { cn } from "@lib/utils"
import { dmSansClassName } from "@/lib/fonts"
import { type ReactNode, useRef, useState } from "react"
import { type ReactNode, useEffect, useRef, useState } from "react"
import { motion } from "motion/react"
import { SendButton, StopButton } from "./actions"
@ -41,6 +41,13 @@ export default function ChatInput({
const [isExpanded, setIsExpanded] = useState(false)
const textareaRef = useRef<HTMLTextAreaElement>(null)
useEffect(() => {
if (!showStatusStrip && isExpanded) {
setIsExpanded(false)
onExpandedChange?.(false)
}
}, [isExpanded, onExpandedChange, showStatusStrip])
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
onChange(e)