fix(ui): use sticky layout at mobile platform, fix chrome scroll bug

src/components/Main.astro

@@ -7,7 +7,7 @@ import '@/assets/transition.css'
 import Conversation from './main/Conversation'
 ---
 
-<main class="relative h-100vh flex-1 flex flex-col overflow-hidden bg-base">
+<main class="relative h-full flex-1 flex flex-col overflow-hidden bg-base">
  <Header client:load />
  <main class="flex-1 mt-14 flex flex-col overflow-hidden">
  <!-- <ConversationConfiguration /> -->

src/components/Send.tsx

@@ -6,6 +6,7 @@ import { addConversation, conversationMap, currentConversationId } from '@/store
 import { loadingStateMap, streamsMap } from '@/stores/streams'
 import { handlePrompt } from '@/logics/conversation'
 import { globalAbortController } from '@/stores/settings'
+import { useMobileScreen } from '@/hooks'
 
 export default () => {
  let inputRef: HTMLTextAreaElement
@@ -18,6 +19,7 @@ export default () => {
  const $globalAbortController = useStore(globalAbortController)
 
  const [inputPrompt, setInputPrompt] = createSignal('')
+ const [footerClass, setFooterClass] = createSignal('')
  const isEditing = () => inputPrompt() || $isSendBoxFocus()
  const currentConversation = () => {
  return $conversationMap()[$currentConversationId()]
@@ -29,6 +31,10 @@ export default () => {
  createShortcut(['Control', 'Enter'], () => {
  $isSendBoxFocus() && handleSend()
  })
+
+ useMobileScreen(() => {
+ setFooterClass('sticky bottom-0 left-0 right-0 overflow-hidden')
+ })
  })
 
  const stateType = () => {
@@ -155,7 +161,7 @@ export default () => {
  }
 
  return (
- <div class={`relative shrink-0 border-t border-base pb-[env(safe-area-inset-bottom)] transition transition-colors duration-300 ${stateRootClass()}`}>
+ <div class={`relative shrink-0 border-t border-base pb-[env(safe-area-inset-bottom)] transition transition-colors duration-300  ${stateRootClass()} ${footerClass()}`}>
  <div class={`relative transition transition-height duration-240 ${stateHeightClass()}`}>
  <Switch fallback={<EmptyState />}>
  <Match when={stateType() === 'error'}>

src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useDark'
 export * from './useCopy'
 export * from './useClickOutside'
 export * from './useLargeScreen'
+export * from './useMobileScreen'

src/hooks/useMobileScreen.ts

@@ -0,0 +1,22 @@
+import { createSignal, onCleanup, onMount } from 'solid-js'
+import { throttle } from '@solid-primitives/scheduled'
+
+export const useMobileScreen = (handler: (e: UIEvent) => void) => {
+ const [isMobileScreen, setIsMobileScreen] = createSignal(false)
+
+ const handleResize = throttle((e: UIEvent) => {
+ setIsMobileScreen(window.innerWidth < 640)
+ if (window.innerWidth < 640)
+ return handler(e)
+ }, 200)
+
+ onMount(() => {
+ window.addEventListener('resize', handleResize)
+ })
+
+ onCleanup(() => {
+ window.removeEventListener('resize', handleResize)
+ })
+
+ return isMobileScreen
+}