use stick to bottom

useStickToBottom

تم تصميمه مع وضع روبوتات الدردشة التي تعمل بالذكاء الاصطناعي في الاعتبار، مما يعمل على تشغيل bolt.new بواسطة StackBlitz

خطاف React خفيف الوزن لا يعتمد على أي شيء + مكون يلتصق تلقائيًا بأسفل الحاوية ويحرك المحتوى بسلاسة للحفاظ على موضعه المرئي على الشاشة أثناء إضافة محتوى جديد.

سمات

• لا يتطلب دعم CSS على مستوى overflow-anchor الذي لا يدعمه Safari.
• يمكن توصيله بأي مكون موجود باستخدام خطاف مع المراجع. أو ببساطة استخدم المكون المقدم، الذي يتعامل مع المراجع نيابةً عنك بالإضافة إلى توفير السياق - حتى تتمكن المكونات الفرعية من التحقق من isAtBottom والتمرير برمجيًا إلى الأسفل.
• يستخدم واجهة برمجة تطبيقات ResizeObserver الحديثة والمدعومة جيدًا لاكتشاف متى يتم تغيير حجم المحتوى.
  • يدعم تقليص المحتوى دون فقدان الالتصاق - وليس مجرد زيادة الطول.
• يتعامل بشكل صحيح مع تثبيت التمرير. هذا هو المكان الذي يتم فيه تغيير حجم المحتوى الموجود أعلى إطار العرض، ولا يتسبب ذلك في انتقال المحتوى المعروض حاليًا في إطار العرض لأعلى أو لأسفل.
• يسمح للمستخدم بإلغاء الالتصاق في أي وقت عن طريق التمرير لأعلى.
  • يميز المنطق الذكي تمرير المستخدم عن أحداث تمرير الرسوم المتحركة المخصصة (دون القيام بأي تراجع قد يؤدي إلى تفويت بعض الأحداث).
  • تعمل الأجهزة المحمولة بشكل جيد مع هذا المنطق أيضًا.
• يستخدم خوارزمية تمرير سلسة تم تنفيذها خصيصًا، وتتميز برسوم متحركة نابضة تعتمد على السرعة (مع معلمات قابلة للتكوين).
  • تستخدم المكتبات الأخرى وظائف التخفيف ذات الفترات بدلاً من ذلك، ولكنها لا تعمل بشكل جيد عندما تريد دفق محتوى جديد بأحجام متغيرة - وهو أمر شائع في حالات استخدام روبوت الدردشة بالذكاء الاصطناعي.
  • يُرجع الأمر scrollToBottom Promise<boolean> والذي سيتم تحويله إلى true بمجرد نجاح التمرير، أو false إذا تم إلغاء التمرير.

الاستخدام

مكون <StickToBottom>

 import { StickToBottom , useStickToBottomContext } from 'use-stick-to-bottom' ;

function Chat ( ) {
  return (
    < StickToBottom className = "h-[50vh] relative" resize = "smooth" initial = "smooth" >
      < StickToBottom . Content className = "flex flex-col gap-4" >
        { messages . map ( ( message ) => (
          < Message key = { message . id } message = { message } / >
        ) ) }
      < / StickToBottom . Content >

      < ScrollToBottom / >

      { /* This component uses `useStickToBottomContext` to scroll to bottom when the user enters a message */ }
      < ChatBox / >
    < / StickToBottom >
  ) ;
}

function ScrollToBottom ( ) {
  const { isAtBottom , scrollToBottom } = useStickToBottomContext ( ) ;

  return (
    ! isAtBottom && (
      < button
        className = "absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
        onClick = { ( ) => scrollToBottom ( ) }
      / >
    )
  ) ;
} 

useStickToBottom هوك

 import { useStickToBottom } from 'use-stick-to-bottom' ;

function Component ( ) {
  const { scrollRef , contentRef } = useStickToBottom ( ) ;

  return (
    < div style = { { overflow : 'auto' } } ref = { scrollRef } >
      < div ref = { contentRef } >
        { messages . map ( ( message ) => (
          < Message key = { message . id } message = { message } / >
        ) ) }
      < / div >
    < / div >
  ) ;
}