update jump to latest button with circular design and animation

- add arrow-down-to-line icon
- circular 32px button centered above prompt input
- fade/scale/translate animation on show/hide
- fix duplicate language.ru keys in i18n files
This commit is contained in:
David Hill
2026-01-22 09:39:36 +00:00
parent ba2e35e29c
commit cf1fc02d27
8 changed files with 19 additions and 23 deletions

View File

@@ -284,7 +284,6 @@ export const dict = {
"language.da": "Dänisch",
"language.ru": "Russisch",
"language.pl": "Polnisch",
"language.ru": "Russisch",
"language.ar": "Arabisch",
"toast.language.title": "Sprache",

View File

@@ -279,7 +279,6 @@ export const dict = {
"language.da": "Danés",
"language.ru": "Ruso",
"language.pl": "Polaco",
"language.ru": "Ruso",
"language.ar": "Árabe",
"toast.language.title": "Idioma",

View File

@@ -279,7 +279,6 @@ export const dict = {
"language.da": "Danois",
"language.ru": "Russe",
"language.pl": "Polonais",
"language.ru": "Russe",
"language.ar": "Arabe",
"toast.language.title": "Langue",

View File

@@ -277,7 +277,6 @@ export const dict = {
"language.da": "デンマーク語",
"language.ru": "ロシア語",
"language.pl": "ポーランド語",
"language.ru": "ロシア語",
"language.ar": "アラビア語",
"toast.language.title": "言語",

View File

@@ -281,7 +281,6 @@ export const dict = {
"language.da": "덴마크어",
"language.ru": "러시아어",
"language.pl": "폴란드어",
"language.ru": "러시아어",
"language.ar": "아랍어",
"toast.language.title": "언어",

View File

@@ -277,7 +277,6 @@ export const dict = {
"language.da": "丹麦语",
"language.ru": "俄语",
"language.pl": "波兰语",
"language.ru": "俄语",
"language.ar": "阿拉伯语",
"toast.language.title": "语言",

View File

@@ -1360,23 +1360,24 @@ export default function Page() {
}
>
<div class="relative w-full h-full min-w-0">
<Show when={autoScroll.userScrolled()}>
<div class="absolute right-4 md:right-6 bottom-[calc(var(--prompt-height,8rem)+16px)] z-[60] pointer-events-none">
<Button
variant="secondary"
size="small"
icon="chevron-down"
class="pointer-events-auto shadow-sm"
onClick={() => {
setStore("messageId", undefined)
autoScroll.forceScrollToBottom()
window.history.replaceState(null, "", window.location.href.replace(/#.*$/, ""))
}}
>
{language.t("session.messages.jumpToLatest")}
</Button>
</div>
</Show>
<div
class="absolute left-1/2 -translate-x-1/2 bottom-[calc(var(--prompt-height,8rem)+32px)] z-[60] pointer-events-none transition-all duration-200 ease-out"
classList={{
"opacity-100 translate-y-0 scale-100": autoScroll.userScrolled(),
"opacity-0 translate-y-2 scale-95 pointer-events-none": !autoScroll.userScrolled(),
}}
>
<button
class="pointer-events-auto size-8 flex items-center justify-center rounded-full bg-background-base border border-border-base shadow-sm text-text-base hover:bg-background-stronger transition-colors"
onClick={() => {
setStore("messageId", undefined)
autoScroll.forceScrollToBottom()
window.history.replaceState(null, "", window.location.href.replace(/#.*$/, ""))
}}
>
<Icon name="arrow-down-to-line" />
</button>
</div>
<div
ref={setScrollRef}
onScroll={(e) => {

View File

@@ -69,6 +69,7 @@ const icons = {
sliders: `<path d="M3.625 6.25H10.9375M16.375 13.75H10.5625M3.625 13.75H4.9375M11.125 6.25C11.125 4.79969 12.2997 3.625 13.75 3.625C15.2003 3.625 16.375 4.79969 16.375 6.25C16.375 7.70031 15.2003 8.875 13.75 8.875C12.2997 8.875 11.125 7.70031 11.125 6.25ZM10.375 13.75C10.375 15.2003 9.20031 16.375 7.75 16.375C6.29969 16.375 5.125 15.2003 5.125 13.75C5.125 12.2997 6.29969 11.125 7.75 11.125C9.20031 11.125 10.375 12.2997 10.375 13.75Z" stroke="currentColor" stroke-linecap="square"/>`,
keyboard: `<path d="M5.125 7.375V4.375H14.875V2.875M8.3125 13.9375H11.6875M8.125 13.9375H11.875M2.125 7.375H17.875V17.125H2.125V7.375ZM5.5 10.375H5.125V10.75H5.5V10.375ZM8.5 10.375H8.125V10.75H8.5V10.375ZM11.875 10.375H11.5V10.75H11.875V10.375ZM14.875 10.375H14.5V10.75H14.875V10.375ZM14.875 13.75H14.5V14.125H14.875V13.75ZM5.5 13.75H5.125V14.125H5.5V13.75Z" stroke="currentColor" stroke-linecap="square"/>`,
selector: `<path d="M6.66626 12.5033L9.99959 15.8366L13.3329 12.5033M6.66626 7.50326L9.99959 4.16992L13.3329 7.50326" stroke="currentColor" stroke-linecap="square"/>`,
"arrow-down-to-line": `<path d="M15.2083 11.6667L10 16.875L4.79167 11.6667M10 16.25V3.125" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>`,
}
export interface IconProps extends ComponentProps<"svg"> {