mirror of
https://github.com/danswer-ai/danswer.git
synced 2025-09-19 20:24:32 +02:00
Unstructured UI (#2636)
* checkpoint * k * k * need frontend * add api key check + ui component * add proper ports + icons + functions * k * k * k --------- Co-authored-by: pablodanswer <pablo@danswer.ai>
This commit is contained in:
Yuhong Sun
GitHub
138
web/src/app/admin/configuration/document_processing/page.tsx
Normal file
138
web/src/app/admin/configuration/document_processing/page.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button, Card } from "@tremor/react";
|
||||
import { DocumentIcon2 } from "@/components/icons/icons";
|
||||
import useSWR from "swr";
|
||||
import { ThreeDotsLoader } from "@/components/Loading";
|
||||
import { AdminPageTitle } from "@/components/admin/Title";
|
||||
import { Lock } from "@phosphor-icons/react";
|
||||
|
||||
function Main() {
|
||||
const {
|
||||
data: isApiKeySet,
|
||||
error,
|
||||
mutate,
|
||||
isLoading,
|
||||
} = useSWR<{
|
||||
unstructured_api_key: string | null;
|
||||
}>("/api/search-settings/unstructured-api-key-set", (url: string) =>
|
||||
fetch(url).then((res) => res.json())
|
||||
);
|
||||
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await fetch(
|
||||
`/api/search-settings/upsert-unstructured-api-key?unstructured_api_key=${apiKey}`,
|
||||
{
|
||||
method: "PUT",
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to save API key:", error);
|
||||
}
|
||||
mutate();
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
await fetch("/api/search-settings/delete-unstructured-api-key", {
|
||||
method: "DELETE",
|
||||
});
|
||||
setApiKey("");
|
||||
} catch (error) {
|
||||
console.error("Failed to delete API key:", error);
|
||||
}
|
||||
mutate();
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <ThreeDotsLoader />;
|
||||
}
|
||||
return (
|
||||
<div className="container mx-auto p-4">
|
||||
<Card className="mb-8 max-w-2xl bg-white text-text shadow-lg rounded-lg">
|
||||
<h3 className="text-2xl text-text-800 font-bold mb-4 text-text border-b border-b-border pb-2">
|
||||
Unstructured API Integration
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<p className="text-text-600">
|
||||
Unstructured effortlessly extracts and transforms complex data from
|
||||
difficult-to-use formats like HTML, PDF, CSV, PNG, PPTX, and more.
|
||||
Enter an API key to enable this powerful document processing. If not
|
||||
set, standard document processing will be used.
|
||||
</p>
|
||||
<p className="text-text-600">
|
||||
Learn more about Unstructured{" "}
|
||||
<a
|
||||
href="https://unstructured.io/docs"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-500 hover:underline font-medium"
|
||||
>
|
||||
here
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<div className="mt-4">
|
||||
{isApiKeySet ? (
|
||||
<div className="w-full p-3 border rounded-md bg-background text-text flex items-center">
|
||||
<span className="flex-grow">••••••••••••••••</span>
|
||||
<Lock className="h-5 w-5 text-gray-400" />
|
||||
</div>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter API Key"
|
||||
value={apiKey}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
className="w-full p-3 border rounded-md bg-background text-text focus:ring-2 focus:ring-blue-500 transition duration-200"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex space-x-4 mt-6">
|
||||
{isApiKeySet ? (
|
||||
<>
|
||||
<Button
|
||||
color="red"
|
||||
onClick={handleDelete}
|
||||
variant="secondary"
|
||||
className="bg-red-100 text-red-600 hover:bg-red-400 transition duration-200"
|
||||
>
|
||||
Delete API Key
|
||||
</Button>
|
||||
<p className="text-text-600 my-auto">
|
||||
Delete the current API key before updating.
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
className="bg-blue-500 text-white hover:bg-blue-600 transition duration-200"
|
||||
>
|
||||
Save API Key
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<div className="mx-auto container">
|
||||
<AdminPageTitle
|
||||
title="Document Processing"
|
||||
icon={<DocumentIcon2 size={32} className="my-auto" />}
|
||||
/>
|
||||
<Main />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -21,6 +21,7 @@ import {
|
||||
AssistantsIconSkeleton,
|
||||
ClosedBookIcon,
|
||||
SearchIcon,
|
||||
DocumentIcon2,
|
||||
} from "@/components/icons/icons";
|
||||
import { UserRole } from "@/lib/types";
|
||||
import { FiActivity, FiBarChart2 } from "react-icons/fi";
|
||||
@@ -29,7 +30,6 @@ import { User } from "@/lib/types";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { SettingsContext } from "../settings/SettingsProvider";
|
||||
import { useContext } from "react";
|
||||
import { CustomTooltip } from "../tooltip/CustomTooltip";
|
||||
|
||||
export function ClientLayout({
|
||||
user,
|
||||
@@ -246,6 +246,15 @@ export function ClientLayout({
|
||||
),
|
||||
link: "/admin/configuration/search",
|
||||
},
|
||||
{
|
||||
name: (
|
||||
<div className="flex">
|
||||
<DocumentIcon2 className="text-icon-settings-sidebar" />
|
||||
<div className="ml-1">Document Processing</div>
|
||||
</div>
|
||||
),
|
||||
link: "/admin/configuration/document-processing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -2791,6 +2791,31 @@ export const MacIcon = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const DocumentIcon2 = ({
|
||||
size = 16,
|
||||
className = defaultTailwindCSS,
|
||||
}: IconProps) => {
|
||||
return (
|
||||
<svg
|
||||
style={{ width: `${size}px`, height: `${size}px` }}
|
||||
className={`w-[${size}px] h-[${size}px] ` + className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="200"
|
||||
height="200"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const WindowsIcon = ({
|
||||
size = 16,
|
||||
className = "my-auto flex flex-shrink-0 ",
|
||||
|
||||
Reference in New Issue
Block a user