my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

#1	import { useState } from "react";
#2	import PlusIcon from "../../public/icons/plus.svg";
#3	import CrossIcon from "../../public/icons/cross.svg";
#4	import YoutubeIcon from "../../public/icons/youtube.svg";
#5	import PDFIcon from "../../public/icons/pdf.svg";
#6	import WebIcon from "../../public/icons/web.svg";
#7	import DocIcon from "../../public/icons/doc.svg";
#8	import SitemapIcon from "../../public/icons/sitemap.svg";
#9	import TextIcon from "../../public/icons/text.svg";
#10
#11	export default function SetSources({
#12	setChats,
#13	embedding_model,
#14	setSelectChat,
#15	}) {
#16	const [sourceName, setSourceName] = useState("");
#17	const [sourceValue, setSourceValue] = useState("");
#18	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
#19	const [isLoading, setIsLoading] = useState(false);
#20
#21	const dataTypes = {
#22	youtube_video: "YouTube Video",
#23	pdf_file: "PDF File",
#24	web_page: "Web Page",
#25	doc_file: "Doc File",
#26	sitemap: "Sitemap",
#27	text: "Text",
#28	};
#29
#30	const dataIcons = {
#31	youtube_video: <YoutubeIcon className="w-5 h-5 mr-3" />,
#32	pdf_file: <PDFIcon className="w-5 h-5 mr-3" />,
#33	web_page: <WebIcon className="w-5 h-5 mr-3" />,
#34	doc_file: <DocIcon className="w-5 h-5 mr-3" />,
#35	sitemap: <SitemapIcon className="w-5 h-5 mr-3" />,
#36	text: <TextIcon className="w-5 h-5 mr-3" />,
#37	};
#38
#39	const handleDropdownClose = () => {
#40	setIsDropdownOpen(false);
#41	setSourceName("");
#42	setSelectChat(true);
#43	};
#44	const handleDropdownSelect = (dataType) => {
#45	setSourceName(dataType);
#46	setSourceValue("");
#47	setIsDropdownOpen(false);
#48	setSelectChat(false);
#49	};
#50
#51	const handleAddDataSource = async (e) => {
#52	e.preventDefault();
#53	setIsLoading(true);
#54
#55	const addDataSourceEntry = {
#56	sender: "B",
#57	message: `Adding the following ${dataTypes[sourceName]}: ${sourceValue}`,
#58	};
#59	setChats((prevChats) => [...prevChats, addDataSourceEntry]);
#60	let name = sourceName;
#61	let value = sourceValue;
#62	setSourceValue("");
#63	const response = await fetch("/api/add_sources", {
#64	method: "POST",
#65	body: JSON.stringify({
#66	embedding_model,
#67	name,
#68	value,
#69	}),
#70	headers: {
#71	"Content-Type": "application/json",
#72	},
#73	});
#74	if (response.ok) {
#75	const successEntry = {
#76	sender: "B",
#77	message: `Successfully added ${dataTypes[sourceName]}!`,
#78	};
#79	setChats((prevChats) => [...prevChats, successEntry]);
#80	} else {
#81	const errorEntry = {
#82	sender: "B",
#83	message: `Failed to add ${dataTypes[sourceName]}. Please try again.`,
#84	};
#85	setChats((prevChats) => [...prevChats, errorEntry]);
#86	}
#87	setSourceName("");
#88	setIsLoading(false);
#89	setSelectChat(true);
#90	};
#91
#92	return (
#93	<>
#94	<div className="w-fit">
#95	<button
#96	type="button"
#97	onClick={() => setIsDropdownOpen(!isDropdownOpen)}
#98	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"
#99	>
#100	<PlusIcon className="w-6 h-6" />
#101	</button>
#102	{isDropdownOpen && (
#103	<div className="absolute left-0 bottom-full bg-white border border-gray-300 rounded-lg shadow-lg mb-2">
#104	<ul className="py-1">
#105	<li
#106	className="block px-4 py-2 text-sm text-black cursor-pointer hover:bg-gray-200"
#107	onClick={handleDropdownClose}
#108	>
#109	<span className="flex items-center text-red-600">
#110	<CrossIcon className="w-5 h-5 mr-3" />
#111	Close
#112	</span>
#113	</li>
#114	{Object.entries(dataTypes).map(([key, value]) => (
#115	<li
#116	key={key}
#117	className="block px-4 py-2 text-sm text-black cursor-pointer hover:bg-gray-200"
#118	onClick={() => handleDropdownSelect(key)}
#119	>
#120	<span className="flex items-center">
#121	{dataIcons[key]}
#122	{value}
#123	</span>
#124	</li>
#125	))}
#126	</ul>
#127	</div>
#128	)}
#129	</div>
#130	{sourceName && (
#131	<form
#132	onSubmit={handleAddDataSource}
#133	className="w-full flex flex-col sm:flex-row gap-y-2 gap-x-2 items-center"
#134	>
#135	<div className="w-full">
#136	<input
#137	type="text"
#138	placeholder="Enter URL, Data or File path here..."
#139	className="text-sm w-full border-2 border-black rounded-xl focus:outline-none focus:border-blue-800 sm:pl-4 h-11"
#140	required
#141	value={sourceValue}
#142	onChange={(e) => setSourceValue(e.target.value)}
#143	/>
#144	</div>
#145	<div className="w-full sm:w-fit">
#146	<button
#147	type="submit"
#148	disabled={isLoading}
#149	className={`${
#150	isLoading ? "opacity-60" : ""
#151	} w-full bg-black hover:bg-blue-800 rounded-xl text-lg text-white px-6 h-11`}
#152	>
#153	Send
#154	</button>
#155	</div>
#156	</form>
#157	)}
#158	</>
#159	);
#160	}
#161

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public