🎨 style(constants.tsx): refactor getPythonApiCode, getCurlCode, and getPythonCode to separate functions

✨ feat(ApiModal): use getPythonApiCode and getCurlCode functions to generate python and curl code
✨ feat(cardComponent): add RenameLabel component to allow renaming of flow name and description
🐛 fix(cardComponent): fix CardDescription height to prevent overflow
The getPythonApiCode, getCurlCode, and getPythonCode functions were refactored into separate functions to improve code readability and maintainability. The ApiModal component now uses the getPythonApiCode and getCurlCode functions to generate the python and curl code. The CardComponent now has a RenameLabel component that allows renaming of the flow name and description. The CardDescription height was also fixed to prevent overflow.

src/frontend/src/constants.tsx

@@ -37,3 +37,47 @@ export const PROMPT_DIALOG_SUBTITLE = "Edit you prompt.";
  * @constant
  */
 export const TEXT_DIALOG_SUBTITLE = "Edit you text.";
+
+/**
+ * Function to get the python code for the API
+ * @param {string} flowId - The id of the flow
+ * @returns {string} - The python code
+ */
+export const getPythonApiCode = (flowId: string): string => {
+  return `import requests
+
+  FLOW_ID = "${flowId}"
+  API_URL = f"${window.location.protocol}//${window.location.host}/predict/{FLOW_ID}"
+
+  def predict(message):
+      payload = {'message': message}
+      response = requests.post(API_URL, json=payload)
+      return response.json()
+
+  print(predict("Your message"))`;
+};
+
+/**
+ * Function to get the curl code for the API
+ * @param {string} flowId - The id of the flow
+ * @returns {string} - The curl code
+ */
+export const getCurlCode = (flowId: string): string => {
+  return `curl -X POST \\
+  -H "Content-Type: application/json" \\
+  -d '{"message": "Your message"}' \\
+  ${window.location.protocol}//${window.location.host}/predict/${flowId}`;
+};
+
+/**
+ * Function to get the python code for the API
+ * @param {string} flowName - The name of the flow
+ * @returns {string} - The python code
+ */
+export const getPythonCode = (flowName: string): string => {
+  return `from langflow import load_flow_from_json
+
+    flow = load_flow_from_json("${flowName}.json")
+    # Now you can use it like any chain
+    flow("Hey, have you heard of LangFlow?")`;
+};

src/frontend/src/modals/ApiModal/index.tsx

@@ -25,6 +25,7 @@ import {
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
 import { FlowType } from "src/types/flow";
+import { getCurlCode, getPythonApiCode, getPythonCode } from "../../constants";
 
 export default function ApiModal({ flow }: { flow: FlowType }) {
   const [open, setOpen] = useState(true);
@@ -53,28 +54,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
     }
   }
 
-  const pythonApiCode = `import requests
+  const pythonApiCode = getPythonApiCode(flow.id);
 
-FLOW_ID = "${flow.id}"
-API_URL = f"${window.location.protocol}//${window.location.host}/predict/{FLOW_ID}"
-
-def predict(message):
-    payload = {'message': message}
-    response = requests.post(API_URL, json=payload)
-    return response.json()
-
-print(predict("Your message"))`;
-
-  const curl_code = `curl -X POST \\
-  -H "Content-Type: application/json" \\
-  -d '{"message": "Your message"}' \\
-  ${window.location.protocol}//${window.location.host}/predict/${flow.id}`;
-
-  const pythonCode = `from langflow import load_flow_from_json
-
-flow = load_flow_from_json("${flow.name}.json")
-# Now you can use it like any chain
-flow("Hey, have you heard of LangFlow?")`;
+  const curl_code = getCurlCode(flow.id);
+  const pythonCode = getPythonCode(flow.name);
 
   const tabs = [
     {

src/frontend/src/pages/MainPage/components/cardComponent/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext, useState } from "react";
 import {
   ArrowTopRightOnSquareIcon,
   TrashIcon,
@@ -15,6 +15,11 @@ import {
   CardTitle,
 } from "../../../../components/ui/card";
 import { FlowType } from "../../../../types/flow";
+import RenameLabel from "../../../../components/ui/rename-label";
+import _ from "lodash";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import { alertContext } from "../../../../contexts/alertContext";
+import { updateFlowInDatabase } from "../../../../controllers/API";
 export const CardComponent = ({
   flow,
   idx,
@@ -28,31 +33,38 @@ export const CardComponent = ({
   setTabIndex: (idx: number) => void;
   setActiveTab: (tab: string) => void;
 }) => {
-  // flow has a style attribute
-  // if it is empty just get a random style
-  // if it is not empty use that style
-  // if it is not empty and it is not a valid style get a random style
+  const { setErrorData } = useContext(alertContext);
+  const { updateFlow } = useContext(TabsContext);
+  function handleSaveFlow(flow) {
+    try {
+      updateFlowInDatabase(flow);
+      updateFlow(flow);
+      // updateFlowStyleInDataBase(flow);
+    } catch (err) {
+      setErrorData(err);
+    }
+  }
+  const [rename, setRename] = useState(false);
 
-  let emoji = flow.style?.emoji || "🤖";
-  // get random tailwind color
-  let color = flow.style?.color || "bg-blue-200";
   return (
     <Card className="group">
       <CardHeader>
         <CardTitle className="flex justify-between items-start">
           <div className="flex gap-4 items-center">
-            {/* <span
-              className={
-                "rounded-md w-10 h-10 flex items-center justify-center text-2xl " +
-                color
-              }
-            >
-              {emoji}
-            </span> */}
-            {flow.name}
+            <RenameLabel
+              value={flow.name}
+              setValue={(value) => {
+                if (value !== "") {
+                  let newFlow = _.cloneDeep(flow);
+                  newFlow.name = value;
+                  handleSaveFlow(newFlow);
+                }
+              }}
+              rename={rename}
+              setRename={setRename}
+            />
           </div>
           <div className="flex gap-5">
-            {/* make the icons shake a bit on hover */}
             <Edit
               className="w-4"
               onClick={() => {
@@ -68,13 +80,23 @@ export const CardComponent = ({
             />
           </div>
         </CardTitle>
-        <CardDescription className="pt-2 pb-2">
-          <div className="truncate-doubleline">
-            {idx === 0
-              ? "This flow creates an agent that accesses a department store database and APIs to monitor customer activity and overall storage."
-              : "This is a new Flow"}
-            {/* {flow.description} */}
-          </div>
+        <CardDescription className="pt-2 pb-2 h-10">
+          {/* <div className="flex gap-2"> */}
+          <RenameLabel
+            className="truncate-doubleline w-full h-full"
+            placeholder="Description"
+            value={flow.description || "Description"}
+            setValue={(value) => {
+              if (value !== "") {
+                let newFlow = _.cloneDeep(flow);
+                newFlow.description = value;
+                handleSaveFlow(newFlow);
+              }
+            }}
+            rename={rename}
+            setRename={setRename}
+          />
+          {/* </div> */}
         </CardDescription>
       </CardHeader>