Engraph-dev · vaxad · Feb 21, 2025 · Feb 18, 2025 · Feb 18, 2025
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,17 +21,17 @@ export default function RootLayout({
 }>) {
 	return (
 		<html suppressHydrationWarning lang="en">
-			<body className={`${font.className} min-h-svh antialiased`}>
+			<body className={`${font.className} dark min-h-svh antialiased`}>
 				<SessionProvider>
-					<ThemeProvider
+					{/* <ThemeProvider
 						attribute="class"
 						defaultTheme="dark"
-						enableSystem
+						// enableSystem
 						disableTransitionOnChange
-					>
-						<main>{children}</main>
-						<Toaster />
-					</ThemeProvider>
+					> */}
+					<main>{children}</main>
+					<Toaster />
+					{/* </ThemeProvider> */}
 				</SessionProvider>
 			</body>
 		</html>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,9 +10,9 @@ export default function Home() {
 				<div className="container mx-auto">
 					<Navbar />
 					<Hero />
-					<Features />
+					{/* <Features />
 					<Steps />
-					<Pricing />
+					<Pricing /> */}
 				</div>
 			</div>
 		</div>

diff --git a/src/components/pages/(auth)/org/create/create-org-form.tsx b/src/components/pages/(auth)/org/create/create-org-form.tsx
@@ -56,7 +56,7 @@ export default function CreateOrgForm() {
 		<form
 			onReset={resetForm}
 			onSubmit={generateSubmitHandler()}
-			className="mx-auto max-w-3xl space-y-8 py-10"
+			className="w-full space-y-8 py-10"
 		>
 			<TextField
 				form={createOrgForm}

diff --git a/src/components/pages/(auth)/org/create/index.tsx b/src/components/pages/(auth)/org/create/index.tsx
@@ -3,7 +3,7 @@ import React from "react"
 
 export default function CreateOrgPage() {
 	return (
-		<div className="container mx-auto px-6 py-8 md:py-24">
+		<div className="container mx-auto max-w-3xl px-6 py-8 md:py-24">
 			<h1 className="text-4xl font-bold">Create Organization</h1>
 			<CreateOrgForm />
 		</div>

diff --git a/src/components/pages/(auth)/user/login/index.tsx b/src/components/pages/(auth)/user/login/index.tsx
@@ -3,7 +3,7 @@ import React from "react"
 
 export default function LoginPage({ orgId }: { orgId: string }) {
 	return (
-		<div className="container mx-auto px-6 py-8 md:py-24">
+		<div className="container mx-auto max-w-3xl px-6 py-8 md:py-24">
 			<h1 className="text-4xl font-bold">Login with credentials</h1>
 			<LoginForm orgId={orgId} />
 		</div>

diff --git a/src/components/pages/(auth)/user/login/login-form.tsx b/src/components/pages/(auth)/user/login/login-form.tsx
@@ -55,7 +55,7 @@ export default function LoginForm({ orgId }: { orgId: string }) {
 	return (
 		<form
 			onSubmit={generateSubmitHandler()}
-			className="mx-auto max-w-3xl space-y-8 py-10"
+			className="w-full space-y-8 py-10"
 		>
 			<TextField
 				form={loginCredentialsForm}

diff --git a/src/components/pages/(protected)/common/navbar/index.tsx b/src/components/pages/(protected)/common/navbar/index.tsx
@@ -1,15 +1,12 @@
-import NavLogo from "@/components/pages/(protected)/common/navbar//nav-logo"
 import { SubNavbar } from "@/components/pages/(protected)/common/navbar/sub-nav"
 import UpperNavbar from "@/components/pages/(protected)/common/navbar/upper-nav"
 import React from "react"
 
 export default function ProtectedNavbar() {
 	return (
 		<>
-			<NavLogo className="fixed top-0 animate-[logo-scale_linear_forwards] pl-6 [animation-range:0px_56px] [animation-timeline:scroll(root)]" />
-			<div className="container mx-auto max-w-screen-2xl">
-				<UpperNavbar />
-			</div>
+			{/* <NavLogo className="fixed top-0 animate-[logo-scale_linear_forwards] pl-6 [animation-range:0px_56px] [animation-timeline:scroll(root)]" /> */}
+			<UpperNavbar />
 			<SubNavbar />
 		</>
 	)

diff --git a/src/components/pages/(protected)/common/navbar/sub-nav.tsx b/src/components/pages/(protected)/common/navbar/sub-nav.tsx
@@ -16,7 +16,7 @@ export function SubNavbar() {
 	const pathname = usePathname()
 
 	return (
-		<div className="sticky top-0 border-b border-border/40 bg-foreground/5 backdrop-blur-md">
+		<div className="sticky top-0 z-40 border-b border-border/40 bg-foreground/5 backdrop-blur-md *:container *:mx-auto *:max-w-screen-2xl">
 			<ScrollArea>
 				<ScrollBar orientation="horizontal" className="invisible" />
 				<nav className="flex h-10 animate-[logo-scroll_linear_forwards] items-center space-x-4 px-4 [animation-range:0px_56px] [animation-timeline:scroll(root)] md:px-6">

diff --git a/src/components/pages/(protected)/common/navbar/upper-nav.tsx b/src/components/pages/(protected)/common/navbar/upper-nav.tsx
@@ -2,22 +2,23 @@ import {
 	Account,
 	UserDetails,
 } from "@/components/pages/(protected)/common/navbar/client"
+import NavLogo from "@/components/pages/(protected)/common/navbar/nav-logo"
 import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
 import NavbarBreadCrumb from "@/components/ux/bread-crumbs"
-import { ModeToggle } from "@/components/ux/mode-togggle"
 import { HelpCircle } from "lucide-react"
 import * as React from "react"
 
 export default function UpperNavbar() {
 	return (
-		<div className="bg-foreground/5 backdrop-blur-md">
+		<div className="bg-foreground/5 backdrop-blur-md *:container *:mx-auto *:max-w-screen-2xl">
 			<header className="z-50 w-full">
 				<div className="flex h-14 items-center justify-between px-4 md:px-6">
 					<div className="flex items-center gap-4">
+						<NavLogo className="px-0" />
 						<Separator
 							orientation="vertical"
-							className="ml-10 h-6"
+							className="~ml-10 h-6"
 						/>
 						<UserDetails />
 						<Separator orientation="vertical" className="h-6" />
@@ -35,7 +36,7 @@ export default function UpperNavbar() {
 							Docs
 						</Button>
 						<Separator orientation="vertical" className="h-6" />
-						<ModeToggle />
+						{/* <ModeToggle /> */}
 						<Account />
 					</div>
 					<Account className="block lg:hidden" />

diff --git a/src/components/pages/(protected)/projects/[projectId]/index.tsx b/src/components/pages/(protected)/projects/[projectId]/index.tsx
@@ -1,11 +1,15 @@
 "use client"
 
 import Workflows from "@/components/pages/(protected)/projects/[projectId]/workflows"
+import { buttonVariants } from "@/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import Title from "@/components/ux/title"
 import useProjectIdContext from "@/lib/context/project-id"
-import { Handshake, Settings, Users, Workflow } from "lucide-react"
+import { Workflow as WorkflowType } from "@prisma/client"
+import { ArrowUp, Handshake, Settings, Users, Workflow } from "lucide-react"
 import dynamic from "next/dynamic"
+import Link from "next/link"
+import { useMemo } from "react"
 
 const TeamInfo = dynamic(
 	() =>
@@ -26,18 +30,44 @@ const UserInfo = dynamic(
 )
 
 export default function ProjectIdPage() {
-	const { projectResponseData } = useProjectIdContext()
+	const { projectResponseData, projectWorkflowsData } = useProjectIdContext()
+
+	const workflows = useMemo(
+		() =>
+			projectWorkflowsData.reduce(
+				(acc, curr) =>
+					[...acc, ...curr.projectWorkflows].filter(
+						(elem) => elem.workflowStatus === "WorkflowCompleted",
+					),
+				[] as WorkflowType[],
+			),
+		[projectWorkflowsData],
+	)
+	const firstWorkflowId = workflows[0]?.workflowId
 	const data =
 		projectResponseData?.responseStatus === "SUCCESS"
 			? projectResponseData.projectData
 			: null
 	return (
 		<div className="space-y-6">
-			<Title title={data?.projectName || "Loading Project..."} />
+			<div className="flex w-full items-center justify-between">
+				<Title title={data?.projectName || "Loading Project..."} />
+				{firstWorkflowId && (
+					<Link
+						className={buttonVariants()}
+						href={`/projects/${data?.projectId}/workflows/${firstWorkflowId}`}
+					>
+						Query
+						<span>
+							<ArrowUp className="rotate-45" />
+						</span>
+					</Link>
+				)}
+			</div>
 			<Tabs defaultValue="workflows">
 				<TabsList className="grid w-full grid-cols-4">
 					<TabsTrigger value="workflows">
-						<span className="hidden md:block">Workflows</span>
+						<span className="hidden md:block">Commits</span>
 						<span className="md:ml-2">
 							<Workflow size={16} />
 						</span>

diff --git a/src/components/pages/(protected)/projects/[projectId]/project-info.tsx b/src/components/pages/(protected)/projects/[projectId]/project-info.tsx
@@ -221,10 +221,10 @@ export default function ProjectInfo() {
 					</TableBody>
 				</Table>
 			</CardContent>
-			<CardFooter>
+			<CardFooter className="flex justify-end">
 				<AuthorizationWrapper role={UserRole.Admin}>
 					<Button
-						className="w-full"
+						className="w-fit"
 						variant="destructive"
 						onClick={() => void deleteProject()}
 					>

diff --git a/src/components/pages/(protected)/projects/[projectId]/workflows/[workflowId]/form.tsx b/src/components/pages/(protected)/projects/[projectId]/workflows/[workflowId]/form.tsx
@@ -1,26 +1,20 @@
 import { Button } from "@/components/ui/button"
-import {
-	Card,
-	CardContent,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card"
+import { Card, CardContent, CardFooter } from "@/components/ui/card"
 import { TextField } from "@/components/ui/custom-form"
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 import Remark from "@/components/ux/remark"
 import useWorkflowId from "@/lib/context/workflow-id"
 import { Role, WorkflowIdComponentProps } from "@/lib/types/graph"
 import { getSuggestions } from "@/lib/utils"
 import { Send } from "lucide-react"
-import React, { useEffect, useRef } from "react"
+import React, { useEffect, useMemo, useRef } from "react"
 
 export default function QueryForm({ workflowData }: WorkflowIdComponentProps) {
-	const { queryWorkflowForm, handleSubmit, messages } = useWorkflowId()
+	const { queryWorkflowForm, handleSubmit, messages, handleSuggestion } =
+		useWorkflowId()
 	const {
 		registerField,
 		isLoading,
-		setFields,
 		formValues: {
 			bodyParams: { userQuery },
 		},
@@ -36,21 +30,23 @@ export default function QueryForm({ workflowData }: WorkflowIdComponentProps) {
 		})
 	}, [isLoading])
 
-	const suggestions = getSuggestions(workflowData)
-
-	console.log({ suggestions })
+	const suggestions = useMemo(
+		() => getSuggestions(workflowData),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[messages, workflowData],
+	)
 
 	useEffect(() => {
 		window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" })
 	}, [])
 
 	return (
 		<Card>
-			<CardHeader>
-				<CardTitle> Query the Graph</CardTitle>
-			</CardHeader>
-			<CardContent>
-				<ScrollArea ref={divRef} className="h-[60vh] pr-4 *:*:!block">
+			<CardContent className="pt-6">
+				<ScrollArea
+					ref={divRef}
+					className="min-h-[60vh] pr-4 *:*:!block"
+				>
 					{messages.map((message, index) => (
 						<div key={index} className="mb-4 text-background">
 							{message.role === Role.AI ? (
@@ -77,21 +73,17 @@ export default function QueryForm({ workflowData }: WorkflowIdComponentProps) {
 				>
 					<ScrollArea className="flex w-full pb-2 *:*:!flex *:*:gap-2">
 						<ScrollBar className="h-2" orientation="horizontal" />
-						{suggestions.map((suggestion, index) => (
-							<Button
-								disabled={isLoading}
-								key={index}
-								type="submit"
-								onClick={() =>
-									setFields({
-										bodyParams: { userQuery: suggestion },
-									})
-								}
-								variant="outline"
-							>
-								{suggestion}
-							</Button>
-						))}
+						{!isLoading &&
+							suggestions.map((suggestion, index) => (
+								<Button
+									disabled={isLoading}
+									key={index}
+									onClick={() => handleSuggestion(suggestion)}
+									variant="outline"
+								>
+									{suggestion}
+								</Button>
+							))}
 					</ScrollArea>
 					<div className="flex w-full space-x-2">
 						<TextField
@@ -114,6 +106,7 @@ export default function QueryForm({ workflowData }: WorkflowIdComponentProps) {
 									"flex-grow px-3 py-2 text-sm border rounded-md w-full",
 								placeholder:
 									"How are commands in src/utils/commands.ts used?",
+								disabled: isLoading,
 							}}
 						/>
 						<Button disabled={!isValid} type="submit">

diff --git a/src/components/pages/(protected)/projects/[projectId]/workflows/[workflowId]/index.tsx b/src/components/pages/(protected)/projects/[projectId]/workflows/[workflowId]/index.tsx
@@ -1,22 +1,10 @@
 "use client"
 
 import QueryForm from "@/components/pages/(protected)/projects/[projectId]/workflows/[workflowId]/form"
-import ProjectIdPageSkeleton from "@/components/skeletons/project-id-skeleton"
 import WorkflowSkeleton from "@/components/skeletons/workflow-skeleton"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import useWorkflowId from "@/lib/context/workflow-id"
-import { GitGraph, MessageCircle } from "lucide-react"
-import dynamic from "next/dynamic"
 import React from "react"
 
-const ReactForceGraph = dynamic(
-	() =>
-		import(
-			"@/components/pages/(protected)/projects/[projectId]/workflows/[workflowId]/react-force-graph"
-		),
-	{ ssr: false },
-)
-
 export default function WorkflowIdPage() {
 	const { isLoading, workflowData } = useWorkflowId()
 
@@ -25,28 +13,7 @@ export default function WorkflowIdPage() {
 	}
 	return (
 		<div className="flex flex-col gap-4">
-			<Tabs defaultValue="visualize">
-				<TabsList className="grid w-full grid-cols-2">
-					<TabsTrigger value="visualize">
-						<span className="hidden md:block">Visualize</span>
-						<span className="md:ml-2">
-							<GitGraph size={16} />
-						</span>
-					</TabsTrigger>
-					<TabsTrigger value="query">
-						<span className="hidden md:block">Query</span>
-						<span className="md:ml-2">
-							<MessageCircle size={16} />
-						</span>
-					</TabsTrigger>
-				</TabsList>
-				<TabsContent value="visualize">
-					<ReactForceGraph workflowData={workflowData.workflowData} />
-				</TabsContent>
-				<TabsContent value="query">
-					<QueryForm workflowData={workflowData.workflowData} />
-				</TabsContent>
-			</Tabs>
+			<QueryForm workflowData={workflowData.workflowData} />
 		</div>
 	)
 }