andre/CrewAI-Visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add gql queries to fronted and test with getting agents + install material-tailwind UI library to use it to enhance the UI/UX

Browse Source
This commit is contained in:
Eng. Elias
2024-02-21 23:00:02 +04:00
parent 961bd46470
commit 99ba3f1c2c
9 changed files with 664 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/agents/page.tsx
View File

@@ -1,9 +1,11 @@
"use client";
import AgentModal from "@/components/modals/agent_modal";
import { agents } from "@/data/data";
import { Agent } from "@/types/agent";
import { GET_AGENTS } from "@/utils/graphql_queries";
import { useQuery } from "@apollo/client";
import { Icon } from "@iconify/react";
import { Button } from "@material-tailwind/react";
import { useState } from "react";
const AgentsPage = () => {
@@ -11,9 +13,26 @@ const AgentsPage = () => {
const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
const { loading, error, data } = useQuery(GET_AGENTS);
console.log({ loading, error, data });
if (loading) {
return (
<Button
variant="text"
loading={true}
placeholder={"Loading"}
className="text-white"
>
Loading
</Button>
);
}
return (
<div className="container m-auto flex flex-wrap flex-col md:flex-row items-center justify-start p-2">
{agents.map((agent, i) => (
{data.agents.map((agent: Agent, i: number) => (
<div key={i} className="w-full lg:w-1/2 p-3 relative">
<div
className={`flex flex-col ${

33
src/app/layout.tsx
View File

@@ -7,6 +7,7 @@ import BottomNav from "@/components/bottom_nav";
import MaxWidthWrapper from "@/components/max_width_wrapper";
import SideNav from "@/components/side_nav";
import TopNav from "@/components/top_nav";
import { ApolloWrapper } from "@/utils/apollo_wrapper";
const inter = Inter({ subsets: ["latin"] });
@@ -23,21 +24,23 @@ export default function RootLayout({
return (
<html lang="en">
<body className={inter.className}>
<TopNav />
<MaxWidthWrapper>
<div className="flex">
<SideNav />
<main className="flex-1">
<div
style={{ marginTop: 35 }}
className="flex flex-col pt-4 sm:ml-[120px] md:ml-[250px] sm:border-r sm:border-zinc-700 pb-20 h-full"
>
{children}
</div>
</main>
</div>
</MaxWidthWrapper>
<BottomNav />
<ApolloWrapper>
<TopNav />
<MaxWidthWrapper>
<div className="flex">
<SideNav />
<main className="flex-1">
<div
style={{ marginTop: 35 }}
className="flex flex-col pt-4 sm:ml-[120px] md:ml-[250px] sm:border-r sm:border-zinc-700 pb-20 h-full"
>
{children}
</div>
</main>
</div>
</MaxWidthWrapper>
<BottomNav />
</ApolloWrapper>
</body>
</html>
);

2
src/components/modals/agent_modal.tsx
View File

@@ -179,7 +179,7 @@ export default function AgentModal(props: {
<img
src={agent?.image ?? "/sailor.png"}
alt="Software Engineer"
className="w-full rounded-lg"
className="w-7/12 mx-auto rounded-lg"
/>
)}
</div>

35
src/utils/apollo_client.ts Normal file
View File

@@ -0,0 +1,35 @@
import {
ApolloClient,
ApolloLink,
HttpLink,
InMemoryCache,
} from "@apollo/client";
import {
NextSSRApolloClient,
NextSSRInMemoryCache,
SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";
export const apolloClient = new ApolloClient({
uri: "/api/graphql",
cache: new InMemoryCache(),
});
export function makeApolloClient() {
const httpLink = new HttpLink({
uri: "/api/graphql",
});
return new NextSSRApolloClient({
cache: new NextSSRInMemoryCache(),
link:
typeof window === "undefined"
? ApolloLink.from([
new SSRMultipartLink({
stripDefer: true,
}),
httpLink,
])
: httpLink,
});
}

12
src/utils/apollo_wrapper.tsx Normal file
View File

@@ -0,0 +1,12 @@
"use client";
import { ApolloNextAppProvider } from "@apollo/experimental-nextjs-app-support/ssr";
import { makeApolloClient } from "./apollo_client";
export function ApolloWrapper({ children }: React.PropsWithChildren) {
return (
<ApolloNextAppProvider makeClient={makeApolloClient}>
{children}
</ApolloNextAppProvider>
);
}

281
src/utils/graphql_queries.ts Normal file
View File

@@ -0,0 +1,281 @@
import { gql } from "@apollo/client";
export const GET_AGENTS = gql`
query GetAgents {
agents {
id
role
goal
backstory
tools
allowDelegation
verbose
image
}
}
`;
export const GET_AGENT_BY_ID = gql`
query GetAgentById($id: Int!) {
agent(id: $id) {
id
role
goal
backstory
tools
allowDelegation
verbose
image
missions {
id
name
}
}
}
`;
export const CREATE_AGENT = gql`
mutation CreateAgent(
$role: String!
$goal: String!
$backstory: String
$tools: [AgentTool!]
$allowDelegation: Boolean!
$verbose: Boolean!
) {
createAgent(
role: $role
goal: $goal
backstory: $backstory
tools: $tools
allowDelegation: $allowDelegation
verbose: $verbose
) {
id
role
goal
backstory
tools
allowDelegation
verbose
image
}
}
`;
export const UPDATE_AGENT = gql`
mutation UpdateAgent(
$id: Int!
$role: String
$goal: String
$backstory: String
$tools: [AgentTool!]
$allowDelegation: Boolean
$verbose: Boolean
) {
updateAgent(
id: $id
role: $role
goal: $goal
backstory: $backstory
tools: $tools
allowDelegation: $allowDelegation
verbose: $verbose
) {
id
role
goal
backstory
tools
allowDelegation
verbose
image
}
}
`;
export const DELETE_AGENT = gql`
mutation DeleteAgent($id: Int!) {
deleteAgent(id: $id) {
deleted
}
}
`;
export const GET_MISSIONS = gql`
query GetMissions {
missions {
id
name
crew {
id
role
goal
backstory
tools
allowDelegation
verbose
image
}
tasks {
name
description
agent {
id
role
}
}
verbose
process
result
}
}
`;
export const GET_MISSION_BY_ID = gql`
query GetMissionById($id: Int!) {
mission(id: $id) {
id
name
crew {
id
role
goal
backstory
tools
allowDelegation
verbose
image
}
tasks {
name
description
agent {
id
role
}
}
verbose
process
result
}
}
`;
export const CREATE_MISSION = gql`
mutation CreateMission(
$name: String!
$crew: [Int!]
$tasks: [TaskInput!]
$verbose: Boolean
$process: MissionProcess
) {
createMission(
name: $name
crew: $crew
tasks: $tasks
verbose: $verbose
process: $process
) {
id
name
crew {
id
role
goal
backstory
tools
allowDelegation
verbose
image
}
tasks {
name
description
agent {
id
role
}
}
verbose
process
result
}
}
`;
export const UPDATE_MISSION = gql`
mutation UpdateMission(
$id: Int!
$name: String
$crew: [Int!]
$tasks: [TaskInput!]
$verbose: Boolean
$process: MissionProcess
) {
updateMission(
id: $id
name: $name
crew: $crew
tasks: $tasks
verbose: $verbose
process: $process
) {
id
name
crew {
id
role
goal
backstory
tools
allowDelegation
verbose
image
}
tasks {
name
description
agent {
id
role
}
}
verbose
process
result
}
}
`;
export const DELETE_MISSION = gql`
mutation DeleteMission($id: Int!) {
deleteMission(id: $id) {
deleted
}
}
`;
export const RUN_MISSION = gql`
mutation RunMission($id: Int!) {
runMission(id: $id) {
id
name
crew {
id
role
}
tasks {
name
description
agent {
id
role
}
}
verbose
process
result
}
}
`;