fix: improve "Load older" button styling and alignment

- Centered button using mx-auto w-fit wrapper (matches SystemMessage pattern)
- Changed variant from secondary to outline for subtler appearance
- Reduced visual weight with text-xs opacity-80 hover:opacity-100
- Added ↑ arrow icon before the text
- Adjusted spacing to py-1 mb-2 and gap-1.5

Fixes alignment issues where button wasn't centered with content below and improves visual consistency with page design.
This commit is contained in:
weishu
2025-12-24 18:16:26 +08:00
parent d15eafba4c
commit e0f0221453
@@ -267,14 +267,15 @@ export function HappyThread(props: {
) : null}
{props.hasMoreMessages && !props.isLoadingMessages ? (
<div className="mb-3">
<div className="py-1 mb-2">
<div className="mx-auto w-fit">
<Button
variant="secondary"
variant="outline"
size="sm"
onClick={handleLoadMore}
disabled={props.isLoadingMoreMessages || props.isLoadingMessages}
aria-busy={props.isLoadingMoreMessages}
className="gap-2"
className="gap-1.5 text-xs opacity-80 hover:opacity-100"
>
{props.isLoadingMoreMessages ? (
<>
@@ -282,10 +283,14 @@ export function HappyThread(props: {
Loading
</>
) : (
'Load older'
<>
<span aria-hidden="true"></span>
Load older
</>
)}
</Button>
</div>
</div>
) : null}
{import.meta.env.DEV && props.normalizedMessagesCount === 0 && props.rawMessagesCount > 0 ? (