small things

client/codegen.yml

@@ -1,9 +1,7 @@
 overwrite: true
 schema: "../server/src/graphql/schema.gql"
 documents:
-  - "src/graphql/queries.gql"
-  - "src/graphql/fragments.gql"
-  - "src/graphql/subscriptions.gql"
+  - "src/graphql/**/*.gql"
 generates:
   src/graphql/generated/graphql.ts:
     plugins:

client/src/App.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { ClerkProvider, ClerkLoaded } from '@clerk/clerk-react';
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import './App.css';
 import HomePage from './views/HomePage';
 import { ApolloClientProvider } from "./providers/ApolloClientProvider";

client/src/components/custom/ButtonWithTooltipWhenDisabled.tsx

@@ -0,0 +1,48 @@
+import { Button, ButtonProps } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+interface ButtonWithTooltipWhenDisabledProps extends ButtonProps {
+  onClick: () => void;
+  tooltipText: string;
+  ariaLabel: string;
+  disabled: boolean;
+}
+
+export default function ButtonWithTooltipWhenDisabled({ 
+  children, 
+  className, 
+  variant = "ghost", 
+  size = "icon", 
+  ariaLabel, 
+  onClick, 
+  tooltipText, 
+  disabled 
+}: ButtonWithTooltipWhenDisabledProps) {
+  const button = (
+    <Button
+      variant={variant}
+      size={size}
+      className={className}
+      aria-label={ariaLabel}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </Button>
+  );
+
+  if (!disabled) {
+    return button;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        {button}
+      </TooltipTrigger>
+      <TooltipContent side="right" sideOffset={5}>
+        {tooltipText}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

client/src/components/custom/PopoverButton.tsx

@@ -17,7 +17,7 @@ export const PopoverButton = React.forwardRef<
     variant='outline'
     onClick={togglePopover}
   >
-    <div className='overflow-hidden max-w-[180px] truncate text-left'>{title}</div>
+    <div className='overflow-hidden max-w-[180px] truncate text-left font-normal'>{title}</div>
     <ChevronsUpDown className='w-4 h-4 ml-2 flex-shrink-0' />
   </Button>
 ))

client/src/graphql/fragments.gql

@@ -38,7 +38,7 @@ fragment InformationGraph on InformationGraph {
     ...InformationNode
   }
   edges {
-    ...InformationNodeEdge
+    ...informationEdge
   }
 }
 
@@ -47,7 +47,7 @@ fragment InformationNode on InformationNode {
   title
 }
 
