add comment polling

Author: nkdem

prisma/schema.prisma

@@ -24,7 +24,7 @@ model Document {
 
 model Comment {
   id       String   @id @default(uuid()) @map("_id") 
-  text     String
+  content String
   document Document @relation(fields: [documentId], references: [id])
   documentId String
   createdAt DateTime @default(now())

src/components/Comment.tsx

@@ -1,3 +1,5 @@
+import { Comment } from "@prisma/client";
+
 function Comment({ title, content }: { title: string; content: string }) {
   return (
     <div className="px-3 border-black-10 rounded-lg p-2 bg-[#fff] border">
@@ -10,7 +12,7 @@ function Comment({ title, content }: { title: string; content: string }) {
 export default function Comments({
   comments,
 }: {
-  comments: { title: string; content: string }[]
+  comments: Comment[]
 }) {
   return (
     <div className="grid gap-4">

src/components/CommentInput.tsx

@@ -2,16 +2,20 @@
 
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
+import { useState } from "react";
 import { toast } from "sonner";
+import { createComment } from "./comment-actions";
 
-export default function CommentInput() {
+export default function CommentInput({ documentId }: { documentId: string }) {
+  const [content, setContent] = useState("");
   const handleSubmit = () => {
+    createComment(content, documentId);
     toast.success("Comment submitted!");
   };
 
   return (
     <div className="grid w-full gap-2">
-      <Textarea placeholder="Type your message here." className="resize-none" />
+      <Textarea placeholder="Type your message here." className="resize-none" value={content} onChange={(e) => setContent(e.target.value)} />
       <Button onClick={handleSubmit}>Send comment</Button>
     </div>
   );

src/components/DocumentView.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -8,27 +9,21 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import Comment from "./Comment";
-import Comments from "./Comment";
 import Tags from "./Tags";
 import CommentInput from "./CommentInput";
 import { useEffect, useRef } from "react";
+import { SearchResults } from "@/lib/embedding";
+import Comments from "./Comment";
 
-export default function DocumentView({
-  documentName,
-  documentTags,
-  documentUrl,
-  comments,
-}: {
-  documentName: string;
-  documentTags: string[];
-  documentUrl: string;
-  comments: { title: string; content: string }[];
-}) {
+export default function DocumentView(results
+  : {
+    results: SearchResults["results"][number];
+  }) {
   const embedRef = useRef<HTMLEmbedElement>(null);
 
   useEffect(() => {
-    fetch(documentUrl)
+    console.log(results.results.url);
+    fetch(results.results.url)
       .then((res) => res.blob())
       .then((blob) => {
         const blobToBase64 = (blob) => {
@@ -53,14 +48,15 @@ export default function DocumentView({
         }
         const embed = embedRef.current;
         // replace octet-stream with pdf
-        const url = documentUrl.replace(
+        const url = results.results.url.replace(
           "application/octet-stream",
           "application/pdf"
         );
         embed.setAttribute("type", "application/pdf");
         embed.setAttribute("src", url);
       });
   }, []);
+
   return (
     <Dialog aria-label="Edit Profile" defaultOpen>
       <DialogContent className="sm:max-w-[80vw] max-[50vw]: grid gap-4 grid-cols-3 h-[90vh] bg-gray-100">
@@ -74,12 +70,12 @@ export default function DocumentView({
         </div>
         <div className="col-span-3 sm:col-span-1 max-h-[100%] flex flex-col justify-between bg-white p-3 rounded-lg">
           <div className="flex flex-col gap-4 overflow-y-auto">
-            <h1 className="text-3xl font-bold">{documentName}</h1>
-            <Tags text={documentTags} />
+            <h1 className="text-3xl font-bold">{results.results.name}</h1>
+            <Tags text={results.results.tags} />
 
-            <Comments comments={comments} />
+            <Comments comments={results.results.comments} />
           </div>
-          <CommentInput />
+          <CommentInput documentId={results.results.documentId} />
         </div>
       </DialogContent>
     </Dialog>

src/components/Thumbnails.tsx

@@ -1,17 +1,46 @@
 'use client'
 import { useSearch } from '@/context/SearchContext'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { AspectRatio } from './ui/aspect-ratio';
 import Image from 'next/image';
 import DocumentView from './DocumentView';
+import { search } from '@/lib/embedding';
 
 
+export function useInterval(callback: () => void, delay: number) {
+  const savedCallback = useRef<() => void>(() => {
+    console.log('Default useInterval callback, unreachable');
+  });
+
+  // Remember the latest callback.
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      let id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}
 export const Thumbnails = (props: {}) => {
   const [results, setResults] = useSearch();
   const [selectedDoc, setSelectedDoc] = useState<number | null>(null);
+
+  useInterval(async () => {
+    if (results === null) return;
+    console.log('polling for new search results');
+    setResults(await search(results!.query));
+  }, 2000);
+
   return (
     <div className="flex gap-2 w-full h-full">
-      {results?.map((result, index) => {
+      {results?.results.map((result, index) => {
         return (
           // paper aspect ratio
           <AspectRatio ratio={9 / 16} key={result.documentId} className='w-60 h-60'
@@ -28,8 +57,8 @@ export const Thumbnails = (props: {}) => {
         )
       }
       )}
-      {selectedDoc !== null && (
-        <DocumentView documentName={results![selectedDoc]!.name} documentTags={results![selectedDoc]!.tags} documentUrl={results![selectedDoc]!.url} comments={[]} />
+      {selectedDoc !== null && results !== null && (
+        <DocumentView results={results.results[selectedDoc]} />
       )}
     </div>
   )

src/components/comment-actions.ts

@@ -0,0 +1,11 @@
+'use server'
+import { db } from "@/lib/db";
+
+export async function createComment(content: string, documentId: string) {
+  const comment = await db.comment.create({
+    data: {
+      content: content,
+      documentId: documentId,
+    }
+  })
+}

src/context/SearchContext.tsx

@@ -18,6 +18,10 @@ const useSearch = () => {
   return context;
 };
 
+
+// poll for search results
+
+
 function SearchProvider({ children }: { children: React.ReactNode }) {
   const [results, setResults] = useState<SearchResults | null>(null);
   return (

src/lib/embedding.ts

@@ -47,6 +47,14 @@ export async function search(query: string, n: number = 3) {
     .sort((a, b) => a.similarity - b.similarity)
     .slice(0, Math.min(similarities.length, n))
 
+  const comments = await db.comment.findMany({
+    where: {
+      documentId: {
+        in: topN.map((r) => r.documentId),
+      },
+    },
+  });
+
 
   const resultsWithThumbnails = await Promise.all(
     topN.map(async (r) => {
@@ -55,10 +63,14 @@ export async function search(query: string, n: number = 3) {
         ...r,
         thumbnail,
         url: await getPdf(r.documentId),
+        comments: comments.filter((c) => c.documentId === r.documentId),
       };
     })
   );
-  return resultsWithThumbnails;
+  return {
+    results: resultsWithThumbnails,
+    query,
+  };