fix:The "No suitable component" error is appearing on the OpenAI component and other components due to a missing check.

[deekshanee]

Issue has been fixed here - #3273

Bug Description

We have noticed that a check is missing when displaying edge dots on the left side of the component. As a result, an unnecessary dot is appearing, causing confusion for users.

Screen.Recording.2024-08-10.at.4.10.31.AM.mov

Reproduction

1. Open Langflow.
2. Click on "Add New Project."
3. Select the "Basic Prompting" template.
4. You'll notice that the OpenAI node displays an unused edge dot on the left side.

Expected behavior

There shouldn't be any dot on the left side, as there isn't a suitable component for this node.

Who can help?

@anovazzi1 @Cristhianzl @lucaseduoli @igorrCarvalho

Operating System

Mac , Windows

Langflow Version

latest

Python Version

None

Screenshot

No response

Flow File

No response

[dosubot]

Hey @deekshanee! I'm here to help you with any bugs, questions, or contributions. Let's tackle this issue together.

To fix the "No suitable component" error in Langflow that causes an unnecessary edge dot to appear on the left side of the OpenAI component and other components, you need to ensure that the input_types and output_types of the components are correctly defined and compatible.

In the provided JSON, the OpenAIModel component has the following output_types:

"output_types": [
  "Text"
]

And the ChatInput component has the following input_types for the input_value field:

"input_types": []

The input_types for ChatInput should include Text to match the output_types of the OpenAIModel component. Update the input_types for the ChatInput component as follows:

"input_types": [
  "Text"
]

Here is the corrected part of the JSON for the ChatInput component:

{
  "id": "ChatInput-MsSJ9",
  "type": "genericNode",
  "position": {
    "x": -28.80036300619821,
    "y": 379.81180230285355
  },
  "data": {
    "type": "ChatInput",
    "node": {
      "template": {
        "code": {
          "type": "code",
          "required": true,
          "placeholder": "",
          "list": false,
          "show": true,
          "multiline": true,
          "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Interaction Panel.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [\"Text\"],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
          "fileTypes": [],
          "file_path": "",
          "password": false,
          "name": "code",
          "advanced": true,
          "dynamic": true,
          "info": "",
          "load_from_db": false,
          "title_case": false
        },
        "input_value": {
          "type": "str",
          "required": false,
          "placeholder": "",
          "list": false,
          "show": true,
          "multiline": true,
          "fileTypes": [],
          "file_path": "",
          "password": false,
          "name": "input_value",
          "display_name": "Message",
          "advanced": false,
          "input_types": ["Text"]
        }
      },
      "description": "Get chat inputs from the Interaction Panel.",
      "icon": "ChatInput",
      "base_classes": [
        "object",
        "str",
        "Text"
      ],
      "display_name": "Chat Input",
      "documentation": "",
      "custom_fields": {
        "input_value": null
      },
      "output_types": [
        "Text"
      ],
      "field_formatters": {},
      "frozen": false,
      "field_order": [],
      "beta": false
    },
    "id": "ChatInput-MsSJ9"
  },
  "selected": false,
  "width": 384,
  "height": 282,
  "positionAbsolute": {
    "x": -28.80036300619821,
    "y": 379.81180230285355
  },
  "dragging": false
}

This should resolve the "No suitable component" error and remove the unnecessary edge dot ^{[[1]](https://github.com/logspace-ai/langflow/blob/dev/src/backend/base/langflow/initial_setup/starter_projects/Langflow Document QA.json)}.

To continue talking to Dosu, mention @dosu.

[construindosites]

Também achei esse bug hoje e fiz um vídeo, mas é só deletar o componente openAI e adicionar outro no lugar que funciona.

(I also found this bug today and made a video, but just delete the openAI component and add another one in its place and it works.)

[construindosites]

Langflow-bug.webm

[deekshanee]

Também achei esse bug hoje e fiz um vídeo, mas é só deletar o componente openAI e adicionar outro no lugar que funciona.

(I also found this bug today and made a video, but just delete the openAI component and add another one in its place and it works.)

I have fixed this issue in general so that it will not be the problem. #3273

[deekshanee]

thanks @lucaseduoli It was my first contribution :)

[lucaseduoli]

You're welcome @deekshanee ! Feel free to contribute anytime! If you need any help understanding the code, you can message me and I'll be more than glad to help.

[deekshanee]

You're welcome @deekshanee ! Feel free to contribute anytime! If you need any help understanding the code, you can message me and I'll be more than glad to help.

Thanks @lucaseduoli , It will be my pleasure to connect with you on LinkedIn?