1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
"use client";
import React, { useEffect, useState } from "react";
import { FilterSpaces } from "./filterSpaces";
import { ArrowRightIcon } from "@repo/ui/icons";
import Image from "next/image";
import { Switch } from "@repo/ui/shadcn/switch";
import { Label } from "@repo/ui/shadcn/label";
function QueryInput({
initialSpaces,
handleSubmit,
query,
setQuery,
}: {
initialSpaces?: {
id: number;
name: string;
}[];
mini?: boolean;
handleSubmit: (
q: string,
spaces: { id: number; name: string }[],
proMode: boolean,
) => void;
query: string;
setQuery: (q: string) => void;
}) {
const [proMode, setProMode] = useState(false);
const [selectedSpaces, setSelectedSpaces] = useState<
{ id: number; name: string }[]
>([]);
return (
<div className={`w-full`}>
<div
className={`bg-secondary border-2 border-border overflow-hidden shadow-md shadow-[#1d1d1dc7] rounded-3xl`}
>
{/* input and action button */}
<form
action={async () => {
if (query.trim().length === 0) {
return;
}
handleSubmit(query, selectedSpaces, proMode);
setQuery("");
}}
>
<textarea
autoFocus
name="q"
cols={30}
rows={3}
className={`bg-transparent text-lg placeholder:text-[#9B9B9B] text-gray-200 tracking-[3%] outline-none resize-none w-full py-4 px-4 h-32 transition-[height] ${query.length > 0 && "h-40"}`}
placeholder="Ask your second brain..."
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
if (query.trim().length === 0) {
return;
}
handleSubmit(query, selectedSpaces, proMode);
setQuery("");
}
}}
onChange={(e) => setQuery(e.target.value)}
value={query}
/>
<div className="flex p-2 px-3 w-full items-center justify-between rounded-xl overflow-hidden">
<FilterSpaces
selectedSpaces={selectedSpaces}
setSelectedSpaces={setSelectedSpaces}
initialSpaces={initialSpaces || []}
/>
<div className="flex items-center gap-4">
{/* <div className="flex items-center gap-2 p-2 rounded-lg bg-[#369DFD1A]">
<Label htmlFor="pro-mode" className="text-sm">
Pro mode
</Label>
<Switch
value={proMode ? "on" : "off"}
onCheckedChange={(v) => setProMode(v)}
id="pro-mode"
about="Pro mode"
/>
</div> */}
<button type="submit" className="rounded-lg bg-[#369DFD1A] p-3">
<Image src={ArrowRightIcon} alt="Enter" />
</button>
</div>
</div>
</form>
</div>
</div>
);
}
export default QueryInput;
|