Spaces:
No application file
No application file
File size: 5,150 Bytes
a85c9b8 |
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 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 |
import { useState } from "react";
import PlusIcon from "../../public/icons/plus.svg";
import CrossIcon from "../../public/icons/cross.svg";
import YoutubeIcon from "../../public/icons/youtube.svg";
import PDFIcon from "../../public/icons/pdf.svg";
import WebIcon from "../../public/icons/web.svg";
import DocIcon from "../../public/icons/doc.svg";
import SitemapIcon from "../../public/icons/sitemap.svg";
import TextIcon from "../../public/icons/text.svg";
export default function SetSources({
setChats,
embedding_model,
setSelectChat,
}) {
const [sourceName, setSourceName] = useState("");
const [sourceValue, setSourceValue] = useState("");
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const dataTypes = {
youtube_video: "YouTube Video",
pdf_file: "PDF File",
web_page: "Web Page",
doc_file: "Doc File",
sitemap: "Sitemap",
text: "Text",
};
const dataIcons = {
youtube_video: <YoutubeIcon className="w-5 h-5 mr-3" />,
pdf_file: <PDFIcon className="w-5 h-5 mr-3" />,
web_page: <WebIcon className="w-5 h-5 mr-3" />,
doc_file: <DocIcon className="w-5 h-5 mr-3" />,
sitemap: <SitemapIcon className="w-5 h-5 mr-3" />,
text: <TextIcon className="w-5 h-5 mr-3" />,
};
const handleDropdownClose = () => {
setIsDropdownOpen(false);
setSourceName("");
setSelectChat(true);
};
const handleDropdownSelect = (dataType) => {
setSourceName(dataType);
setSourceValue("");
setIsDropdownOpen(false);
setSelectChat(false);
};
const handleAddDataSource = async (e) => {
e.preventDefault();
setIsLoading(true);
const addDataSourceEntry = {
sender: "B",
message: `Adding the following ${dataTypes[sourceName]}: ${sourceValue}`,
};
setChats((prevChats) => [...prevChats, addDataSourceEntry]);
let name = sourceName;
let value = sourceValue;
setSourceValue("");
const response = await fetch("/api/add_sources", {
method: "POST",
body: JSON.stringify({
embedding_model,
name,
value,
}),
headers: {
"Content-Type": "application/json",
},
});
if (response.ok) {
const successEntry = {
sender: "B",
message: `Successfully added ${dataTypes[sourceName]}!`,
};
setChats((prevChats) => [...prevChats, successEntry]);
} else {
const errorEntry = {
sender: "B",
message: `Failed to add ${dataTypes[sourceName]}. Please try again.`,
};
setChats((prevChats) => [...prevChats, errorEntry]);
}
setSourceName("");
setIsLoading(false);
setSelectChat(true);
};
return (
<>
<div className="w-fit">
<button
type="button"
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
className="w-fit p-2.5 rounded-xl text-white bg-black hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300"
>
<PlusIcon className="w-6 h-6" />
</button>
{isDropdownOpen && (
<div className="absolute left-0 bottom-full bg-white border border-gray-300 rounded-lg shadow-lg mb-2">
<ul className="py-1">
<li
className="block px-4 py-2 text-sm text-black cursor-pointer hover:bg-gray-200"
onClick={handleDropdownClose}
>
<span className="flex items-center text-red-600">
<CrossIcon className="w-5 h-5 mr-3" />
Close
</span>
</li>
{Object.entries(dataTypes).map(([key, value]) => (
<li
key={key}
className="block px-4 py-2 text-sm text-black cursor-pointer hover:bg-gray-200"
onClick={() => handleDropdownSelect(key)}
>
<span className="flex items-center">
{dataIcons[key]}
{value}
</span>
</li>
))}
</ul>
</div>
)}
</div>
{sourceName && (
<form
onSubmit={handleAddDataSource}
className="w-full flex flex-col sm:flex-row gap-y-2 gap-x-2 items-center"
>
<div className="w-full">
<input
type="text"
placeholder="Enter URL, Data or File path here..."
className="text-sm w-full border-2 border-black rounded-xl focus:outline-none focus:border-blue-800 sm:pl-4 h-11"
required
value={sourceValue}
onChange={(e) => setSourceValue(e.target.value)}
/>
</div>
<div className="w-full sm:w-fit">
<button
type="submit"
disabled={isLoading}
className={`${
isLoading ? "opacity-60" : ""
} w-full bg-black hover:bg-blue-800 rounded-xl text-lg text-white px-6 h-11`}
>
Send
</button>
</div>
</form>
)}
</>
);
}
|