[Component Output] Custom component does not display output connection points in Langflow UI

[lxwboxs]

Title:

[Component Output] Custom component does not display output connection points in Langflow UI

Description:

I created a custom component called SimpleDirectoryReaderComponent on the Langflow platform. Although it should output data of type Document, the expected output connection point is not displayed on the canvas of the UI.

Reproduction steps:

1. Create a new Custom Component class in the editor of Langflow platform.

2. Implement build and build_ The config method.

3. Build and connect components on the canvas.

The observed behavior is that the component does not display output connection points.

Expected behavior:

The component should have an output connection point that allows me to connect it to subsequent components.

Environment:

-Langflow version: 0.6.4

-Operating system: Windows 10

-Browser: Chrome 90

Additional information:

I have confirmed that the build method correctly returned the Document object and did not catch any exceptions in the code. I have attached the code for the components and screenshots of the UI.

Code path: langflow.components.documentloaders.SimpleDirectoryReaderLoader.SimpleDirectoryReaderComponent

# from langchain.schema import Document
from langchain_core.documents import Document

from langflow import CustomComponent
from langflow.components.documentloaders.FileLoader import FileLoaderComponent
from langflow.utils.constants import LOADERS_INFO


class SimpleDirectoryReaderComponent(CustomComponent):
    output_types: list[str] = ["Document"]
    display_name: str = "SimpleDirectoryReader Loader"
    description: str = "Generic SimpleDirectoryReader Loader"
    beta = True
    def build_config(self):
        print("FileLoaderComponent.build_config")
        loader_options = ["Automatic"] + [loader_info["name"] for loader_info in LOADERS_INFO]

        file_types = []
        suffixes = []

        for loader_info in LOADERS_INFO:
            if "allowedTypes" in loader_info:
                file_types.extend(loader_info["allowedTypes"])
                suffixes.extend([f".{ext}" for ext in loader_info["allowedTypes"]])

        return {
            "file_path": {
                "display_name": "File Path",
                "required": True,
                "field_type": "file",
                "file_types": [
                    "json",
                    "txt",
                    "csv",
                    "jsonl",
                    "html",
                    "htm",
                    "conllu",
                    "enex",
                    "msg",
                    "pdf",
                    "srt",
                    "eml",
                    "md",
                    "pptx",
                    "docx",
                ],
                "suffixes": [
                    ".json",
                    ".txt",
                    ".csv",
                    ".jsonl",
                    ".html",
                    ".htm",
                    ".conllu",
                    ".enex",
                    ".msg",
                    ".pdf",
                    ".srt",
                    ".eml",
                    ".md",
                    ".pptx",
                    ".docx",
                ],
                # "file_types" : file_types,
                # "suffixes": suffixes,
            },
            "loader": {
                "display_name": "Loader",
                "is_list": True,
                "required": True,
                "options": loader_options,
                "value": "Automatic",
            },
            "code": {"show": False},
        }

    def build(self, file_path: str, loader: str) -> Document:
        print("FileLoaderComponent.build")
        print(file_path)
        file_type = file_path.split(".")[-1]
        from llama_index import SimpleDirectoryReader
        documents = SimpleDirectoryReader(
            input_files=[file_path]
        ).load_data()

        if documents:
            idx = documents[0]  # Assuming you want the first document

            # Use metadata from idx and override other properties
            document = Document(
                page_content=idx.text,
                metadata={**idx.metadata, 'additional_key': 'additional_value'}
                # You can add or modify additional key-value pairs in the metadata dictionary
            )

            return document
        else:
            # Return a default Document or handle the case when no documents are found
            return Document(page_content="", metadata={})

    # def build(self, file_path: str, loader: str) -> Document:
    #     print("FileLoaderComponent.build")
    #     print(file_path)
    #     file_type = file_path.split(".")[-1]
    #
    #     # Mapeie o nome do loader selecionado para suas informações
    #     selected_loader_info = None
    #     for loader_info in LOADERS_INFO:
    #         if loader_info["name"] == loader:
    #             selected_loader_info = loader_info
    #             break
    #
    #     if selected_loader_info is None and loader != "Automatic":
    #         raise ValueError(f"Loader {loader} not found in the loader info list")
    #
    #     if loader == "Automatic":
    #         # Determine o loader automaticamente com base na extensão do arquivo
    #         default_loader_info = None
    #         for info in LOADERS_INFO:
    #             if "defaultFor" in info and file_type in info["defaultFor"]:
    #                 default_loader_info = info
    #                 break
    #
    #         if default_loader_info is None:
    #             raise ValueError(f"No default loader found for file type: {file_type}")
    #
    #         selected_loader_info = default_loader_info
    #     if isinstance(selected_loader_info, dict):
    #         loader_import: str = selected_loader_info["import"]
    #     else:
    #         raise ValueError(f"Loader info for {loader} is not a dict\nLoader info:\n{selected_loader_info}")
    #     module_name, class_name = loader_import.rsplit(".", 1)
    #
    #     try:
    #         # Importe o loader dinamicamente
    #         loader_module = __import__(module_name, fromlist=[class_name])
    #         loader_instance = getattr(loader_module, class_name)
    #     except ImportError as e:
    #         raise ValueError(f"Loader {loader} could not be imported\nLoader info:\n{selected_loader_info}") from e
    #
    #     result = loader_instance(file_path=file_path)
    #     return result.load()

Thank you for your time and help.

[dosubot]

🤖

Hello @lxwboxs! 👋

I'm Dosu, a bot here to assist you with your issues, questions, or if you're looking to contribute to the project. While we wait for a human maintainer, I'm here to offer what help I can in the meantime. Let's dive into solving this bug together! 😃

Based on the code you provided, it seems like your custom component SimpleDirectoryReaderComponent is correctly defined to output data of type Document. However, the issue might be related to how the Langflow UI is interpreting the output types of your component.

In your SimpleDirectoryReaderComponent class, you have defined output_types as a list of strings:

output_types: list[str] = ["Document"]

This should be correct as per the Langflow's custom component structure. However, it's possible that the UI is not correctly interpreting this output type.

One thing you could try is to explicitly define the output types in the build method's return type hint, like this:

def build(self, file_path: str, loader: str) -> 'Document':
    # Your code here

This might help the UI correctly interpret the output type of your component.

If this doesn't solve your issue, it would be helpful if you could provide more information about how you're adding your custom component to the Langflow UI. Are you adding it through the UI's component library, or are you adding it programmatically through the Langflow API? This information could help us better understand the issue.

Also, please make sure that your Langflow version is up-to-date. The latest version is v0.6.4. If you're using an older version, please update it and try again.

For more information about creating custom components in Langflow, you can refer to the CustomComponent.py file in the Langflow repository.

I hope this helps! If you have any more questions or if the issue persists, please let me know.

Best regards,
Dosu

Sources

• src/backend/langflow/components/custom_components/CustomComponent.py
• src/backend/langflow/interface/custom/custom_component/component.py

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[lxwboxs]

No, what you said doesn't solve my problem,

I customized the components according to the document（ https://docs.langflow.org/guidelines/custom-component ）The example given is written in the hope that community members can provide answers

[dosubot]

🤖

@ogabrielluiz, this one's a bit out of my wheelhouse, could you step in and provide your guidance?

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.