mirror of
https://github.com/MODSetter/SurfSense.git
synced 2025-09-08 05:29:08 +00:00
344 lines
14 KiB
TypeScript
344 lines
14 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import logo from "@/public/SurfSense.png";
|
|
import { FileCheck } from "lucide-react";
|
|
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from "@/components/ui/collapsible";
|
|
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import MarkDownTest from "./markdown";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
type Document = {
|
|
BrowsingSessionId: string;
|
|
VisitedWebPageURL: string;
|
|
VisitedWebPageTitle: string;
|
|
VisitedWebPageDateWithTimeInISOString: string;
|
|
VisitedWebPageReffererURL: string;
|
|
VisitedWebPageVisitDurationInMilliseconds: number;
|
|
VisitedWebPageContent: string;
|
|
};
|
|
|
|
// type Description = {
|
|
// response: string;
|
|
// };
|
|
|
|
// type NormalResponse = {
|
|
// response: string;
|
|
// relateddocs: Document[];
|
|
// };
|
|
|
|
// type ChatMessage = {
|
|
// type: string;
|
|
// userquery: string;
|
|
// message: NormalResponse | string;
|
|
// };
|
|
|
|
function ProtectedPage() {
|
|
// const navigate = useNavigate();
|
|
const router = useRouter();
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
|
|
const [currentChat, setCurrentChat] = useState<any[]>([]);
|
|
|
|
useEffect(() => {
|
|
const verifyToken = async () => {
|
|
const token = window.localStorage.getItem('token');
|
|
// console.log(token)
|
|
try {
|
|
const response = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL!}/verify-token/${token}`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Token verification failed');
|
|
}else{
|
|
const NEO4JURL = localStorage.getItem('neourl');
|
|
const NEO4JUSERNAME = localStorage.getItem('neouser');
|
|
const NEO4JPASSWORD = localStorage.getItem('neopass');
|
|
const OPENAIKEY = localStorage.getItem('openaikey');
|
|
|
|
const check = (NEO4JURL && NEO4JUSERNAME && NEO4JPASSWORD && OPENAIKEY)
|
|
if(!check){
|
|
router.push('/settings');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
window.localStorage.removeItem('token');
|
|
router.push('/login');
|
|
}
|
|
};
|
|
|
|
verifyToken();
|
|
}, [router]);
|
|
|
|
const handleSubmit = async (formData: any) => {
|
|
setLoading(true);
|
|
const query = formData.get("query");
|
|
|
|
if (!query) {
|
|
console.log("Query cant be empty!!");
|
|
return;
|
|
}
|
|
|
|
const requestOptions = {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
query: query,
|
|
neourl: localStorage.getItem('neourl'),
|
|
neouser: localStorage.getItem('neouser'),
|
|
neopass: localStorage.getItem('neopass'),
|
|
openaikey: localStorage.getItem('openaikey'),
|
|
apisecretkey: process.env.NEXT_PUBLIC_API_SECRET_KEY
|
|
}),
|
|
};
|
|
|
|
fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL!}/`, requestOptions)
|
|
.then(res=>res.json())
|
|
.then(data=> {
|
|
let cur = currentChat;
|
|
cur.push({
|
|
type: "normal",
|
|
userquery: query,
|
|
message: data,
|
|
});
|
|
|
|
|
|
setCurrentChat([...cur]);
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
const getDocDescription = async (document: Document) => {
|
|
setLoading(true);
|
|
const requestOptions = {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
query: JSON.stringify(document),
|
|
neourl: localStorage.getItem('neourl'),
|
|
neouser: localStorage.getItem('neouser'),
|
|
neopass: localStorage.getItem('neopass'),
|
|
openaikey: localStorage.getItem('openaikey'),
|
|
apisecretkey: process.env.NEXT_PUBLIC_API_SECRET_KEY
|
|
}),
|
|
};
|
|
|
|
const response = await fetch(
|
|
`${process.env.NEXT_PUBLIC_BACKEND_URL!}/kb/doc`,
|
|
requestOptions
|
|
);
|
|
const res = await response.json();
|
|
|
|
let cur = currentChat;
|
|
cur.push({
|
|
type: "description",
|
|
doctitle: document.VisitedWebPageTitle,
|
|
message: res.response,
|
|
});
|
|
|
|
setLoading(false);
|
|
setCurrentChat([...cur]);
|
|
// console.log(document);
|
|
};
|
|
|
|
if (currentChat) {
|
|
return (
|
|
<>
|
|
<div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden mt-16">
|
|
<div className="group w-full overflow-auto pl-0 peer-[[data-state=open]]:lg:pl-[250px] peer-[[data-state=open]]:xl:pl-[300px]">
|
|
<div className="pb-[200px] pt-4 md:pt-10">
|
|
<div className="mx-auto max-w-4xl px-4 flex flex-col gap-3">
|
|
<div className="bg-background flex flex-col gap-2 rounded-lg border p-8">
|
|
<h1 className="text-sm font-semibold">
|
|
Welcome to SurfSense
|
|
</h1>
|
|
<p className="text-muted-foreground leading-normal">
|
|
🧠 Ask Your Knowledge Graph Brain 🧠
|
|
</p>
|
|
</div>
|
|
{currentChat.map((chat, index) => {
|
|
// console.log("chat", chat);
|
|
if (chat.type === "normal") {
|
|
return (
|
|
<div
|
|
className="bg-background flex flex-col gap-2 rounded-lg border p-8"
|
|
key={index}
|
|
>
|
|
<p className="text-3xl font-semibold">
|
|
{chat.userquery}
|
|
</p>
|
|
<p className="font-sm font-semibold">
|
|
SurfSense Response:
|
|
</p>
|
|
<MarkDownTest source={chat.message.response} />
|
|
<p className="font-sm font-semibold">
|
|
Related Browsing Sessions
|
|
</p>
|
|
|
|
{
|
|
//@ts-ignore
|
|
chat.message.relateddocs.map((doc) => {
|
|
return (
|
|
<Collapsible className="border rounded-lg p-3">
|
|
<CollapsibleTrigger className="flex justify-between gap-2 mb-2">
|
|
<FileCheck />
|
|
{doc.VisitedWebPageTitle}
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent className="flex flex-col gap-4">
|
|
<Table>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell className="font-medium">
|
|
Browsing Session Id
|
|
</TableCell>
|
|
<TableCell>
|
|
{doc.BrowsingSessionId}
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">
|
|
URL
|
|
</TableCell>
|
|
<TableCell>
|
|
{doc.VisitedWebPageURL}
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">
|
|
Reffering URL
|
|
</TableCell>
|
|
<TableCell>
|
|
{doc.VisitedWebPageReffererURL}
|
|
</TableCell>
|
|
</TableRow>
|
|
|
|
<TableRow>
|
|
<TableCell className="font-medium">
|
|
Date & Time Visited
|
|
</TableCell>
|
|
<TableCell>
|
|
{
|
|
doc.VisitedWebPageDateWithTimeInISOString
|
|
}
|
|
</TableCell>
|
|
</TableRow>
|
|
|
|
<TableRow>
|
|
<TableCell className="font-medium">
|
|
Visit Duration (In Milliseconds)
|
|
</TableCell>
|
|
<TableCell>
|
|
{
|
|
doc.VisitedWebPageVisitDurationInMilliseconds
|
|
}
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
<button
|
|
type="button"
|
|
onClick={() => getDocDescription(doc)}
|
|
className="text-gray-900 w-full hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800"
|
|
>
|
|
Get More Information
|
|
</button>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (chat.type === "description") {
|
|
return (
|
|
<div
|
|
className="bg-background flex flex-col gap-2 rounded-lg border p-8"
|
|
key={index}
|
|
>
|
|
<p className="text-3xl font-semibold">
|
|
{chat.doctitle}
|
|
</p>
|
|
<MarkDownTest source={chat.message} />
|
|
</div>
|
|
);
|
|
}
|
|
})}
|
|
</div>
|
|
<div className="h-px w-full"></div>
|
|
</div>
|
|
<div className="from-muted/30 to-muted/30 animate-in dark:from-background/10 dark:to-background/80 inset-x-0 bottom-0 w-full duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px] dark:from-10%">
|
|
<div className="mx-auto sm:max-w-4xl sm:px-4">
|
|
|
|
<div className={loading ? "rounded-md p-4 w-full my-4" : "hidden"}>
|
|
<div className="animate-pulse flex space-x-4">
|
|
<div className="rounded-full bg-slate-700 h-10 w-10">
|
|
</div>
|
|
<div className="flex-1 space-y-6 py-1">
|
|
<div className="h-2 bg-slate-700 rounded"></div>
|
|
<div className="space-y-3">
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="h-2 bg-slate-700 rounded col-span-2"></div>
|
|
<div className="h-2 bg-slate-700 rounded col-span-1"></div>
|
|
</div>
|
|
<div className="h-2 bg-slate-700 rounded"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-background space-y-4 border-t px-4 py-2 shadow-lg sm:rounded-t-xl sm:border md:py-4">
|
|
<form action={handleSubmit}>
|
|
<div className="bg-background relative flex max-h-60 w-full grow flex-col overflow-hidden px-8 sm:rounded-md sm:border sm:px-12">
|
|
<Image
|
|
className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input shadow-sm hover:bg-accent hover:text-accent-foreground h-9 w-9 bg-background absolute left-0 top-[13px] size-8 rounded-full p-0 sm:left-4"
|
|
src={logo}
|
|
alt="aiicon"
|
|
/>
|
|
<span className="sr-only">New Chat</span>
|
|
<textarea
|
|
placeholder="Send a message."
|
|
className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
|
|
name="query"
|
|
></textarea>
|
|
<div className="absolute right-0 top-[13px] sm:right-4">
|
|
<button
|
|
className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 w-9"
|
|
type="submit"
|
|
data-state="closed"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 256 256"
|
|
fill="currentColor"
|
|
className="size-4"
|
|
>
|
|
<path d="M200 32v144a8 8 0 0 1-8 8H67.31l34.35 34.34a8 8 0 0 1-11.32 11.32l-48-48a8 8 0 0 1 0-11.32l48-48a8 8 0 0 1 11.32 11.32L67.31 168H184V32a8 8 0 0 1 16 0Z"></path>
|
|
</svg>
|
|
<span className="sr-only">Send message</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ProtectedPage;
|