-fragment InformationNodeEdge on InformationNodeEdge {
+fragment informationEdge on informationEdge {
   id
   startNodeId
   endNodeId
@@ -59,7 +59,7 @@ fragment AgentGraph on AgentGraph {
     ...AgentNode
   }
   edges {
-    ...AgentNodeEdge
+    ...AgentEdge
   }
 }
 
@@ -68,7 +68,7 @@ fragment AgentNode on AgentNode {
   title
 }
 
-fragment AgentNodeEdge on AgentNodeEdge {
+fragment AgentEdge on AgentEdge {
   id
   type
   startNodeId
@@ -106,7 +106,7 @@ fragment ToolGraph on ToolGraph {
     ...ToolNode
   }
   edges {
-    ...ToolNodeEdge
+    ...ToolEdge
   }
 }
 
@@ -115,7 +115,7 @@ fragment ToolNode on ToolNode {
   title
 }
 
-fragment ToolNodeEdge on ToolNodeEdge {
+fragment ToolEdge on ToolEdge {
   id
   startNodeId
   endNodeId
@@ -127,11 +127,11 @@ fragment ActionGraph on ActionGraph {
     ...ActionNode
   }
   edges {
-    ...ActionNodeEdge
+    ...ActionEdge
   }
 }
 
-fragment ActionNodeEdge on ActionNodeEdge {
+fragment ActionEdge on ActionEdge {
   id
   startNodeId
   endNodeId

client/src/graphql/mutations.gql

@@ -0,0 +1,23 @@
+mutation CreateSwarm($input: CreateSwarmRequest!) {
+  swarmMutation {
+    createSwarm(input: $input) {
+      ...User
+    }
+  }
+}
+
+mutation CreateInformationGraph($input: CreateInformationGraphRequest!) {
+  informationGraphMutation {
+    createInformationGraph(input: $input) {
+      ...User
+    }
+  }
+}
+
+mutation SendMessage($input: SendMessageRequest!) {
+  chatMutation {
+    sendMessage(input: $input) {
+      ...Chat
+    }
+  }
+}

client/src/graphql/queries.gql

@@ -21,33 +21,3 @@ query FetchActionGraph {
     ...ActionGraph
   }
 }
-
-mutation CreateSwarm($input: CreateSwarmRequest!) {
-  swarmMutation {
-    createSwarm(input: $input) {
-      ...User
-    }
-  }
-}
-
-mutation CreateInformationGraph($input: CreateInformationGraphRequest!) {
-  informationGraphMutation {
-    createInformationGraph(input: $input) {
-      ...User
-    }
-  }
-}
-
-mutation SendMessage($input: SendMessageRequest!) {
-  chatMutation {
-    sendMessage(input: $input) {
-      ...Chat
-    }
-  }
-}
-
-subscription MessageSent($chatId: ID!) {
-  messageSent(chatId: $chatId) {
-    ...Message
-  }
-}

client/src/graphql/subscriptions.gql

@@ -2,4 +2,4 @@ subscription NewMessage($chatId: ID!) {
   messageSent(chatId: $chatId) {
     ...Message
   }
-}
+}

client/src/hooks/fetchUser.ts

@@ -1,11 +1,20 @@
-import { useFetchUserQuery } from "../graphql/generated/graphql";
+import { ApolloError } from "@apollo/client";
+import { FetchUserQueryResult, useFetchUserQuery, User } from "../graphql/generated/graphql";
 
-export function useFetchUser() {
-  const { data, loading, error } = useFetchUserQuery();
+export function useFetchUser(): {
+  user: User | null;
+  loading: boolean;
+  error: ApolloError | null;
+  refetch: () => Promise<FetchUserQueryResult>;
+} {
+  const { data, loading, error, refetch } = useFetchUserQuery({
+    fetchPolicy: 'cache-and-network',
+  });
 
   return {
-    user: data?.user,
+    user: data?.user || null,
     loading,
-    error
+    error: error || null,
+    refetch: refetch as () => Promise<FetchUserQueryResult>
   };
 }

client/src/views/Dialogs/CreateInformationGraphDialog.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { CreateInformationGraphRequest, useCreateInformationGraphMutation } from "../../graphql/generated/graphql";
+import { useFetchUser } from "../../hooks/fetchUser";
+import ButtonWithTooltipWhenDisabled from "@/components/custom/ButtonWithTooltipWhenDisabled";
+
+interface CreateInformationDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+const initialCreateInformationGraphRequest: CreateInformationGraphRequest = {
+    title: '',
+}
+
+export function CreateInformationDialog({ open, onOpenChange }: CreateInformationDialogProps) {
+    const [createInformationGraphRequest, setCreateInformationGraphRequest] = useState<CreateInformationGraphRequest>(initialCreateInformationGraphRequest)
+    const [createInformationGraph] = useCreateInformationGraphMutation();
+    const { refetch } = useFetchUser();
+
+    const handleCreateInformationGraph = async () => {
+        try {
+            const result = await createInformationGraph({
+                variables: { input: createInformationGraphRequest },
+            });
+            console.log(result);
+            await refetch(); // Refetch user data after creating a new information graph
+            onOpenChange(false);
+            setCreateInformationGraphRequest(initialCreateInformationGraphRequest);
+        } catch (error) {
+            console.error("Error creating information graph:", error);
+        }
+    };
+
+    const isCreateButtonDisabled = !createInformationGraphRequest.title
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!isCreateButtonDisabled) {
+            handleCreateInformationGraph();
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="bg-background border-secondary border-2 rounded-2xl">
+                <form onSubmit={handleSubmit}>
+                    <div className="grid gap-4 py-4 px-20 mt-2">
+                        <Input
+                            className="bg-secondary rounded-2xl"
+                            placeholder="Title"
+                            value={createInformationGraphRequest.title}
+                            onChange={(e) => setCreateInformationGraphRequest({ ...createInformationGraphRequest, title: e.target.value })}
+                        />
+                    </div>
+                    <div className="flex justify-end">
+                        <ButtonWithTooltipWhenDisabled 
+                            type="submit"
+                            disabled={isCreateButtonDisabled}
+                            onClick={() => {}} // This is needed because the onClick prop is required
+                            tooltipText="Please enter a title"
+                            ariaLabel="Create information graph"
+                        >
+                            Create
+                        </ButtonWithTooltipWhenDisabled>
+                    </div>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}