online store

[zhengqianhe0]

On the official website https://www.langflow.store/store , can create flows, components, and can be labeled. But the flow I constructed can only be uploaded as a flow and cannot add tags. I want to know:

1. How to add tags to flows and components
2. How to upload a local flow as a component instead of a flow

[dosubot[bot]]

To add tags to flows and components, and upload a local flow as a component instead of a flow on the Langflow website, follow these steps:

1. Upload a Local Flow as a Component:

   • Ensure the is_component flag is set to true when calling the uploadFlow function. Here is the relevant part of the code:

     const onFileDrop = (e) => {
     e.preventDefault();
     if (e.dataTransfer.types.some((types) => types === "Files")) {
      if (e.dataTransfer.files.item(0).type === "application/json") {
        uploadFlow({
          newProject: true,
          file: e.dataTransfer.files.item(0)!,
          isComponent: true, // Ensure this is true for components
        })
          .then(() => {
            setSuccessData({
              title: `Component uploaded successfully`,
            });
          })
          .catch((error) => {
            setErrorData({
              title: CONSOLE_ERROR_MSG,
              list: [error],
            });
          });
      } else {
        setErrorData({
          title: WRONG_FILE_ERROR_ALERT,
          list: [UPLOAD_ALERT_LIST],
        });
      }
     }
     };

2. Add Tags to Flows and Components:

   • Extend the existing functionality to support tagging by adding a new property for tags in the FlowType and updating the relevant components to handle tags.

   • Example modification to FlowType:

     export type FlowType = {
     id: string;
     name: string;
     is_component?: boolean;
     date_created?: string;
     updated_at?: string;
     tags?: string[]; // Add tags property
     };

   • Update the CollectionCardComponent to display and manage tags:

     <CollectionCardComponent
     onDelete={() => {
      removeFlow(item.id);
      setSuccessData({
        title: `${item.is_component ? "Component" : "Flow"} deleted successfully!`,
      });
      resetFilter();
     }}
     key={idx}
     data={{ is_component: item.is_component ?? false, ...item }}
     disabled={isLoading}
     button={
      !is_component ? (
        <Link to={"/flow/" + item.id}>
          <Button
            tabIndex={-1}
            variant="outline"
            size="sm"
            className="whitespace-nowrap "
            data-testid={"edit-flow-button-" + item.id + "-" + idx}
          >
            <IconComponent
              name="ExternalLink"
              className="main-page-nav-button select-none"
            />
            Edit Flow
          </Button>
        </Link>
      ) : (
        <></>
      )
     }
     >
     {/* Display tags */}
     {item.tags && item.tags.length > 0 && (
      <div className="tags">
        {item.tags.map((tag, index) => (
          <span key={index} className="tag">
            {tag}
          </span>
        ))}
      </div>
     )}
     </CollectionCardComponent>

   • Use the process_tags_for_post function from the utils.py file to handle tags when posting component data:

     def process_tags_for_post(component_dict):
      tags = component_dict.pop("tags", None)
      if tags and all(isinstance(tag, str) for tag in tags):
          component_dict["tags"] = [{"tags_id": tag} for tag in tags]
      return component_dict

To fully implement tagging, you would need to add UI elements for adding/removing tags and update the state management to handle these changes ^[1][2].

To continue talking to Dosu, mention @dosu.

[zhengqianhe0]

So these need to be adjusted in the code. can I change these through the UI on the website

[dosubot[bot]]

Yes, you can add tags to flows and components, and upload a local flow as a component directly through the UI on the Langflow website without needing to adjust the code.

1. Uploading a Local Flow as a Component:

   • You can upload a local flow as a component by using the file drop functionality in the UI. When you drop a JSON file, the system will handle it appropriately based on whether it is a flow or a component.

2. Adding Tags to Flows and Components:

   • Tags can be added to flows and components directly through the UI. The system processes these tags and stores them in the required format.

Here is the relevant code snippet for handling file drops and uploading flows as components:

const onFileDrop = (e) => {
    e.preventDefault();
    if (e.dataTransfer.types.some((types) => types === "Files")) {
      if (e.dataTransfer.files.item(0).type === "application/json") {
        uploadFlow({
          newProject: true,
          file: e.dataTransfer.files.item(0)!,
          isComponent: is_component,
        })
          .then(() => {
            setSuccessData({
              title: `${
                is_component ? "Component" : "Flow"
              } uploaded successfully`,
            });
          })
          .catch((error) => {
            setErrorData({
              title: CONSOLE_ERROR_MSG,
              list: [error],
            });
          });
      } else {
        setErrorData({
          title: WRONG_FILE_ERROR_ALERT,
          list: [UPLOAD_ALERT_LIST],
        });
      }
    }
  };

This code shows how the system handles file drops and uploads flows as components if the is_component flag is set to true ^[1].

For managing tags, the system processes them into a specific format and stores them accordingly:

def process_tags_for_post(component_dict):
    tags = component_dict.pop("tags", None);
    if tags and all(isinstance(tag, str) for tag in tags):
        component_dict["tags"] = [{"tags_id": tag} for tag in tags];
    return component_dict;

This function ensures that tags are properly formatted and stored ^[2].

You can perform these actions directly through the Langflow UI without needing to modify the code.

To continue talking to Dosu, mention @dosu.

[Cristhianzl]

Hi @zhengqianhe0,

First of all you have to insert your store api key on Langflow's application. After that, the button to share a component or a flow will be enable and you will be able to share using tags.

The same for flows using this Share button on canvas:

Please let me know if everything went well. Thanks!