From 9cab3c2cf58f1064c5c687d6723800ea600bf745 Mon Sep 17 00:00:00 2001
From: ajvpot <553597+ajvpot@users.noreply.github.com>
Date: Mon, 28 Jul 2025 00:00:00 +0000
Subject: [PATCH] restore auto refresh

---
 src/components/ChatBox.tsx       | 44 +++++++++++++++++++++++++++-----
 src/components/RefreshButton.tsx |  4 +--
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/components/ChatBox.tsx b/src/components/ChatBox.tsx
index b593249..2814887 100644
--- a/src/components/ChatBox.tsx
+++ b/src/components/ChatBox.tsx
@@ -66,25 +66,55 @@ export default function ChatBox({ showAllMessagesTab = false, className = "", st
     }
   }, [minimized, selectedTab]);
 
-  const fetchMessages = async (before?: string, replace = false) => {
+  // Auto-refresh effect
+  useEffect(() => {
+    if (!minimized) {
+      const interval = setInterval(() => {
+        // Auto-refresh should only fetch newer messages, not replace all
+        fetchMessages(undefined, false, true);
+      }, 5000);
+      
+      return () => clearInterval(interval);
+    }
+  }, [minimized, channelId]);
+
+  const fetchMessages = async (before?: string, replace = false, fetchNewer = false) => {
     setLoading(true);
     try {
       let url = `/api/chat?limit=${PAGE_SIZE}`;
       if (channelId) url += `&channel_id=${channelId}`;
-      if (before) url += `&before=${encodeURIComponent(before)}`;
+      
+      if (fetchNewer) {
+        // Fetch newer messages using the most recent message timestamp
+        const mostRecentTimestamp = messages.length > 0 ? messages[0].ingest_timestamp : undefined;
+        if (mostRecentTimestamp) url += `&after=${encodeURIComponent(mostRecentTimestamp)}`;
+      } else if (before) {
+        // Fetch older messages using before parameter
+        url += `&before=${encodeURIComponent(before)}`;
+      }
+      
       const res = await fetch(url);
       const data = await res.json();
       if (Array.isArray(data)) {
-        setMessages((prev) => replace ? data : [...prev, ...data]);
-        setHasMore(data.length === PAGE_SIZE);
-        if (data.length > 0) {
-          setLastBefore(data[data.length - 1].ingest_timestamp);
+        if (fetchNewer && data.length > 0) {
+          // Add newer messages to the beginning (most recent first)
+          setMessages((prev) => [...data, ...prev]);
+        } else {
+          setMessages((prev) => replace ? data : [...prev, ...data]);
+          setHasMore(data.length === PAGE_SIZE);
+          if (data.length > 0) {
+            setLastBefore(data[data.length - 1].ingest_timestamp);
+          }
         }
       } else {
         setHasMore(false);
       }
-    } catch {
+    } catch (error) {
       setHasMore(false);
+      if (fetchNewer) {
+        // Silently fail for auto-refresh
+        console.error('Auto-refresh failed:', error);
+      }
     } finally {
       setLoading(false);
     }
diff --git a/src/components/RefreshButton.tsx b/src/components/RefreshButton.tsx
index 1f56362..9570b45 100644
--- a/src/components/RefreshButton.tsx
+++ b/src/components/RefreshButton.tsx
@@ -19,8 +19,8 @@ export default function RefreshButton({
   small = false,
   disabled = false,
 }: RefreshButtonProps) {
-  const size = small ? 32 : 40;
-  const iconSize = small ? 18 : 22;
+  const size = small ? 24 : 40;
+  const iconSize = small ? 14 : 22;
   return (
     <>
       <button