Merge branch 'codetorso' into kartik

apps/web/app/(dash)/home/queryinput.tsx

@@ -12,6 +12,9 @@ function QueryInput({
   initialQuery = "",
   initialSpaces = [],
   disabled = false,
+  className,
+  mini = false,
+  handleSubmit,
 }: {
   initialQuery?: string;
   initialSpaces?: {
@@ -19,32 +22,14 @@ function QueryInput({
     name: string;
   }[];
   disabled?: boolean;
+  className?: string;
+  mini?: boolean;
+  handleSubmit: (q: string, spaces: { id: number; name: string }[]) => void;
 }) {
   const [q, setQ] = useState(initialQuery);
 
   const [selectedSpaces, setSelectedSpaces] = useState<number[]>([]);
 
-  const { push } = useRouter();
-
-  const parseQ = () => {
-    // preparedSpaces is list of spaces selected by user, with id and name
-    const preparedSpaces = initialSpaces
-      .filter((x) => selectedSpaces.includes(x.id))
-      .map((x) => {
-        return {
-          id: x.id,
-          name: x.name,
-        };
-      });
-
-    const newQ =
-      "/chat?q=" +
-      encodeURI(q) +
-      (selectedSpaces ? "&spaces=" + JSON.stringify(preparedSpaces) : "");
-
-    return newQ;
-  };
-
   const options = useMemo(
     () =>
       initialSpaces.map((x) => ({
@@ -54,21 +39,43 @@ function QueryInput({
     [initialSpaces],
   );
 
+  const preparedSpaces = useMemo(
+    () =>
+      initialSpaces
+        .filter((x) => selectedSpaces.includes(x.id))
+        .map((x) => {
+          return {
+            id: x.id,
+            name: x.name,
+          };
+        }),
+    [selectedSpaces, initialSpaces],
+  );
+
   return (
-    <div>
-      <div className="bg-secondary rounded-t-[24px]">
+    <div className={className}>
+      <div
+        className={`bg-secondary ${!mini ? "rounded-t-3xl" : "rounded-3xl"}`}
+      >
         {/* input and action button */}
-        <form action={async () => push(parseQ())} className="flex gap-4 p-3">
+        <form
+          action={async () => {
+            handleSubmit(q, preparedSpaces);
+            setQ("");
+          }}
+          className="flex gap-4 p-3"
+        >
           <textarea
             name="q"
             cols={30}
-            rows={4}
+            rows={mini ? 2 : 4}
             className="bg-transparent pt-2.5 text-base placeholder:text-[#5D6165] text-[#9DA0A4] focus:text-white duration-200 tracking-[3%] outline-none resize-none w-full p-4"
             placeholder="Ask your second brain..."
             onKeyDown={(e) => {
               if (e.key === "Enter") {
                 e.preventDefault();
-                if (!e.shiftKey) push(parseQ());
+                handleSubmit(q, preparedSpaces);
+                setQ("");
               }
             }}
             onChange={(e) => setQ(e.target.value)}
@@ -85,24 +92,29 @@ function QueryInput({
             <Image src={ArrowRightIcon} alt="Right arrow icon" />
           </button>
         </form>
-
-        <Divider />
       </div>
       {/* selected sources */}
-      <div className="flex items-center gap-6 p-2 h-auto bg-secondary rounded-b-[24px]">
-        <MultipleSelector
-          key={options.length}
-          disabled={disabled}
-          defaultOptions={options}
-          onChange={(e) => setSelectedSpaces(e.map((x) => parseInt(x.value)))}
-          placeholder="Focus on specific spaces..."
-          emptyIndicator={
-            <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
-              no results found.
-            </p>
-          }
-        />
-      </div>
+      {!mini && (
+        <>
+          <Divider />
+          <div className="flex items-center gap-6 p-2 h-auto bg-secondary rounded-b-3xl">
+            <MultipleSelector
+              key={options.length}
+              disabled={disabled}
+              defaultOptions={options}
+              onChange={(e) =>
+                setSelectedSpaces(e.map((x) => parseInt(x.value)))
+              }
+              placeholder="Focus on specific spaces..."
+              emptyIndicator={
+                <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
+                  no results found.
+                </p>
+              }
+            />
+          </div>
+        </>
+      )}
     </div>
   );
 }