Display knowledge base stats in AI Assistant

Author: bogdan-ts

ui/cspell.json

@@ -200,6 +200,7 @@
     "TSQL",
     "sparql",
     "SPARQL",
-    "subtransactions"
+    "subtransactions",
+    "mbox"
   ]
 }

ui/packages/platform/src/components/KBStats/KBStats.tsx

@@ -0,0 +1,72 @@
+import React, { useMemo } from "react";
+import { useKBStats } from "./hooks";
+import Box from "@mui/material/Box/Box";
+import { makeStyles, Typography } from "@material-ui/core";
+import { Link } from "@postgres.ai/shared/components/Link2";
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    marginTop: 42,
+    '& p': {
+      margin: 0,
+      lineHeight: 1.5,
+    },
+    [theme.breakpoints.down(480)]: {
+      marginTop: 24
+    },
+    [theme.breakpoints.down(360)]: {
+      marginTop: 0
+    }
+  },
+  headingLink: {
+    fontSize: 16,
+    [theme.breakpoints.down(330)]: {
+      fontSize: 14
+    }
+  },
+}))
+
+export const KBStats = () => {
+  const { data, loading, error } = useKBStats();
+  const classes = useStyles()
+
+  const { totalSum, lastUpdate } = useMemo(() => {
+    if (!data?.length) {
+      return { totalSum: 0, lastUpdate: '' };
+    }
+
+    const categoryTotals = new Map<string, number>();
+    let latestDate = data[0].last_document_date;
+
+    data.forEach(({ category, total_count, last_document_date }) => {
+      categoryTotals.set(category, total_count);
+      if (new Date(last_document_date) > new Date(latestDate)) {
+        latestDate = last_document_date;
+      }
+    });
+
+    latestDate = new Date(latestDate).toISOString().replace('T', ' ').split('.')[0]
+
+    const totalSum = Array.from(categoryTotals.values()).reduce((sum, count) => sum + count, 0);
+    return { totalSum, lastUpdate: latestDate };
+  }, [data]);
+
+  if (error || loading || !data?.length) {
+    return <div className={classes.container} style={{ height: 58.5 }}></div>;
+  }
+
+  return (
+    <Box className={classes.container}>
+      <p>Knowledge base contains {totalSum.toLocaleString(navigator.language)} documents.</p>
+      <p>Last updated: {lastUpdate}.</p>
+      <Link
+          external
+          to={`https://postgres.ai/docs/reference-guides/postgres-ai-bot-reference#tool-rag_search`}
+          target="_blank"
+          title="Show full information"
+        >
+        Details
+      </Link>
+    </Box>
+  );
+}

ui/packages/platform/src/components/KBStats/hooks.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+import { request } from "../../helpers/request";
+
+export type KBStats = {
+  category: 'articles' | 'docs' | 'src' | 'mbox',
+  domain: string,
+  total_count: number,
+  count: number,
+  last_document_date: string
+}
+
+type UseKBStats = {
+  data: KBStats[] | null,
+  error: string | null,
+  loading: boolean
+}
+
+export const useKBStats = (): UseKBStats => {
+  const [data, setData] = useState<KBStats[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const apiServer = process.env.REACT_APP_API_URL_PREFIX || '';
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true)
+      try {
+        const response = await request("/kb_category_domain_counts", {}, apiServer)
+        const result: KBStats[] = await response.json();
+        setData(result);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData().catch(console.error);
+  }, []);
+
+  return { data, loading, error };
+};

ui/packages/platform/src/pages/Bot/HintCards/HintCard/HintCard.tsx

@@ -45,6 +45,9 @@ const useStyles = makeStyles((theme) => ({
       fontSize: '0.813rem',
       height: 'auto',
     },
+    [theme.breakpoints.down(330)]: {
+      fontSize: '.75rem'
+    }
   },
 }));
 

ui/packages/platform/src/pages/Bot/HintCards/HintCards.tsx

@@ -14,7 +14,11 @@ const useStyles = makeStyles((theme) => ({
       justifyContent: 'center',
     },
     [theme.breakpoints.down(480)]: {
-      marginBottom: '1.5rem',
+      marginBottom: '1rem',
+    },
+    [theme.breakpoints.down(380)]: {
+      marginTop: '1rem',
+      marginBottom: '.5rem',
     },
     [theme.breakpoints.down(760)]: {
       '& > *:nth-child(n+3)': {

ui/packages/platform/src/pages/Bot/Messages/Messages.tsx

@@ -19,6 +19,7 @@ import { Message } from "./Message/Message";
 import { useAiBot } from "../hooks";
 import { HintCards } from "../HintCards/HintCards";
 import { ErrorMessage } from "./ErrorMessage/ErrorMessage";
+import { KBStats } from "../../../components/KBStats/KBStats";
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -36,7 +37,10 @@ const useStyles = makeStyles(
     },
     emptyChatMessage: {
       maxWidth: '80%',
-      fontSize: '0.875rem'
+      fontSize: 14,
+      [theme.breakpoints.down(330)]: {
+        fontSize: 12
+      }
     },
     messages: {
       overflowY: 'auto',
@@ -229,6 +233,7 @@ export const Messages = React.memo(({orgId}: {orgId: number}) => {
           Depending on settings, LLM service provider such as GCP or OpenAI is used.
         </Typography>
         <HintCards orgId={orgId} />
+        <KBStats />
       </div>
     )
   }