Fix/validation in add new prompt studio (#60)

* Add validation in add new tool from prompt studio * Handle error validation for update API deployment
Zipstack · Mar 6, 2024 · 28f7e20 · 28f7e20
1 parent 22a0c58
commit 28f7e20
Show file tree

Hide file tree

Showing 12 changed files with 308 additions and 181 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,6 +17,8 @@
     "antd": "^5.5.1",
     "axios": "^1.4.0",
     "cron-validator": "^1.3.1",
+    "emoji-picker-react": "^4.8.0",
+    "emoji-regex": "^10.3.0",
     "handlebars": "^4.7.8",
     "http-proxy-middleware": "^2.0.6",
     "js-yaml": "^4.1.0",

diff --git a/frontend/src/components/agency/cards-list/CardsList.jsx b/frontend/src/components/agency/cards-list/CardsList.jsx
@@ -1,5 +1,5 @@
 import { CloseOutlined } from "@ant-design/icons";
-import { Card, Col, Image, Progress, Row, Typography } from "antd";
+import { Card, Col, Progress, Row, Typography } from "antd";
 import PropTypes from "prop-types";
 import { useRef } from "react";
 import { useDrag, useDrop } from "react-dnd";
@@ -13,6 +13,7 @@ import { useWorkflowStore } from "../../../store/workflow-store";
 import { ConfirmModal } from "../../widgets/confirm-modal/ConfirmModal";
 import "../step-card/StepCard.css";
 import "./CardList.css";
+import { ToolIcon } from "../tool-icon/ToolIcon";
 
 const CardsList = ({ step, index, activeTool, moveItem }) => {
   const ref = useRef(null);
@@ -143,12 +144,7 @@ const CardsList = ({ step, index, activeTool, moveItem }) => {
             <div className="card-col-div">
               <Row align="middle">
                 <Col span={2}>
-                  <Image
-                    src={`data:image/svg+xml,${encodeURIComponent(step?.icon)}`}
-                    preview={false}
-                    height={20}
-                    width={20}
-                  />
+                  <ToolIcon iconSrc={step?.icon} showBorder={false} />
                 </Col>
                 <Col span={21}>
                   <div className="step-name">

diff --git a/frontend/src/components/agency/side-panel/SidePanel.jsx b/frontend/src/components/agency/side-panel/SidePanel.jsx
@@ -40,6 +40,10 @@ function SidePanel() {
     setActiveTabKey(key.toString());
   };
 
+  const isObjectEmpty = (obj) => {
+    return Object.keys(obj).length === 0;
+  };
+
   useEffect(() => {
     const toolSettingsId = toolSettings?.tool_id;
     if (!toolSettingsId) {
@@ -65,8 +69,15 @@ function SidePanel() {
       setSpecLoading(true);
       axiosPrivate(requestOptions)
         .then((res) => {
-          setToolId(toolSettingsId);
-          setSpec(res?.data);
+          if (isObjectEmpty(res?.data?.properties)) {
+            // Disable tool settings & switch to Tools tab - when custom tool is selected
+            setSpec({});
+            setToolId("");
+            setActiveTabKey("1");
+          } else {
+            setToolId(toolSettingsId);
+            setSpec(res?.data);
+          }
         })
         .catch((err) => {})
         .finally(() => {

diff --git a/frontend/src/components/agency/tool-icon/ToolIcon.jsx b/frontend/src/components/agency/tool-icon/ToolIcon.jsx
@@ -1,29 +1,54 @@
 import { Image } from "antd";
+import emojiRegex from "emoji-regex";
 import PropTypes from "prop-types";
 
 import "./ToolIcon.css";
-import { useEffect, useState } from "react";
 
-function ToolIcon({ iconSrc }) {
-  const [svgDataUri, setSvgDataUri] = useState("");
-  useEffect(() => {
-    if (!iconSrc) {
-      setSvgDataUri("");
-      return;
-    }
+function ToolIcon({ iconSrc, showBorder }) {
+  const emojiregex = emojiRegex();
+  const isSVG =
+    iconSrc && typeof iconSrc === "string" && iconSrc.includes("<svg");
 
+  if (isSVG) {
+    // If it's an SVG, render it as an image
     const uri = `data:image/svg+xml,${encodeURIComponent(iconSrc)}`;
-    setSvgDataUri(uri);
-  }, [iconSrc]);
-  return (
-    <div className="tool-icon-border display-flex-center">
-      <Image src={svgDataUri} preview={false} height={30} width={30} />
-    </div>
-  );
+    return (
+      <div
+        className={`display-flex-center ${
+          showBorder ? "tool-icon-border" : ""
+        }`}
+      >
+        <Image src={uri} preview={false} height={30} width={30} />
+      </div>
+    );
+  } else if (typeof iconSrc === "string" && emojiregex.test(iconSrc)) {
+    // If it's a string, render it using Typography
+    return (
+      <div
+        className={`display-flex-center ${
+          showBorder ? "tool-icon-border" : ""
+        }`}
+      >
+        {iconSrc}
+      </div>
+    );
+  } else {
+    // Handle other cases if needed
+    return (
+      <div
+        className={`display-flex-center ${
+          showBorder ? "tool-icon-border" : ""
+        }`}
+      >
+        {"🧰"}
+      </div>
+    );
+  }
 }
 
 ToolIcon.propTypes = {
   iconSrc: PropTypes.string,
+  showBorder: PropTypes.bool,
 };
 
 export { ToolIcon };
diff --git a/frontend/src/components/agency/tool-info-card/ToolInfoCard.jsx b/frontend/src/components/agency/tool-info-card/ToolInfoCard.jsx
@@ -15,7 +15,7 @@ function ToolInfoCard({ toolInfo }) {
     <Card className="toolinfo-card" ref={ref}>
       <Row>
         <Col span={4}>
-          <ToolIcon iconSrc={toolInfo?.icon} />
+          <ToolIcon iconSrc={toolInfo?.icon} showBorder={true} />
         </Col>
         <Col span={20}>
           <div className="tool-info-header">

diff --git a/frontend/src/components/custom-tools/add-custom-tool-form-modal/AddCustomToolFormModal.css b/frontend/src/components/custom-tools/add-custom-tool-form-modal/AddCustomToolFormModal.css
@@ -7,4 +7,9 @@
 
 .add-cus-tool-gap {
     margin-bottom: 16px;
-}
+}
+
+.emoji-modal .ant-modal-content {
+    padding: 0;
+    width: fit-content;
+  }