feat: add scroll to bottom button and auto-scroll on session load

src/pages/GamePage.tsx

@@ -60,8 +60,10 @@ export default function GamePage() {
   const [error, setError] = useState<string | null>(null);
   const [streamingContent, setStreamingContent] = useState("");
   const [showSessionMenu, setShowSessionMenu] = useState(false);
+  const [showScrollButton, setShowScrollButton] = useState(false);
   const abortControllerRef = useRef<AbortController | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -159,10 +161,25 @@ export default function GamePage() {
     scrollToBottom();
   }, [session?.messages]);
 
+  // Scroll to bottom on session load
+  useEffect(() => {
+    if (session && !isInitialLoading) {
+      setTimeout(() => scrollToBottom(), 100);
+    }
+  }, [currentSessionId, isInitialLoading]);
+
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   };
 
+  const handleScroll = () => {
+    const container = messagesContainerRef.current;
+    if (!container) return;
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+    setShowScrollButton(distanceFromBottom > 200);
+  };
+
   const startStory = async (
     storyData: Story,
     sessionData: GameSession,
@@ -528,7 +545,11 @@ export default function GamePage() {
       </header>
 
       <div className="game-content">
-        <div className="messages-container">
+        <div 
+          className="messages-container" 
+          ref={messagesContainerRef}
+          onScroll={handleScroll}
+        >
           {session?.messages.map((message) => (
             <div key={message.id} className={`message ${message.role}`}>
               <div className="message-content">
@@ -571,6 +592,12 @@ export default function GamePage() {
           <div ref={messagesEndRef} />
         </div>
 
+        {showScrollButton && (
+          <button className="scroll-to-bottom-btn" onClick={scrollToBottom}>
+            ↓
+          </button>
+        )}
+
         {/* RPG кнопки скрыты — раскомментировать при необходимости
         <div className="quick-actions">
           <button onClick={() => handleQuickAction("Осмотреться вокруг")}>