@bbki.ng/site 5.4.14 → 5.4.15

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @bbki.ng/site
 
+## 5.4.15
+
 ## 5.4.14
 
 ## 5.4.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.4.14",
+  "version": "5.4.15",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",
@@ -20,8 +20,8 @@
     "sonner": "1.4.0",
     "swr": "^2.2.5",
     "vaul": "1.1.2",
-    "@bbki.ng/stylebase": "3.1.1",
-    "@bbki.ng/components": "5.2.6"
+    "@bbki.ng/components": "5.2.7",
+    "@bbki.ng/stylebase": "3.1.1"
   },
   "devDependencies": {
     "@mdx-js/mdx": "2.0.0-next.9",

package/src/blog/hooks/use_streaming.ts

@@ -1,14 +1,13 @@
 import useSWR from "swr";
+import useSWRInfinite from "swr/infinite";
 import { baseFetcher, withBBApi } from "@/utils";
 import { API_CF_ENDPOINT } from "@/constants/routes";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState, useCallback } from "react";
 import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
 
 // In dev, use /api prefix to leverage Vite proxy to localhost:8787
 const isProd = typeof window !== "undefined" && /^https:\/\/bbki.ng/.test(window.location.href);
-const streamingFetcher = !isProd
-  ? (resource: string, init?: RequestInit) => baseFetcher(`/api/${resource}`, init)
-  : withBBApi(baseFetcher)(API_CF_ENDPOINT);
+const API_BASE = !isProd ? "/api" : API_CF_ENDPOINT;
 
 export type StreamingItem = {
   id: string;
@@ -18,10 +17,76 @@ export type StreamingItem = {
   createdAt: string;
 };
 
-export const useStreaming = () => {
-  const { data, error } = useSWR("streaming", streamingFetcher, {
+interface StreamingResponse {
+  status: string;
+  data: StreamingItem[];
+}
+
+export interface StreamingQueryParams {
+  /** Fetch records older than this ID (for pagination / next page) */
+  before?: string;
+  /** Fetch records newer than this ID (for polling / new messages) */
+  after?: string;
+  /** Number of records to fetch (default: 8, max: 100) */
+  offset?: number;
+}
+
+/**
+ * Build streaming API URL with query parameters
+ */
+function buildStreamingUrl(params: StreamingQueryParams = {}): string {
+  const url = new URL(`${API_BASE}/streaming`, !isProd ? window.location.origin : undefined);
+
+  if (params.before) {
+    url.searchParams.set("before", params.before);
+  }
+  if (params.after) {
+    url.searchParams.set("after", params.after);
+  }
+  if (params.offset) {
+    url.searchParams.set("offset", params.offset.toString());
+  }
+
+  return !isProd ? url.pathname + url.search : url.toString();
+}
+
+/**
+ * Fetch streaming data from API
+ */
+async function fetchStreaming(params: StreamingQueryParams = {}): Promise<StreamingResponse> {
+  const url = buildStreamingUrl(params);
+  const response = await baseFetcher(url);
+  return response as StreamingResponse;
+}
+
+// SWR key generator for streaming queries
+const getStreamingKey = (params: StreamingQueryParams) => {
+  const parts = ["streaming"];
+  if (params.before) parts.push(`before=${params.before}`);
+  if (params.after) parts.push(`after=${params.after}`);
+  if (params.offset) parts.push(`offset=${params.offset}`);
+  return parts.join("?");
+};
+
+interface UseStreamingOptions {
+  /** Polling interval in ms (default: 1000, set to 0 to disable) */
+  refreshInterval?: number;
+  /** Initial offset for first fetch (default: 8) */
+  offset?: number;
+}
+
+/**
+ * Hook for fetching streaming data with polling
+ * Use this for simple cases where you just need the latest data
+ */
+export function useStreaming(options: UseStreamingOptions = {}) {
+  const { refreshInterval = 1000, offset = 8 } = options;
+
+  const key = getStreamingKey({ offset });
+
+  const { data, error, mutate } = useSWR(key, () => fetchStreaming({ offset }), {
     revalidateOnFocus: true,
-    refreshInterval: 1000,
+    refreshInterval,
   });
 
   const isLoading = !data && !error;
@@ -33,7 +98,7 @@ export const useStreaming = () => {
     customElements.whenDefined("bb-msg-history").then(() => {
       forceUpdate((prev) => prev + 1);
     });
-  }, [])
+  }, []);
 
   const { setIsLoading } = useContext(GlobalLoadingContext);
 
@@ -42,8 +107,10 @@ export const useStreaming = () => {
   }, [isLoading, setIsLoading]);
 
   return {
-    streaming: data?.data as StreamingItem[] | undefined,
+    streaming: data?.data ?? [],
     isError: error,
     isLoading,
+    /** Refetch data manually */
+    mutate,
   };
-};
+}

package/src/blog/pages/streaming/index.tsx

@@ -55,7 +55,7 @@ const Streaming = () => {
               </bb-msg-history>
             </Panel>
             <Button
-              className="mt-128"
+              className="mt-64"
               transparent={!showScrollBtn}
               onClick={() => {
                 bbMsgHistoryRef.current?.scrollToBottom();
@@ -69,7 +69,7 @@ const Streaming = () => {
             style={{
               rotate: '180deg'
             }}
-            className={classNames("transition-opacity duration-300 inline-block", {
+            className={classNames("transition-opacity duration-200 inline-block", {
               "opacity-0": !showScrollBtn,
               "opacity-100": showScrollBtn,
             })}