feat: Internal page default filter out examples (#116)

<img width="1219" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/5669963/a367061a-0cdf-448a-9fb2-9a58cfee47c9">

<img width="1373" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/5669963/e939fdb8-d0fa-400c-93c5-3386d7b8c3c0">

app/internal/page.tsx

@@ -1,11 +1,13 @@
-import { DatePicker } from '@/components/DatePicker';
-import Loading from '@/components/ui/Loading';
 import { isValidDate } from '@/lib/utils';
 import { format } from 'date-fns';
 import { redirect } from 'next/navigation';
 import { Suspense } from 'react';
-import InternalServer from './server';
+import MessageGridServer from '../../components/internal/MessageGridServer';
 import { sessionUser } from '@/auth';
+import MessageFilter from '@/components/internal/MessageFilter';
+import { MessageFilterParams } from '@/lib/types';
+import { IconLoading } from '@/components/ui/Icons';
+import Loading from '@/components/ui/Loading';
 
 export interface pageProps {
   searchParams?: { [key: string]: string | string[] | undefined };
@@ -16,32 +18,43 @@ export default async function page({ searchParams }: pageProps) {
   if (!isAdmin) {
     redirect('/');
   }
-  const date = searchParams?.date as string;
 
-  if (!date || !isValidDate(date)) {
+  // Default filter is today's date
+  if (
+    !searchParams ||
+    !searchParams?.date ||
+    !isValidDate(searchParams?.date as string)
+  ) {
     const today = new Date();
     // default to today
     redirect(`/internal?date=${format(today, 'yyyy-MM-dd')}`);
   }
 
+  const messageFilter = Object.entries(searchParams).reduce((acc, entry) => {
+    switch (entry[0]) {
+      case 'date':
+        return { ...acc, date: entry[1] as string };
+      case 'includeExamples':
+        return { ...acc, includeExamples: entry[1] === 'true' };
+      default:
+        return acc;
+    }
+  }, {} as MessageFilterParams);
+
   return (
-    <Suspense
-      fallback={
-        <div className="h-screen w-screen flex justify-center items-center">
-          <Loading />
-        </div>
-      }
-    >
-      <div className="w-[1600px] max-w-full mx-auto flex flex-col space-y-4 items-center">
-        <DatePicker
-          date={date}
-          setDate={async newDate => {
-            'use server';
-            redirect(`/internal?date=${newDate}`);
-          }}
-        />
-        <InternalServer date={date} />
-      </div>
-    </Suspense>
+    <div className="w-[1600px] max-w-full mx-auto flex flex-col space-y-4 items-center">
+      <MessageFilter messageFilter={messageFilter} />
+      <Suspense
+        // https://stackoverflow.com/questions/76644147/suspense-fallback-is-not-showing-in-nextjs-13-when-navigate-by-userouter
+        key={JSON.stringify(searchParams)}
+        fallback={
+          <div className="h-screen w-screen flex justify-center items-center">
+            <Loading />
+          </div>
+        }
+      >
+        <MessageGridServer messageFilter={messageFilter} />
+      </Suspense>
+    </div>
   );
 }

app/internal/server.tsx

@@ -1,16 +0,0 @@
-import { Card } from '@/components/ui/Card';
-import Img from '@/components/ui/Img';
-import { dbInternalGetAllMessageByDate } from '@/lib/db/functions';
-import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/Dialog';
-import { Button } from '@/components/ui/Button';
-import { IconArrowUpRight } from '@/components/ui/Icons';
-import MessageGrid from '@/components/internal/MessageGrid';
-
-export interface InternalServerProps {
-  date: string;
-}
-
-export default async function InternalServer({ date }: InternalServerProps) {
-  const messages = await dbInternalGetAllMessageByDate(date);
-  return <MessageGrid messages={messages} />;
-}

components/DatePicker.tsx

@@ -15,7 +15,7 @@ import {
 
 type DatePickerProps = {
   date: string;
-  setDate: (date?: string) => Promise<void>;
+  setDate: (date: string) => void;
 };
 
 export function DatePicker({ date, setDate }: DatePickerProps) {
@@ -39,9 +39,9 @@ export function DatePicker({ date, setDate }: DatePickerProps) {
         <Calendar
           mode="single"
           selected={new Date(date)}
-          onSelect={async newDate => {
+          onSelect={newDate => {
             if (newDate) {
-              await setDate(format(newDate, 'yyyy-MM-dd'));
+              setDate(format(newDate, 'yyyy-MM-dd'));
               setCalendarOpen(false);
             }
           }}

components/Header.tsx

@@ -47,26 +47,6 @@ export async function Header() {
         </Suspense>
       )}
       <div className="grow" />
-      {/* <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="link" asChild className="mr-2">
-            <Link href="/chat">
-              <IconPlus />
-            </Link>
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>New chat</TooltipContent>
-      </Tooltip> */}
-      {/* {isAdmin && (
-        <Button variant="link" asChild className="mr-2">
-          <Link href="/all">All Chats (Internal)</Link>
-        </Button>
-      )}
-      {isAdmin && (
-        <Button variant="link" asChild className="mr-2">
-          <Link href="/project">Projects (Internal)</Link>
-        </Button>
-      )} */}
       <Button variant="link" asChild className="mr-2">
         <Link href="/">New conversation</Link>
       </Button>
@@ -86,7 +66,7 @@ export async function Header() {
       <Tooltip>
         <TooltipTrigger asChild>
           <Button variant="link" size="icon" asChild className="mr-2">
-            <Link href="https://discord.gg/gSC5p7ED" target="_blank">
+            <Link href="https://discord.gg/RVcW3j9RgR" target="_blank">
               <IconDiscord className="size-5" />
             </Link>
           </Button>

components/internal/MessageFilter.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import React from 'react';
+import { DatePicker } from '../DatePicker';
+import { MessageFilterParams } from '@/lib/types';
+import { Checkbox } from '../ui/checkbox';
+
+export interface MessageFilterProps {
+  messageFilter: MessageFilterParams;
+}
+
+const MessageFilter: React.FC<MessageFilterProps> = ({ messageFilter }) => {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const { push, refresh } = useRouter();
+  return (
+    <div className="flex flex-row space-x-4">
+      <DatePicker
+        date={messageFilter.date}
+        setDate={newDate => {
+          const params = new URLSearchParams(searchParams);
+          params.set('date', newDate);
+          push(`${pathname}?${params.toString()}`);
+        }}
+      />
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id="include-example"
+          checked={messageFilter.includeExamples}
+          onCheckedChange={checked => {
+            const params = new URLSearchParams(searchParams);
+            params.set('includeExamples', String(checked));
+            push(`${pathname}?${params.toString()}`);
+          }}
+        />
+        <label
+          htmlFor="terms"
+          className="include-example font-medium leading-none"
+        >
+          Include examples
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default MessageFilter;

components/internal/MessageGridServer.tsx

@@ -0,0 +1,17 @@
+import { dbInternalGetAllMessageByDate } from '@/lib/db/functions';
+import MessageGrid from '@/components/internal/MessageGrid';
+import { MessageFilterParams } from '@/lib/types';
+
+export interface MessageGridServerProps {
+  messageFilter: MessageFilterParams;
+}
+
+export default async function MessageGridServer({
+  messageFilter,
+}: MessageGridServerProps) {
+  const messages = await dbInternalGetAllMessageByDate(messageFilter);
+  if (!messages.length) {
+    return <p className="text-sm italic">No messages</p>;
+  }
+  return <MessageGrid messages={messages} />;
+}

components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+
+import { cn } from '@/lib/utils';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer size-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

lib/db/functions.ts

@@ -5,6 +5,7 @@ import prisma from './prisma';
 import {
   ChatWithMessages,
   MessageAssistantResponse,
+  MessageFilterParams,
   MessageUserInput,
 } from '../types';
 import { revalidatePath } from 'next/cache';
@@ -217,7 +218,10 @@ export async function dbDeleteChat(chatId: string) {
  * @returns A promise that resolves to an array of messages.
  * @throws Error if the provided date is not valid.
  */
-export async function dbInternalGetAllMessageByDate(date: string) {
+export async function dbInternalGetAllMessageByDate(
+  messageFilter: MessageFilterParams,
+) {
+  const { date, includeExamples } = messageFilter;
   // date must be in the format 'YYYY-MM-DD'
   if (!isValidDate(date)) {
     throw Error('Not valid date');
@@ -236,6 +240,9 @@ export async function dbInternalGetAllMessageByDate(date: string) {
         gte: new Date(date + 'T00:00:00Z'),
         lt: new Date(date + 'T23:59:59Z'),
       },
+      mediaUrl: includeExamples
+        ? undefined
+        : { not: { contains: '/examples/' } },
     },
   });
 }

lib/types.ts

@@ -21,3 +21,8 @@ export interface SignedPayload {
   signedUrl: string;
   fields: Record<string, string>;
 }
+
+export interface MessageFilterParams {
+  date: string;
+  includeExamples: boolean;
+}

package.json

@@ -19,6 +19,7 @@
     "@aws-sdk/credential-providers": "^3.556.0",
     "@aws-sdk/s3-presigned-post": "^3.556.0",
     "@prisma/client": "5.14.0",
+    "@radix-ui/react-checkbox": "^1.1.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@prisma/client':
         specifier: 5.14.0
         version: 5.14.0(prisma@5.14.0)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-dialog':
         specifier: ^1.0.5
         version: 1.0.5(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -809,6 +812,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-checkbox@1.1.0':
+    resolution: {integrity: sha512-3+kSzVfMONtP3B6CvaOrXLVTyGYws7tGmG5kOY0AfyH9sexkLytIwciNwjZhY0RoGOEbxI7bMS21XYB8H5itWQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.0.3':
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies:
@@ -1280,6 +1296,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-previous@1.1.0':
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-rect@1.0.1':
     resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
     peerDependencies:
@@ -5112,6 +5137,22 @@ snapshots:
       '@types/react': 18.2.79
       '@types/react-dom': 18.2.25
 
+  '@radix-ui/react-checkbox@1.1.0(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.2.79)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.79
+      '@types/react-dom': 18.2.25
+
   '@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
@@ -5598,6 +5639,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.79
 
+  '@radix-ui/react-use-previous@1.1.0(@types/react@18.2.79)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.79
+
   '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.79)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4