Merge pull request #352 from kreneskyp/svg_icons

SVG Icons
kreneskyp · Dec 17, 2023 · 5ea5154 · 5ea5154
2 parents 6e3a1a2 + 6973058
commit 5ea5154
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 10 deletions.
diff --git a/frontend/chains/editor/styles.js b/frontend/chains/editor/styles.js
@@ -20,6 +20,9 @@ import { ChainNode } from "chains/flow/ChainNode";
 import { BranchNode } from "chains/flow/BranchNode";
 import { MapNode } from "chains/flow/MapNode";
 import { RootNode } from "chains/flow/RootNode";
+import { LoopIcon } from "icons/LoopIcon";
+import { SplitIcon } from "icons/SplitIcon";
+import { MergeIcon } from "icons/MergeIcon";
 
 export const NODE_STYLES = {
   llm: {
@@ -35,7 +38,9 @@ export const NODE_STYLES = {
     component: ChainNode,
   },
   flow: {
-    icon: faList,
+    icon: {
+      component: LoopIcon,
+    },
     component: ChainNode,
   },
   memory: {
@@ -92,11 +97,15 @@ export const NODE_STYLES = {
     icon: faBrain,
   },
   branch: {
-    icon: faArrowRightFromBracket,
+    icon: {
+      component: SplitIcon,
+    },
     component: BranchNode,
   },
   map: {
-    icon: faArrowRightToBracket,
+    icon: {
+      component: MergeIcon,
+    },
     component: MapNode,
   },
   root: {

diff --git a/frontend/chains/flow/ConfigNode.js b/frontend/chains/flow/ConfigNode.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useMemo } from "react";
-import { Box, Flex, Heading, VStack } from "@chakra-ui/react";
+import { Box, Flex, Heading, HStack, Text, VStack } from "@chakra-ui/react";
 import { Handle, useEdges, useReactFlow } from "reactflow";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -232,10 +232,12 @@ export const ConfigNode = ({ id, data, selected }) => {
           className="drag-handle"
         >
           <Flex alignItems="center" justifyContent="space-between" width="100%">
-            <Box pr={5}>
+            <HStack pr={5} h={"16px"}>
               <StyledIcon style={styles?.icon} />{" "}
-              {node.name || type?.name || node.class_path.split(".").pop()}
-            </Box>
+              <Text>
+                {node.name || type?.name || node.class_path.split(".").pop()}
+              </Text>
+            </HStack>
             <DeleteIcon node={node} />
           </Flex>
         </Heading>

diff --git a/frontend/icons/ChatHistoryIcon.js b/frontend/icons/ChatHistoryIcon.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMessage, faClock } from "@fortawesome/free-solid-svg-icons";
+import { useColorMode } from "@chakra-ui/color-mode";
+import { Box } from "@chakra-ui/layout";
+import { StackableIcon } from "icons/StackableIcon";
+import { IndicatorIcon } from "icons/IndicatorIcon";
+
+const ChatHistoryIcon = () => {
+  const { colorMode } = useColorMode();
+  const iconColor = colorMode === "light" ? "gray.200" : "black";
+
+  return (
+    <StackableIcon>
+      <FontAwesomeIcon icon={faMessage} size={"sm"} />
+      <IndicatorIcon indicatorSize={11}>
+        <FontAwesomeIcon icon={faClock} />
+      </IndicatorIcon>
+    </StackableIcon>
+  );
+};
+
+export default ChatHistoryIcon;
diff --git a/frontend/icons/IndicatorIcon.js b/frontend/icons/IndicatorIcon.js
@@ -11,8 +11,8 @@ export const IndicatorIcon = ({ children, color, indicatorSize }) => {
     bottom: 0,
     right: 0,
     transform: "translate(40%, 0%)",
-    width: indicatorSize + 2 + "px", // Adjust size as needed
-    height: indicatorSize + 2 + "px", // Adjust size as needed
+    width: (indicatorSize || 11) + 2 + "px", // Adjust size as needed
+    height: (indicatorSize || 11) + 2 + "px", // Adjust size as needed
     borderRadius: "50%",
     display: "flex",
     justifyContent: "center",

diff --git a/frontend/icons/LoopIcon.js b/frontend/icons/LoopIcon.js
@@ -0,0 +1,13 @@
+import React from "react";
+import SVGIcon from "icons/SVGIcon";
+
+export const LoopIcon = ({ ...props }) => {
+  return (
+    <SVGIcon {...props}>
+      <path
+        d="m82.133 14.266v16.668h17.199c13.465 0 24.535 11.066 24.535 24.535v33.734c0 13.465-11.066 24.535-24.535 24.535h-70.668c-13.465-0.003906-24.531-11.07-24.531-24.539v-33.734c0-13.465 11.066-24.535 24.535-24.535h13.734v14.934l-13.734 0.003907c-5.1992 0-9.6016 4.2656-9.6016 9.6016v33.734c0 5.1992 4.2656 9.6016 9.6016 9.6016h70.668c5.1992 0 9.6016-4.2656 9.6016-9.6016l-0.003906-33.738c0-5.1992-4.2656-9.6016-9.6016-9.6016l-17.199 0.003907v16.801l-28.668-24.133z"
+        fill-rule="evenodd"
+      />
+    </SVGIcon>
+  );
+};
diff --git a/frontend/icons/MergeIcon.js b/frontend/icons/MergeIcon.js
@@ -0,0 +1,13 @@
+import React from "react";
+import SVGIcon from "icons/SVGIcon";
+
+export const MergeIcon = ({ ...props }) => {
+  return (
+    <SVGIcon transform="rotate(270deg)" {...props}>
+      <path
+        d="M 34.451172 14.640625 L 34.451172 51.921875 C 34.451172 65.156275 45.371861 76.027344 58.611328 76.027344 L 74.826172 76.027344 L 74.826172 122.48047 L 51.542969 122.48047 C 52.548279 123.66844 73.896271 148.94757 85.302734 162.36914 C 96.699189 148.94727 118.11464 123.6679 119.125 122.48047 L 95.841797 122.48047 L 95.841797 76.027344 L 112.05469 76.027344 C 125.28909 76.027344 136.2168 65.156142 136.2168 51.921875 L 136.2168 14.640625 L 120.48047 14.640625 L 120.48047 51.921875 C 120.48047 56.713608 116.84629 60.296875 112.05469 60.296875 L 58.617188 60.296875 C 53.825454 60.296875 50.189453 56.713475 50.189453 51.921875 L 50.189453 14.640625 L 34.451172 14.640625 z "
+        transform="scale(0.75)"
+      />
+    </SVGIcon>
+  );
+};
diff --git a/frontend/icons/SVGIcon.js b/frontend/icons/SVGIcon.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { Box, useToken } from "@chakra-ui/react";
+
+export const SVGIcon = ({ color, bg, children, svgProps, ...props }) => {
+  const colorToken = useToken("colors", color || "white");
+
+  return (
+    <Box display={"inline-block"} m={0} p={0} {...props}>
+      <svg
+        width="1.2em"
+        height="1.2em"
+        viewBox="0 0 128 128"
+        fill={colorToken}
+        {...(svgProps || {})}
+      >
+        {children}
+      </svg>
+    </Box>
+  );
+};
+
+export default SVGIcon;
diff --git a/frontend/icons/SplitIcon.js b/frontend/icons/SplitIcon.js
@@ -0,0 +1,10 @@
+import React from "react";
+import SVGIcon from "icons/SVGIcon";
+
+export const SplitIcon = ({ ...props }) => {
+  return (
+    <SVGIcon transform="rotate(90deg)" {...props}>
+      <path d="m31.719 8.6016c-8.5547 10.066-24.566 29.027-25.32 29.918h19.441v27.961c0 9.9258 8.1914 18.078 18.121 18.078h12.16v34.84h15.762v-34.84h12.16c9.9258 0 18.121-8.1523 18.121-18.078v-27.961h19.441c-0.75781-0.89062-16.809-19.852-25.367-29.918-8.5547 10.066-24.566 29.027-25.316 29.918h19.441v27.961c0 3.5938-2.7266 6.2812-6.3203 6.2812h-40.078c-3.5938 0-6.3203-2.6875-6.3203-6.2812v-27.961h19.441c-0.75781-0.89062-16.82-19.852-25.367-29.918z" />
+    </SVGIcon>
+  );
+};
diff --git a/frontend/site/Navigation.js b/frontend/site/Navigation.js
@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import { useColorMode } from "@chakra-ui/color-mode";
 import { SecretsMenuItem } from "secrets/SecretsMenuItem";
 import { MenuItem } from "site/MenuItem";
+import ChatHistoryIcon from "icons/ChatHistoryIcon";
 
 function Navigation() {
   const { colorMode } = useColorMode();
@@ -25,7 +26,7 @@ function Navigation() {
       <Stack spacing={3}>
         <Link ml={3} to="/chats">
           <MenuItem title="Chat History">
-            <FontAwesomeIcon icon={faMessage} />
+            <ChatHistoryIcon />
           </MenuItem>
         </Link>
         {false && (