Custom Components Info

[SVyusti]

@dosu custom component with default value as None and can also take input as text or can be provided from another component

[dosubot[bot]]

To create a custom component that has a default value of None but can also accept input as text or be provided from another component, you can define the component with a field that has a default value of None and handle the input accordingly. Here is an example:

class YourComponent(CustomComponent):
    display_name: str = "Your Component"
    description: str = "Your description"
    field_config = {
        "input_field": {
            "multiline": False,
            "required": False,
            "default": None
        }
    }

    def build(self, input_field: str = None, llm: BaseLanguageModel = None, template: Prompt = None) -> Document:
        if input_field is None:
            input_field = "Default text"
        # Process the input_field as needed
        response = requests.get(input_field)
        prompt = PromptTemplate.from_template(template)
        chain = LLMChain(llm=llm, prompt=prompt)
        result = chain.run(response.text[:300])
        return Document(page_content=str(result))

In this example:

• input_field is defined in field_config with a default value of None.
• The build method accepts input_field with a default value of None.
• If input_field is None, it is assigned a default text value.
• The rest of the processing is done as needed.

Additionally, if you are working with a UI component like CustomInputPopoverObject from the Langflow library, you can handle the input field and its default value as follows:

import { PopoverAnchor } from "@radix-ui/react-popover";
import { classNames, cn } from "../../../../utils/utils";
import ForwardedIconComponent from "../../../genericIconComponent";
import {
  Command,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "../../../ui/command";
import { Input } from "../../../ui/input";
import {
  Popover,
  PopoverContent,
  PopoverContentWithoutPortal,
} from "../../../ui/popover";

const CustomInputPopoverObject = ({
  id,
  refInput,
  onInputLostFocus,
  selectedOption,
  setSelectedOption,
  selectedOptions,
  setSelectedOptions,
  value,
  autoFocus,
  disabled,
  setShowOptions,
  required,
  editNode,
  className,
  placeholder,
  onChange,
  blurOnEnter,
  options,
  optionsPlaceholder,
  optionButton,
  optionsButton,
  handleKeyDown,
  showOptions,
}) => {
  const PopoverContentInput = editNode
    ? PopoverContent
    : PopoverContentWithoutPortal;

  const handleInputChange = (e) => {
    onChange && onChange(e.target.value);
  };

  return (
    <Popover modal open={showOptions} onOpenChange={setShowOptions}>
      <PopoverAnchor>
        <Input
          id={id}
          ref={refInput}
          type="text"
          onBlur={onInputLostFocus}
          value={
            (selectedOption !== "" || !onChange) && setSelectedOption
              ? options.find((option) => option.id === selectedOption)?.name || ""
              : (selectedOptions?.length !== 0 || !onChange) && setSelectedOptions
              ? selectedOptions
                  .map(
                    (optionId) =>
                      options.find((option) => option.id === optionId)?.name
                  )
                  .join(", ")
              : value
          }
          autoFocus={autoFocus}
          disabled={disabled}
          onClick={() => {
            (((selectedOption !== "" || !onChange) && setSelectedOption) ||
              ((selectedOptions?.length !== 0 || !onChange) && setSelectedOptions)) &&
              setShowOptions(true);
          }}
          required={required}
          className={classNames(className!)}
          placeholder={placeholder}
          onChange={handleInputChange}
          onKeyDown={(e) => {
            handleKeyDown(e);
            if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
          }}
          data-testid={id}
        />
      </PopoverAnchor>
      <PopoverContentInput
        className="nocopy nowheel nopan nodelete nodrag noundo p-0"
        style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
        side="bottom"
        align="center"
      >
        <Command
          filter={(value, search) => {
            if (
              value.toLowerCase().includes(search.toLowerCase()) ||
              value.includes("doNotFilter-")
            )
              return 1;
            return 0;
          }}
        >
          <CommandInput placeholder={optionsPlaceholder} />
          <CommandList>
            <CommandGroup defaultChecked={false}>
              {options.map((option, index) => (
                <CommandItem
                  className="group"
                  key={option.id}
                  value={option.id}
                  onSelect={(currentValue) => {
                    setSelectedOption &&
                      setSelectedOption(
                        currentValue === selectedOption ? "" : currentValue
                      );
                    setSelectedOptions &&
                      setSelectedOptions(
                        selectedOptions?.includes(currentValue)
                          ? selectedOptions.filter(
                              (item) => item !== currentValue
                            )
                          : [...selectedOptions, currentValue]
                      );
                    !setSelectedOptions && setShowOptions(false);
                  }}
                >
                  <div className="group flex w-full items-center justify-between">
                    <div className="flex items-center">
                      <div
                        className={cn(
                          "relative mr-2 h-4 w-4",
                          selectedOption === option.id ||
                            selectedOptions?.includes(option.id)
                            ? "opacity-100"
                            : "opacity-0"
                        )}
                      >
                        <div className="absolute opacity-100 transition-all group-hover:opacity-0">
                          <ForwardedIconComponent
                            name="Check"
                            className="mr-2 h-4 w-4 text-primary"
                            aria-hidden="true"
                          />
                        </div>
                        <div className="absolute opacity-0 transition-all group-hover:opacity-100">
                          <ForwardedIconComponent
                            name="X"
                            className="mr-2 h-4 w-4 text-status-red"
                            aria-hidden="true"
                          />
                        </div>
                      </div>
                      <span data-testid={`option-${index}`}>
                        {option.name}{" "}
                      </span>
                    </div>
                    {optionButton && optionButton(option)}
                  </div>
                </CommandItem>
              ))}
              {optionsButton && optionsButton}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContentInput>
    </Popover>
  );
};

export default CustomInputPopoverObject;

This example demonstrates how to handle input changes, manage default values, and integrate with other components using a popover for input selection ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[SVyusti]

@dosu can a component return 2 strings as an output and these 2 strings should be further connected to 2 different custom components

[dosubot[bot]]

Yes, a component can return two strings as an output, and these two strings can be further connected to two different custom components.

For example, the PromptTemplate component can be configured to output multiple strings. These outputs can then be connected to different custom components such as ChatOutput and ChatInput.

Here is an example configuration:

1. Configure the PromptTemplate to output two strings:

{
    "type": "PromptTemplate",
    "node": {
        "template": {
            "output_parser": {
                "type": "BaseOutputParser",
                "list": true,
                "value": ["output1", "output2"]
            },
            "input_variables": {
                "type": "str",
                "list": true,
                "value": ["input"]
            },
            "template": {
                "type": "prompt",
                "value": "Input: {input}\nAI:"
            }
        }
    }
}

2. Connect the outputs to different custom components:

{
    "nodes": [
        {
            "id": "PromptTemplate-CweKz",
            "type": "PromptTemplate",
            "data": {
                "output_parser": ["output1", "output2"]
            }
        },
        {
            "id": "ChatOutput-1",
            "type": "ChatOutput",
            "data": {
                "message": "output1"
            }
        },
        {
            "id": "ChatInput-1",
            "type": "ChatInput",
            "data": {
                "message": "output2"
            }
        }
    ],
    "edges": [
        {
            "source": "PromptTemplate-CweKz",
            "target": "ChatOutput-1",
            "sourceHandle": "output1",
            "targetHandle": "message"
        },
        {
            "source": "PromptTemplate-CweKz",
            "target": "ChatInput-1",
            "sourceHandle": "output2",
            "targetHandle": "message"
        }
    ]
}

In this configuration, the PromptTemplate component outputs two strings (output1 and output2), which are then connected to the ChatOutput and ChatInput custom components, respectively ^[1].

To continue talking to Dosu, mention @dosu.

[SVyusti]

How can I provide None value as an option for a custom component

[dosubot[bot]]

To provide None as an option for a custom component, you need to configure the component's input field to allow None as a valid value. This can be done by setting the required attribute to False in the field_config dictionary.

Here is an example of how to do this:

class YourComponent(CustomComponent):
    display_name: str = "Your Component"
    description: str = "Your description"
    field_config = {
        "input_field": {
            "multiline": False,
            "required": False,
            "default": None
        }
    }

    def build(self, input_field: str = None, llm: BaseLanguageModel = None, template: Prompt = None) -> Document:
        if input_field is None:
            input_field = "Default text"
        # Process the input_field as needed
        response = requests.get(input_field)
        prompt = PromptTemplate.from_template(template)
        chain = LLMChain(llm=llm, prompt=prompt)
        result = chain.run(response.text[:300])
        return Document(page_content=str(result))

In this example:

• The input_field is defined in field_config with required set to False and a default value of None.
• The build method handles the case where input_field is None.

This approach ensures that None is a valid option for the input field in your custom component ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[Cristhianzl]

Hi! 👋

We are using other channels as our official means of communication with users. We apologize for the delayed response.
For faster assistance, please direct your questions to our Discord channel or open a GitHub issue, as we are much more active on these platforms.

Langflow Discord Server

Thank you for your understanding.

Best regards,
The Langflow Team