Merge pull request #104 from OcularEngineering/streaming-bug

Streaming bug

packages/ocular-ui/.eslintrc.json

@@ -37,7 +37,8 @@
     }
   ],
   "rules": {
-    "@next/next/no-html-link-for-pages": "off"
+    "@next/next/no-html-link-for-pages": "off",
+    "react-hooks/exhaustive-deps": "off"
   },
   "env": {
     "jest": true

packages/ocular-ui/components/marketplace/webConnector.tsx

@@ -5,7 +5,6 @@ import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
@@ -19,14 +18,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
+import { Label } from '@/components/ui/label';;
 import {
   Table,
   TableBody,
@@ -49,10 +41,10 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { ArrowUpDown, ChevronDown, MoreHorizontal, Plus } from 'lucide-react';
 import * as React from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
+import SectionContainer from '@/components/section-container';
 
 export type Link = {
   location: string;
@@ -154,9 +146,9 @@ export default function WebConnector({ links }: { links: Link[] }) {
   });
 
   return (
-    <div className="flex flex-col h-screen">
-      <div className="flex-1  pt-4 px-4">
-        <Card className="w-full">
+    <SectionContainer className="items-center justify-center space-y-16">
+      <div className="flex-1">
+        <Card className="w-full rounded-2xl">
           <CardHeader>
             <CardTitle>Web Connector</CardTitle>
             <CardDescription>
@@ -231,58 +223,56 @@ export default function WebConnector({ links }: { links: Link[] }) {
         </Card>
       </div>
 
-      <div className="flex-1 overflow-y-auto px-4  flex flex-col">
-        <div className="rounded-md border hide-scrollbar flex flex-col">
-          <Table>
-            <TableHeader>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <TableHead key={header.id}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody className="overflow-y-auto">
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && 'selected'}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
-                    No results.
-                  </TableCell>
+      <div className="rounded-2xl border hide-scrollbar flex flex-col">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody className="overflow-y-auto">
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
                 </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
       </div>
-    </div>
+    </SectionContainer>
   );
 }

packages/ocular-ui/components/search/apps-faceted-filter.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useState, useEffect, useContext } from 'react';
+import { useState, useContext } from 'react';
 import { CheckIcon } from "@radix-ui/react-icons";
 import Image from 'next/image';
 import {
@@ -45,18 +45,20 @@ export function AppsFacetedFilter<TData, TValue>({
   Icon,
 }: AppsFacetedFilterProps<TData, TValue>) {
   const [selectedValues, setSelectedValues] = useState<Set<string>>(new Set()); // Track selected values with a Set
-  const [selectedArray, setSelectedArray] = useState<string[]>([]); // Additional state for an array of selected values
 
-  const { setselectedResultSources, selectedResultSources } = useContext(ApplicationContext);
+  const { setselectedResultSources } = useContext(ApplicationContext);
 
-  // Effect to print and handle selected values array whenever selectedValues changes
-  useEffect(() => {
-    const newSelectedArray = Array.from(selectedValues);
-
-    setSelectedArray(newSelectedArray);
+  const handleSelect = (value: string) => {
+    const newSelectedValues = new Set(selectedValues);
+    if (newSelectedValues.has(value)) {
+      newSelectedValues.delete(value);
+    } else {
+      newSelectedValues.add(value);
+    }
+    setSelectedValues(newSelectedValues); // Update state
+    const newSelectedArray = Array.from(newSelectedValues);
     setselectedResultSources(newSelectedArray); // Update the result sources whenever selection changes
-
-  }, [selectedValues, setselectedResultSources]);
+  };
 
   return (
     <Popover>
@@ -117,15 +119,7 @@ export function AppsFacetedFilter<TData, TValue>({
                 return (
                   <CommandItem
                     key={option.value}
-                    onSelect={() => {
-                      const newSelectedValues = new Set(selectedValues);
-                      if (isSelected) {
-                        newSelectedValues.delete(option.value);
-                      } else {
-                        newSelectedValues.add(option.value);
-                      }
-                      setSelectedValues(newSelectedValues); // Update state
-                    }}
+                    onSelect={() => handleSelect(option.value)}
                   >
                     <div
                       className={cn(
@@ -153,7 +147,7 @@ export function AppsFacetedFilter<TData, TValue>({
                   <CommandItem
                     onSelect={() => {
                       setSelectedValues(new Set());
-                      setSelectedArray([]); // Clear the selection array as well
+                      setselectedResultSources([]); // Clear the selection array as well
                     }}
                     className="justify-center text-center"
                   >

packages/ocular-ui/components/search/header.tsx

@@ -19,6 +19,8 @@ export default function Header() {
     setSearchInput(e.target.value);
   }
 
+  console.log("123")
+
   return (
     <header className={`bg-background sticky flex flex-col justify-center items-center top-0 dark:text-white shadow-sm dark:border-b z-1000`}>
       <div className="w-full max-w-7xl mx-auto px-6 pt-5">

packages/ocular-ui/lib/global-state.tsx

@@ -166,7 +166,6 @@ export const GlobalState: FC<GlobalStateProps> = ({ children }) => {
 
   const fetchStartingChatData = async () => {
     const user = await (await api.auth.loggedInUserDetails()).data.user
-    console.log("user",user)
 
     // if (user) {
     //   const user = session.user

packages/ocular-ui/next.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    reactStrictMode: true,
+    reactStrictMode: false,
     output: 'standalone',
     async redirects() {
         return [

packages/ocular-ui/pages/dashboard/marketplace/[slug].tsx

@@ -119,7 +119,7 @@ function Integration() {
       console.log("REACHED HERE",links);
       return <div>Loading...</div>; 
     }
-    // return <CardWithForm/>
+
     return <WebConnector links={links}/>
   }
 

packages/ocular-ui/pages/dashboard/search/results/index.tsx

@@ -22,59 +22,66 @@ export default function Search() {
   const { selectedResultSources, resultFilterDate, setResultSources, resultSources } = useContext(ApplicationContext)
 
   // Serialize the date to JSON format when logging
-const selectedDate = useMemo(() => {
-  return resultFilterDate ? {
-    "from": resultFilterDate.from?.toISOString(),
-    "to": resultFilterDate.to?.toISOString()
-  } : {
-    "from": null,
-    "to": null
-  };
-}, [resultFilterDate]);
+  const selectedDate = useMemo(() => {
+    return resultFilterDate ? {
+      "from": resultFilterDate.from?.toISOString(),
+      "to": resultFilterDate.to?.toISOString()
+    } : {
+      "from": null,
+      "to": null
+    };
+  }, [resultFilterDate]);
+
+  const query = router.query.q;
 
   useEffect(() => {
-    setIsLoadingResults(true); 
-    setIsLoadingCopilot(true);
-    // Search
-    api.search.search(router.query.q, selectedResultSources, selectedDate)
-      .then(data => { 
-        setSearchResults(data.data.hits); 
-        setResultSources(data.data.sources); 
-        setIsLoadingResults(false); 
-      })
-      .catch(error => {
-        setIsLoadingResults(false);
-      });
-    // Copilot
-    const stream = true;
-    api.search.ask(router.query.q, selectedResultSources, selectedDate, stream)
-    .then(async response => {
-      setIsLoadingCopilot(false);
-      if(stream){
-        const reader = createReader(response.body);
-        const chunks = readStream(reader);
-        for await (const chunk of chunks) {
-          setAiResults(chunk.chat_completion.content);
-          setai_citations(chunk.chat_completion.citations);
-        }
-      } else {
-        setAiResults(response.data.chat_completion.content);
-        setai_citations(response.data.chat_completion.citations);
-        setIsLoadingCopilot(false);
-      }
-    })
-    .catch(error => {
-      console.error(error);
-      setIsLoadingCopilot(false);
-    });
-  }, [router.query.q, selectedResultSources, setResultSources, selectedDate]); 
+    if (query && selectedResultSources && selectedDate) {
+      setIsLoadingResults(true);
+      setIsLoadingCopilot(true);
+
+      // Search
+      api.search.search(query, selectedResultSources, selectedDate)
+        .then(data => {
+          setSearchResults(data.data.hits);
+          setResultSources(data.data.sources);
+          setIsLoadingResults(false);
+        })
+        .catch(error => {
+          setIsLoadingResults(false);
+        });
+
+      // Copilot
+      const stream = true;
+      api.search.ask(query, selectedResultSources, selectedDate, stream)
+        .then(async response => {
+          setIsLoadingCopilot(false);
+
+          if (stream) {
+            const reader = createReader(response.body);
+            const chunks = readStream(reader);
+            for await (const chunk of chunks) {
+              setAiResults(chunk.chat_completion.content);
+              setai_citations(chunk.chat_completion.citations);
+            }
+          } else {
+            setAiResults(response.data.chat_completion.content);
+            setai_citations(response.data.chat_completion.citations);
+            setIsLoadingCopilot(false);
+          }
+        })
+        .catch(error => {
+          console.error(error);
+          setIsLoadingCopilot(false);
+        });
+    }
+  }, [query, selectedResultSources, selectedDate]);
 
   return (
     <div className="dark:bg-background w-full bg-white text-black ">
-      <Head>
-        <title>{router.query.q} - Ocular</title>
+      {/* <Head>
+        <title>{query} - Ocular</title>
         <link rel="icon" href="/Ocular-Profile-Logo.png" />
-      </Head>
+      </Head> */}
       <Header />
       <SearchResults search_results={search_results} ai_content={ai_content} ai_citations={ai_citations} isLoadingResults={isLoadingResults} isLoadingCopilot={isLoadingCopilot} resultSources={resultSources} />
     </div>

packages/ocular-ui/services/api.js

@@ -114,11 +114,9 @@ export default {
       const body = {
         context: {
           top: 20,
-          // date: date,
         },
         q: q
       };
-      console.log('Date here', date);
       if (date.from || date.to) {
         body.context.date = date;
       }