Feat/update layout (#45)

* feat:add panel iconbutton display * feat: add agent name * fix:useSkillsQuery
Onelevenvy · Sep 24, 2024 · 3a69cbf · 3a69cbf
1 parent 7704696
commit 3a69cbf
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 29 deletions.
diff --git a/backend/app/core/workflow/init_graph.py b/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
                     ),
                 )

diff --git a/backend/app/core/workflow/node.py b/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",
                     ),
                     (

diff --git a/web/src/app/(applayout)/skills/page.tsx b/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");

diff --git a/web/src/components/WorkFlow/FlowVisualizer.tsx b/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>

diff --git a/web/src/components/WorkFlow/nodes/Base/BaseNode.tsx b/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

diff --git a/web/src/components/WorkFlow/nodes/Base/Properties.tsx b/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;
diff --git a/web/src/components/WorkFlow/nodes/End/Properties.tsx b/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}

diff --git a/web/src/components/WorkFlow/nodes/LLM/LLMNode.tsx b/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" />