Feat/update layout

backend/app/core/workflow/init_graph.py

@@ -180,7 +180,8 @@ def initialize_graph(
                             openai_api_key=model_info["api_key"],
                             openai_api_base=model_info["base_url"],
                             temperature=node_data["temperature"],
-                            system_prompt=node_data["systemMessage"],
+                            system_prompt=node_data.get("systemMessage", None),
+                            agent_name=node_data.get("label", node_id),
                         ).work
                     ),
                 )

backend/app/core/workflow/node.py

@@ -163,8 +163,10 @@ def __init__(
         openai_api_base: str,
         temperature: float,
         system_prompt: str,
+        agent_name: str,
     ):
         self.system_prompt = system_prompt
+        self.agent_name = agent_name
         if provider in ["zhipuai", "Siliconflow"]:
             self.model = ChatOpenAI(
                 model=model,
@@ -250,6 +252,7 @@ async def work(self, state: TeamState, config: RunnableConfig) -> ReturnTeamStat
                         "If you are unable to perform the task, that's OK, you can ask human for help, or just say that you are unable to perform the task."
                         "Execute what you can to make progress. "
                         "And your role is:" + self.system_prompt + "\n"
+                        "And your name is:" + self.agent_name + "\n"
                         "Stay true to your role and use your tools if necessary.\n\n",
                     ),
                     (

web/src/app/(applayout)/skills/page.tsx

@@ -23,17 +23,13 @@ import {
 import { useTabSearchParams } from "@/hooks/useTabSearchparams";
 import TabSlider from "@/components/Common/TabSlider";
 import { useTranslation } from "react-i18next";
+import { useSkillsQuery } from "@/hooks/useSkillsQuery";
 
 function Skills() {
   const showToast = useCustomToast();
   const { t } = useTranslation();
-  const {
-    data: skills,
-    isLoading,
-    isError,
-    error,
-  } = useQuery("skills", () => SkillsService.readSkills({}));
 
+  const { data: skills, isLoading, isError, error } = useSkillsQuery();
   if (isError) {
     const errDetail = (error as ApiError).body?.detail;
     showToast("Something went wrong.", `${errDetail}`, "error");

web/src/components/WorkFlow/FlowVisualizer.tsx

@@ -88,9 +88,9 @@ const FlowVisualizer: React.FC<FlowVisualizerProps> = ({
 
     const nodeType = node.type as NodeType;
     const PropertiesComponent = nodeConfig[nodeType]?.properties;
-
+    const { icon: Icon, colorScheme } = nodeConfig[nodeType];
     return (
-      <BaseProperties
+      <BaseProperties icon={<Icon />} colorScheme={colorScheme}
         nodeName={node.data.label}
         onNameChange={(newName: string) =>
           onNodeDataChange(node.id, "label", newName)
@@ -402,7 +402,7 @@ const FlowVisualizer: React.FC<FlowVisualizerProps> = ({
           border={"1px solid #d1d5db"}
           onClick={() => setShowDebugPreview(true)}
           _hover={{ backgroundColor: "#eff4ff" }}
-          rightIcon={<VscTriangleRight color={"#155aef"} size={"12px"} />}
+          rightIcon={<VscTriangleRight color={"#155aef"} size={"12px"}/>}
           size={"sm"}
         >
           <Text color={"#155aef"}>Debug</Text>

web/src/components/WorkFlow/nodes/Base/BaseNode.tsx

@@ -23,7 +23,6 @@ export const BaseNode: React.FC<BaseNodeProps> = ({
     textAlign="center"
     position="relative"
     boxShadow="md"
-
   >
     <HStack spacing={2} mb={1}>
       <IconButton

web/src/components/WorkFlow/nodes/Base/Properties.tsx

@@ -1,27 +1,54 @@
 import React from "react";
-import { Text, Input, VStack, FormControl, FormErrorMessage } from "@chakra-ui/react";
+import {
+  Input,
+  VStack,
+  FormControl,
+  FormErrorMessage,
+  IconButton,
+  HStack,
+} from "@chakra-ui/react";
 
 interface BasePropertiesProps {
   children: React.ReactNode;
   nodeName: string;
   onNameChange: (newName: string) => void;
   nameError: string | null;
+  icon: React.ReactElement;
+  colorScheme: string;
 }
 
-const BaseProperties: React.FC<BasePropertiesProps> = ({ children, nodeName, onNameChange, nameError }) => {
+const BaseProperties: React.FC<BasePropertiesProps> = ({
+  children,
+  nodeName,
+  onNameChange,
+  nameError,
+  icon,
+  colorScheme,
+}) => {
   return (
     <VStack spacing={4} align="stretch">
       <FormControl isInvalid={!!nameError}>
-        <Text fontWeight="bold" mb={2}>Node Name:</Text>
-        <Input 
-          value={nodeName} 
-          onChange={(e) => onNameChange(e.target.value)}
-        />
+        <HStack spacing={1} mb={1}>
+          <IconButton
+            aria-label="names"
+            icon={icon}
+            colorScheme={colorScheme}
+            size="xs"
+          />
+          <Input
+            value={nodeName}
+            onChange={(e) => onNameChange(e.target.value)}
+            border={"1px solid white"}
+            size={"sm"}
+            fontWeight={"bold"}
+            w={"50%"}
+          />
+        </HStack>
         <FormErrorMessage>{nameError}</FormErrorMessage>
       </FormControl>
       {children}
     </VStack>
   );
 };
 
-export default BaseProperties;
+export default BaseProperties;

web/src/components/WorkFlow/nodes/End/Properties.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { Text, Input, VStack, FormControl, FormErrorMessage } from "@chakra-ui/react";
+import {
+  Text,
+  Input,
+  VStack,
+  FormControl,
+  FormErrorMessage,
+} from "@chakra-ui/react";
 
 interface BasePropertiesProps {
   children: React.ReactNode;
@@ -8,15 +14,13 @@ interface BasePropertiesProps {
   nameError: string | null;
 }
 
-const BaseProperties: React.FC<BasePropertiesProps> = ({ children, nodeName, onNameChange, nameError }) => {
+const BaseProperties: React.FC<BasePropertiesProps> = ({
+  children,
+  nameError,
+}) => {
   return (
     <VStack spacing={4} align="stretch">
       <FormControl isInvalid={!!nameError}>
-        <Text fontWeight="bold" mb={2}>Node Name:</Text>
-        <Input 
-          value={nodeName} 
-          onChange={(e) => onNameChange(e.target.value)}
-        />
         <FormErrorMessage>{nameError}</FormErrorMessage>
       </FormControl>
       {children}

web/src/components/WorkFlow/nodes/LLM/LLMNode.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { Handle, Position, NodeProps } from "reactflow";
 import { Box, VStack, Text } from "@chakra-ui/react";
-import { FaRobot } from "react-icons/fa";
 import { BaseNode } from "../Base/BaseNode";
 import ModelProviderIcon from "@/components/Icons/models";
-
+import { nodeConfig } from "../nodeConfig";
+const { icon: Icon, colorScheme } = nodeConfig.llm;
 const LLMNode: React.FC<NodeProps> = (props) => (
-  <BaseNode {...props} icon={<FaRobot />} colorScheme="blue">
+  <BaseNode {...props} icon={<Icon />} colorScheme={colorScheme}>
     <Handle type="target" position={Position.Left} id="left" />
     <Handle type="target" position={Position.Right} id="right" />
     <Handle type="source" position={Position.Left} id="left" />