feat: add icon to graph nodes #918 (#1117)

### What problem does this PR solve?

feat: add icon to graph nodes #918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/chat/hooks.ts

   const { conversationId } = useGetChatSearchParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
 
-  const fetchConversation = useFetchConversation();
-
   const { handleClickConversation } = useClickConversationCard();
   const { send, answer, done } = useSendMessageWithSse();
 
   const sendMessage = useCallback(
     async (message: string, id?: string) => {
-      const res: Response = await send({
+      const res = await send({
         conversation_id: id ?? conversationId,
         messages: [
           ...(conversation?.message ?? []).map((x: IMessage) => omit(x, 'id')),
         ],
       });
 
-      if (res.status === 200) {
+      if (res && (res?.response.status !== 200 || res?.data?.retcode !== 0)) {
+        // cancel loading
+        setValue(message);
+        console.info('removeLatestMessage111');
+        removeLatestMessage();
+      } else {
         if (id) {
           console.info('111');
           // new conversation
           console.info('222');
           // fetchConversation(conversationId);
         }
-      } else {
-        console.info('333');
-
-        // cancel loading
-        setValue(message);
-        console.info('removeLatestMessage111');
-        removeLatestMessage();
       }
-      console.info('false');
     },
     [
       conversation?.message,

web/src/pages/chat/shared-hooks.ts

 
   const sendMessage = useCallback(
     async (message: string, id?: string) => {
-      const res: Response = await send({
+      const res = await send({
         conversation_id: id ?? conversationId,
         quote: false,
         messages: [
         ],
       });
 
-      if (res?.status === 200) {
-        // const data = await fetchConversation(conversationId);
-        // if (data.retcode === 0) {
-        //   setCurrentConversation(data.data);
-        // }
-      } else {
+      if (res && (res?.response.status !== 200 || res?.data?.retcode !== 0)) {
         // cancel loading
         setValue(message);
         removeLatestMessage();

web/src/pages/flow/canvas/node/index.tsx

 import classNames from 'classnames';
 import { Handle, NodeProps, Position } from 'reactflow';
 
+import { Space } from 'antd';
+import { Operator } from '../../constant';
+import OperatorIcon from '../../operator-icon';
 import styles from './index.less';
 
 export function TextUpdaterNode({
   selected,
 }: NodeProps<{ label: string }>) {
   return (
-    <div
+    <section
       className={classNames(styles.textUpdaterNode, {
         [styles.selectedNode]: selected,
       })}
       >
         {/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
       </Handle>
-      <div>{data.label}</div>
-    </div>
+      <div>
+        <Space>
+          <OperatorIcon
+            name={data.label as Operator}
+            fontSize={12}
+          ></OperatorIcon>
+          {data.label}
+        </Space>
+      </div>
+    </section>
   );
 }

web/src/pages/flow/chat/hooks.ts

       }
       const res = await send(params);
 
-      if (res?.response.status !== 200 || res?.data?.retcode !== 0) {
+      if (res && (res?.response.status !== 200 || res?.data?.retcode !== 0)) {
         antMessage.error(res?.data?.retmsg);
 
         // cancel loading

web/src/pages/flow/constant.tsx

   MergeCellsOutlined,
   RocketOutlined,
   SendOutlined,
+  SlidersOutlined,
 } from '@ant-design/icons';
 
 export enum Operator {
   Answer = 'Answer',
 }
 
+export const operatorIconMap = {
+  [Operator.Retrieval]: RocketOutlined,
+  [Operator.Generate]: MergeCellsOutlined,
+  [Operator.Answer]: SendOutlined,
+  [Operator.Begin]: SlidersOutlined,
+};
+
 export const componentList = [
-  { name: Operator.Retrieval, icon: <RocketOutlined />, description: '' },
-  { name: Operator.Generate, icon: <MergeCellsOutlined />, description: '' },
-  { name: Operator.Answer, icon: <SendOutlined />, description: '' },
+  {
+    name: Operator.Retrieval,
+    description: '',
+  },
+  {
+    name: Operator.Generate,
+    description: '',
+  },
+  {
+    name: Operator.Answer,
+    description: '',
+  },
 ];
 
 export const initialRetrievalValues = {

web/src/pages/flow/flow-sider/index.tsx

-import { Avatar, Card, Flex, Layout, Space } from 'antd';
+import { Card, Flex, Layout, Space } from 'antd';
 import classNames from 'classnames';
 
 import { componentList } from '../constant';
 import { useHandleDrag } from '../hooks';
+import OperatorIcon from '../operator-icon';
 import styles from './index.less';
 
 const { Sider } = Layout;
       onCollapse={(value) => setCollapsed(value)}
     >
       <Flex vertical gap={10} className={styles.siderContent}>
-        {componentList.map((x) => (
-          <Card
-            key={x.name}
-            hoverable
-            draggable
-            className={classNames(styles.operatorCard)}
-            onDragStart={handleDragStart(x.name)}
-          >
-            <Flex justify="space-between" align="center">
-              <Space size={15}>
-                <Avatar icon={x.icon} shape={'square'} />
-                <section>
-                  <b>{x.name}</b>
-                  <div>{x.description}</div>
-                </section>
-              </Space>
-            </Flex>
-          </Card>
-        ))}
+        {componentList.map((x) => {
+          return (
+            <Card
+              key={x.name}
+              hoverable
+              draggable
+              className={classNames(styles.operatorCard)}
+              onDragStart={handleDragStart(x.name)}
+            >
+              <Flex justify="space-between" align="center">
+                <Space size={15}>
+                  <OperatorIcon name={x.name}></OperatorIcon>
+                  {/* <Avatar
+                    icon={<OperatorIcon name={x.name}></OperatorIcon>}
+                    shape={'square'}
+                  /> */}
+                  <section>
+                    <b>{x.name}</b>
+                    <div>{x.description}</div>
+                  </section>
+                </Space>
+              </Flex>
+            </Card>
+          );
+        })}
       </Flex>
     </Sider>
   );

web/src/pages/flow/operator-icon/index.less

+.icon {
+  color: rgb(59, 118, 244);
+  font-size: 24px;
+}

web/src/pages/flow/operator-icon/index.tsx

+import React from 'react';
+import { Operator, operatorIconMap } from '../constant';
+
+import styles from './index.less';
+
+interface IProps {
+  name: Operator;
+  fontSize?: number;
+}
+
+const OperatorIcon = ({ name, fontSize }: IProps) => {
+  const Icon = operatorIconMap[name] || React.Fragment;
+  return <Icon className={styles.icon} style={{ fontSize }}></Icon>;
+};
+
+export default OperatorIcon;