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

changes in queryinput home layout

Browse source
This commit is contained in:
Dhravya Shah 2024-07-20 20:49:33 -05:00
parent 3bc6fc017a
commit 4c96fa349c
11 changed files with 762 additions and 539 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,83 +1,50 @@
"use client";
import React, { useState } from "react";
import { FilterSpaces } from "./filterSpaces";
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 { useRouter } from "next/navigation";
import { getSpaces } from "@/app/actions/fetchers";
import Combobox from "@repo/ui/shadcn/combobox";
import { MinusIcon } from "lucide-react";
import { toast } from "sonner";
import { createSpace } from "@/app/actions/doers";
function QueryInput({
initialQuery = "",
initialSpaces = [],
disabled = false,
className,
mini = false,
setQueryPresent,
initialSpaces,
handleSubmit,
setInitialSpaces,
}: {
initialQuery?: string;
setQueryPresent: (t: boolean) => void;
initialSpaces?: {
id: number;
name: string;
}[];
disabled?: boolean;
className?: string;
mini?: boolean;
handleSubmit: (q: string, spaces: { id: number; name: string }[]) => void;
setInitialSpaces?: React.Dispatch<
React.SetStateAction<{ id: number; name: string }[]>
>;
}) {
const [q, setQ] = useState(initialQuery);
const [q, setQ] = useState("");
const [selectedSpaces, setSelectedSpaces] = useState<number[]>([]);
const options = useMemo(
() =>
initialSpaces.map((x) => ({
label: x.name,
value: x.id.toString(),
})),
[initialSpaces],
);
const preparedSpaces = useMemo(
() =>
initialSpaces
.filter((x) => selectedSpaces.includes(x.id))
.map((x) => {
return {
id: x.id,
name: x.name,
};
}),
[selectedSpaces, initialSpaces],
);
const [selectedSpaces, setSelectedSpaces] = useState<
{ id: number; name: string }[]
>([]);
return (
<div className={`${className}`}>
<div className={`w-full`}>
<div
className={`bg-secondary border-2 border-b-0 border-border ${!mini ? "rounded-t-3xl" : "rounded-3xl"}`}
className={`bg-secondary border-2 border-border overflow-hidden shadow-md shadow-[#1d1d1dc7] rounded-3xl`}
>
{/* input and action button */}
<form
action={async () => {
handleSubmit(q, preparedSpaces);
if (q.trim().length === 0) {
return;
}
handleSubmit(q, selectedSpaces);
setQ("");
}}
className="flex gap-4 p-3"
>
<textarea
autoFocus
name="q"
cols={30}
rows={mini ? 2 : 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"
rows={3}
className="bg-transparent text-lg placeholder:text-[#9B9B9B] text-gray-200 tracking-[3%] outline-none resize-none w-full p-7"
placeholder="Ask your second brain..."
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
@ -85,95 +52,30 @@ function QueryInput({
if (q.trim().length === 0) {
return;
}
handleSubmit(q, preparedSpaces);
handleSubmit(q, selectedSpaces);
setQ("");
}
}}
onChange={(e) => setQ(e.target.value)}
onChange={(e) =>
setQ((prev) => {
setQueryPresent(!!e.target.value.length);
return e.target.value;
})
}
value={q}
disabled={disabled}
/>
<button
type="submit"
onClick={(e) => {
e.preventDefault();
if (q.trim().length === 0) {
return;
}
handleSubmit(q, preparedSpaces);
}}
disabled={disabled}
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>
<div className="flex p-2 px-3 w-full items-center justify-between rounded-xl overflow-hidden">
<FilterSpaces
selectedSpaces={selectedSpaces}
setSelectedSpaces={setSelectedSpaces}
initialSpaces={initialSpaces || []}
/>
<button type="submit" className="rounded-lg bg-[#369DFD1A] p-3">
<Image src={ArrowRightIcon} alt="Enter" />
</button>
</div>
</form>
</div>
{/* selected sources */}
{!mini && (
<>
<Divider />
<div className="flex justify-between items-center gap-6 h-auto bg-secondary rounded-b-3xl border-2 border-border">
<Combobox
options={options}
className="rounded-bl-3xl bg-[#3C464D] w-44"
onSelect={(v) =>
setSelectedSpaces((prev) => {
if (v === "") {
return [];
}
return [...prev, parseInt(v)];
})
}
onSubmit={async (spaceName) => {
const space = options.find((x) => x.label === spaceName);
toast.info("Creating space...");
if (space) {
toast.error("A space with that name already exists.");
}
const creationTask = await createSpace(spaceName);
if (creationTask.success && creationTask.data) {
toast.success("Space created " + creationTask.data);
setInitialSpaces?.((prev) => [
...prev,
{
name: spaceName,
id: creationTask.data!,
},
]);
setSelectedSpaces((prev) => [...prev, creationTask.data!]);
} else {
toast.error(
"Space creation failed: " + creationTask.error ??
"Unknown error",
);
}
}}
placeholder="Chat with a space..."
/>
<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>
</>
)}
</div>
);
}