From 457ab9dbdac1f0151a1272dc55efb8249aa92ce5 Mon Sep 17 00:00:00 2001
From: Dhravya <dhravyashah@gmail.com>
Date: Wed, 10 Apr 2024 00:26:22 -0700
Subject: [PATCH] filter spaces support

---
 apps/web/src/components/Main.tsx              | 29 ++++++++---
 .../src/components/Sidebar/FilterCombobox.tsx | 51 ++++++++++---------
 2 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx
index 4e0392c9..62db6afe 100644
--- a/apps/web/src/components/Main.tsx
+++ b/apps/web/src/components/Main.tsx
@@ -10,6 +10,7 @@ import { cn, countLines } from '@/lib/utils';
 import { ChatHistory } from '../../types/memory';
 import { ChatAnswer, ChatMessage, ChatQuestion } from './ChatMessage';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { useMemory } from '@/contexts/MemoryContext';
 
 function supportsDVH() {
   try {
@@ -29,6 +30,8 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
   const { width } = useViewport();
   const [isAiLoading, setIsAiLoading] = useState(false);
 
+  const { spaces } = useMemory();
+
   // Variable to keep track of the chat history in this session
   const [chatHistory, setChatHistory] = useState<ChatHistory[]>([]);
 
@@ -37,7 +40,7 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
   const textArea = useRef<HTMLDivElement>(null);
   const main = useRef<HTMLDivElement>(null);
 
-  const [selectedSpaces, setSelectedSpaces] = useState<string[]>([]);
+  const [selectedSpaces, setSelectedSpaces] = useState<number[]>([]);
 
   useEffect(() => {
     const search = searchParams.get('q');
@@ -199,12 +202,19 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
       ];
     });
 
-    const response = await fetch(`/api/chat?q=${_value}&spaces=${selectedSpaces.join(",")}`, {
-      method: 'POST',
-      body: JSON.stringify({
-        chatHistory: modifyChatHistory(chatHistory),
-      }),
-    });
+    const actualSelectedSpaces = selectedSpaces.map(
+      (space) => spaces.find((s) => s.id === space)?.title ?? '',
+    );
+
+    const response = await fetch(
+      `/api/chat?q=${_value}&spaces=${actualSelectedSpaces.join(',')}`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          chatHistory: modifyChatHistory(chatHistory),
+        }),
+      },
+    );
 
     if (response.status !== 200) {
       setIsAiLoading(false);
@@ -294,6 +304,8 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
                     textArea.current?.querySelector('textarea')?.focus();
                   }}
                   className="hidden md:flex"
+                  selectedSpaces={selectedSpaces}
+                  setSelectedSpaces={setSelectedSpaces}
                 />
                 <button
                   onClick={onSend}
@@ -369,6 +381,9 @@ export function Chat({
             side="top"
             align="start"
             className="bg-[#252525]"
+            // TODO: SPACES FILTER HERE
+            selectedSpaces={[]}
+            setSelectedSpaces={(spaces) => {}}
           />
           <Textarea2
             ref={textArea}
diff --git a/apps/web/src/components/Sidebar/FilterCombobox.tsx b/apps/web/src/components/Sidebar/FilterCombobox.tsx
index 6f91c686..76b66db9 100644
--- a/apps/web/src/components/Sidebar/FilterCombobox.tsx
+++ b/apps/web/src/components/Sidebar/FilterCombobox.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
 
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
 import {
   Command,
   CommandEmpty,
@@ -12,38 +12,41 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@/components/ui/command";
+} from '@/components/ui/command';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover";
-import { SpaceIcon } from "@/assets/Memories";
-import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
-import { useMemory } from "@/contexts/MemoryContext";
+} from '@/components/ui/popover';
+import { SpaceIcon } from '@/assets/Memories';
+import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
+import { useMemory } from '@/contexts/MemoryContext';
 
 export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  side?: "top" | "bottom";
-  align?: "end" | "start" | "center";
+  side?: 'top' | 'bottom';
+  align?: 'end' | 'start' | 'center';
   onClose?: () => void;
+  selectedSpaces: number[];
+  setSelectedSpaces: (spaces: number[] | ((prev: number[]) => number[])) => void;
 }
 
 export function FilterCombobox({
   className,
-  side = "bottom",
-  align = "center",
+  side = 'bottom',
+  align = 'center',
   onClose,
+  selectedSpaces,
+  setSelectedSpaces,
   ...props
 }: Props) {
   const { spaces, addSpace } = useMemory();
 
   const [open, setOpen] = React.useState(false);
-  const [values, setValues] = React.useState<number[]>([]);
 
   const sortedSpaces = spaces.sort(({ id: a }, { id: b }) =>
-    values.includes(a) && !values.includes(b)
+    selectedSpaces.includes(a) && !selectedSpaces.includes(b)
       ? -1
-      : values.includes(b) && !values.includes(a)
+      : selectedSpaces.includes(b) && !selectedSpaces.includes(a)
         ? 1
         : 0,
   );
@@ -62,7 +65,7 @@ export function FilterCombobox({
             <button
               data-state-on={open}
               className={cn(
-                "text-rgray-11/70 on:bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-3 relative flex items-center justify-center gap-1 rounded-md px-3 py-1.5 ring-2 ring-transparent focus-visible:outline-none",
+                'text-rgray-11/70 on:bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-3 relative flex items-center justify-center gap-1 rounded-md px-3 py-1.5 ring-2 ring-transparent focus-visible:outline-none',
                 className,
               )}
               {...props}
@@ -71,10 +74,10 @@ export function FilterCombobox({
               Filter
               <ChevronsUpDown className="h-4 w-4" />
               <div
-                data-state-on={values.length > 0}
+                data-state-on={selectedSpaces.length > 0}
                 className="on:flex text-rgray-11 border-rgray-6 bg-rgray-2 absolute left-0 top-0 hidden aspect-[1] h-4 w-4 -translate-x-1/3 -translate-y-1/3 items-center justify-center rounded-full border text-center text-[9px]"
               >
-                {values.length}
+                {selectedSpaces.length}
               </div>
             </button>
           </PopoverTrigger>
@@ -104,7 +107,7 @@ export function FilterCombobox({
                         key={space.id}
                         value={space.id.toString()}
                         onSelect={(val) => {
-                          setValues((prev) =>
+                          setSelectedSpaces((prev: number[]) =>
                             prev.includes(parseInt(val))
                               ? prev.filter((v) => v !== parseInt(val))
                               : [...prev, parseInt(val)],
@@ -122,11 +125,11 @@ export function FilterCombobox({
                         >
                           <SpaceIcon className="mr-2 h-4 w-4" />
                           {space.title}
-                          {values.includes(space.id)}
+                          {selectedSpaces.includes(space.id)}
                           <Check
-                            data-state-on={values.includes(space.id)}
+                            data-state-on={selectedSpaces.includes(space.id)}
                             className={cn(
-                              "on:opacity-100 ml-auto h-4 w-4 opacity-0",
+                              'on:opacity-100 ml-auto h-4 w-4 opacity-0',
                             )}
                           />
                         </motion.div>