fix(chat): chat bottom input container calcultion

- Removed the rateLimitNoticeRef from ChatInterface, simplifying the height calculation.
- Updated RateLimitNotice component to eliminate the ref prop, streamlining its implementation.

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei 2025-11-06 21:25:56 +08:00
parent 7ca97e0208
commit e0a2e6c49c
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
2 changed files with 4 additions and 9 deletions

View File

@ -283,15 +283,12 @@ const ChatInterfaceContent = ({ centerInputOnEmpty }: ChatInterfaceProps) => {
const [bottomPanelHeight, setBottomPanelHeight] = useState<number>(0)
const bottomPanelRef = useRef<HTMLDivElement | null>(null)
const rateLimitNoticeRef = useRef<HTMLDivElement | null>(null)
useLayoutEffect(() => {
if (!bottomPanelRef.current || !rateLimitNoticeRef.current) {
if (!bottomPanelRef.current) {
return
}
setBottomPanelHeight(
(bottomPanelRef.current?.offsetHeight ?? 0) + (rateLimitNoticeRef.current?.offsetHeight ?? 0),
)
setBottomPanelHeight(bottomPanelRef.current.offsetHeight)
const resizeObserver = new ResizeObserver(() => {
if (!bottomPanelRef.current) {
@ -416,7 +413,7 @@ const ChatInterfaceContent = ({ centerInputOnEmpty }: ChatInterfaceProps) => {
"bottom-1/2 translate-y-[calc(100%+1rem)] duration-200",
)}
>
<RateLimitNotice ref={rateLimitNoticeRef} error={error} chatConfig={configuration} />
<RateLimitNotice error={error} chatConfig={configuration} />
<ChatShortcutsRow
onSelect={(shortcutData) => {
const tempEditor = createEditor({

View File

@ -8,7 +8,6 @@ import { useSettingModal } from "~/modules/settings/modal/useSettingModal"
import { parseAIError } from "../../utils/error"
interface RateLimitNoticeProps {
ref?: React.Ref<HTMLDivElement>
error?: Error
chatConfig?: ConfigResponse
className?: string
@ -18,7 +17,7 @@ interface RateLimitNoticeProps {
* RateLimitNotice component
* Displays rate limit information above the input in a subtle, non-alarming way
*/
export const RateLimitNotice = ({ ref, error, chatConfig, className }: RateLimitNoticeProps) => {
export const RateLimitNotice = ({ error, chatConfig, className }: RateLimitNoticeProps) => {
const message = React.useMemo(() => {
if (error) {
return buildErrorMessage(error)
@ -40,7 +39,6 @@ export const RateLimitNotice = ({ ref, error, chatConfig, className }: RateLimit
return (
<m.div
ref={ref}
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}