Fix result-ai content scrolling

Author: sunls24

app/api/openai/route.ts

@@ -2,7 +2,7 @@ import { OpenAI } from "openai";
 import { OpenAIStream, StreamingTextResponse } from "ai";
 import { NextResponse } from "next/server";
 import { kv } from "@vercel/kv";
-import { history, KV_DATA } from "@/lib/constant";
+import { History, KV_DATA } from "@/lib/constant";
 import { getLocaleTime } from "@/lib/utils";
 import { apiKeyPool } from "@/lib/pool";
 
@@ -25,7 +25,7 @@ export async function POST(req: Request) {
     const guaChange = splitList[2];
 
     if (process.env.KV_REST_API_URL) {
-      kv.lpush<history>(KV_DATA, {
+      kv.lpush<History>(KV_DATA, {
         prompt: prompt,
         gua: guaMark,
         change: guaChange,

app/history/page.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import clsx from "clsx";
 import { kv } from "@vercel/kv";
-import { history, KV_DATA } from "@/lib/constant";
+import { History, KV_DATA } from "@/lib/constant";
 
 const tdStyle = "border py-2 px-3 sm:px-4";
 
@@ -13,7 +13,7 @@ async function Page() {
       </div>
     );
   }
-  const data = await kv.lrange<history>(KV_DATA, 0, 100);
+  const data = await kv.lrange<History>(KV_DATA, 0, 100);
   return (
     <div className="mx-auto w-[88%] max-w-2xl py-6 sm:py-10">
       <table className="w-full table-fixed shadow">

components/result-ai.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { RotateCw } from "lucide-react";
 
@@ -13,11 +13,43 @@ function ResultAI({
   onCompletion: () => void;
   error: Error | undefined;
 }) {
-  const resultRef = useRef<any>(null);
+  const scrollRef = useRef<HTMLElement>(null);
+  const [autoScroll, setAutoScroll] = useState(false);
 
   useEffect(() => {
-    resultRef.current.scrollTop = resultRef.current.scrollHeight;
-  }, [completion, isLoading]);
+    setAutoScroll(isLoading);
+  }, [isLoading]);
+
+  useEffect(() => {
+    if (!autoScroll) {
+      return;
+    }
+    scrollTo();
+  });
+
+  function scrollTo() {
+    requestAnimationFrame(() => {
+      if (
+        !scrollRef.current ||
+        scrollRef.current.scrollHeight ===
+          scrollRef.current.clientHeight + scrollRef.current.scrollTop
+      ) {
+        return;
+      }
+      scrollRef.current.scrollTo(0, scrollRef.current.scrollHeight);
+    });
+  }
+
+  function onScroll(e: HTMLElement) {
+    if (!isLoading) {
+      return;
+    }
+    const hitBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 15;
+    if (hitBottom === autoScroll) {
+      return;
+    }
+    setAutoScroll(hitBottom);
+  }
 
   return (
     <div className="h-0 w-full flex-1 sm:max-w-md md:max-w-2xl">
@@ -30,7 +62,8 @@ function ResultAI({
         </div>
       )}
       <article
-        ref={resultRef}
+        ref={scrollRef}
+        onScroll={(e) => onScroll(e.currentTarget)}
         className="max-h-full overflow-auto whitespace-break-spaces rounded-md border p-3 shadow dark:border-0 dark:bg-secondary/90 dark:shadow-none sm:p-5"
       >
         {error ? (

lib/constant.ts

@@ -1,6 +1,6 @@
 export const KV_DATA = "divination";
 
-export interface history {
+export interface History {
   date: string;
   prompt: string;
   gua: string;