Browse Source

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
David Hill 1 month ago
parent
commit
cf1fc02d27

+ 0 - 1
packages/app/src/i18n/de.ts

@@ -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",

+ 0 - 1
packages/app/src/i18n/es.ts

@@ -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",

+ 0 - 1
packages/app/src/i18n/fr.ts

@@ -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",

+ 0 - 1
packages/app/src/i18n/ja.ts

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

+ 0 - 1
packages/app/src/i18n/ko.ts

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

+ 0 - 1
packages/app/src/i18n/zh.ts

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

+ 18 - 17
packages/app/src/pages/session.tsx

@@ -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) => {

+ 1 - 0
packages/ui/src/components/icon.tsx

@@ -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"> {