vrr/supermemory
2
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-05-03 06:00:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

new filter

Browse source
This commit is contained in:
Dhravya 2024-06-29 00:11:28 -05:00
parent 2e6d9d5385
commit dfcc1ea7f7
17 changed files with 400 additions and 596 deletions
Download patch file Download diff file Expand all files Collapse all files

53
apps/web/app/(dash)/home/queryinput.tsx
View file

@ -4,9 +4,10 @@ import { ArrowRightIcon } from "@repo/ui/icons";
import Image from "next/image";
import React, { useEffect, useMemo, useState } from "react";
import Divider from "@repo/ui/shadcn/divider";
import { MultipleSelector, Option } from "@repo/ui/shadcn/combobox";
import { useRouter } from "next/navigation";
import { getSpaces } from "@/app/actions/fetchers";
import Combobox from "@repo/ui/shadcn/combobox";
import { MinusIcon } from "lucide-react";
function QueryInput({
initialQuery = "",
@ -53,9 +54,9 @@ function QueryInput({
);
return (
<div className={className}>
<div className={`${className}`}>
<div
className={`bg-secondary ${!mini ? "rounded-t-3xl" : "rounded-3xl"}`}
className={`bg-secondary border-2 border-b-0 border-border ${!mini ? "rounded-t-3xl" : "rounded-3xl"}`}
>
{/* input and action button */}
<form
@ -69,7 +70,7 @@ function QueryInput({
name="q"
cols={30}
rows={mini ? 2 : 4}
className="bg-transparent pt-2.5 text-base placeholder:text-[#5D6165] text-[#9DA0A4] focus:text-gray-200 duration-200 tracking-[3%] outline-none resize-none w-full p-4"
className="bg-transparent pt-2.5 text-base placeholder:text-[#9B9B9B] focus:text-gray-200 duration-200 tracking-[3%] outline-none resize-none w-full p-4"
placeholder="Ask your second brain..."
onKeyDown={(e) => {
if (e.key === "Enter") {
@ -90,7 +91,7 @@ function QueryInput({
handleSubmit(q, preparedSpaces);
}}
disabled={disabled}
className="h-12 w-12 rounded-[14px] bg-[#21303D] all-center shrink-0 hover:brightness-125 duration-200 outline-none focus:outline focus:outline-primary active:scale-90"
className="h-12 w-12 rounded-[14px] bg-border all-center shrink-0 hover:brightness-125 duration-200 outline-none focus:outline focus:outline-primary active:scale-90"
>
<Image src={ArrowRightIcon} alt="Right arrow icon" />
</button>
@ -100,21 +101,37 @@ function QueryInput({
{!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 className="flex justify-between items-center gap-6 h-auto bg-secondary rounded-b-3xl border-2 border-border">
<Combobox
options={options}
onSelect={(v) =>
setSelectedSpaces((prev) => {
if (v === "") {
return [];
}
return [...prev, parseInt(v)];
})
}
onSubmit={() => {}}
placeholder="Filter spaces..."
/>
<div className="flex flex-row gap-0.5 h-full">
{preparedSpaces.map((x, idx) => (
<button
key={x.id}
onClick={() =>
setSelectedSpaces((prev) => prev.filter((y) => y !== x.id))
}
className={`relative group p-2 py-3 bg-[#3C464D] max-w-32 ${idx === preparedSpaces.length - 1 ? "rounded-br-xl" : ""}`}
>
<p className="line-clamp-1">{x.name}</p>
<div className="absolute h-full right-0 top-0 p-1 opacity-0 group-hover:opacity-100 items-center">
<MinusIcon className="w-6 h-6 rounded-full bg-secondary" />
</div>
</button>
))}
</div>
</div>
</>
)}