✨ (JsonInput.py): add a new component called "JsonInput" to handle JSON input data in the language flow system

✨ (KeyPairInput.py): add a new component called "KeyPairInput" to handle dictionary input data in the language flow system
✨ (CSVOutput.py): add a new component called "CSVOutput" to handle CSV output data in the language flow system
✨ (ImageOutput.py): add a new component called "ImageOutput" to handle image output data in the language flow system
✨ (JsonOutput.py): add a new component called "JsonOutput" to handle JSON output data in the language flow system
✨ (PDFOutput.py): add a new component called "PDFOutput" to handle PDF output data in the language flow system
📝 (App.css): update CSS to improve readability and formatting
📝 (parameterComponent/index.tsx): fix a bug where rangeSpec is not properly accessed in the FloatComponent
📝 (cardComponent/index.tsx): update the CollectionCardComponent to include a new button for opening the playground and handle the opening and closing of the IOModal

📝 (codeTabsComponent/index.tsx): fix conditional rendering of InputListComponent by using optional chaining operator to check if the list property exists in the template object
📝 (keypairListComponent/index.tsx): refactor the initialization of the ref variable to handle both empty and non-empty values correctly
📝 (constants.ts): add "JsonInput" and "JsonOutput" to the INPUT_TYPES and OUTPUT_TYPES constants to support JSON input and output components
📝 (editNodeModal/index.tsx): fix conditional rendering of InputListComponent by using optional chaining operator to check if the list property exists in the template object
📝 (ioFieldView/components/JSONInput/index.tsx): add JSONInput component to handle JSON input in the IOFieldView component
📝 (ioFieldView/components/keyPairInput/index.tsx): add keyPairInput component to handle key-value pair input in the IOFieldView component

✨ (IOFieldView/index.tsx): add useState import to use state hook in functional component
✨ (IOFieldView/index.tsx): add support for KeyPairInput component in IOFieldView
✨ (IOFieldView/index.tsx): add support for JsonInput component in IOFieldView
✨ (IOFieldView/index.tsx): add support for JsonOutput component in IOFieldView
📝 (dictAreaModal/index.tsx): add useDarkStore import to use dark mode state in DictAreaModal component
📝 (classes.css): add CSS classes for json-view component in different themes
📝 (types/components/index.ts): remove duplicate InputGlobalComponentType definition

src/backend/base/langflow/components/inputs/JsonInput.py

@@ -0,0 +1,17 @@
+from langflow.base.io.text import TextComponent
+from langflow.field_typing.constants import Data, NestedDict
+
+class JsonInput(TextComponent):
+    display_name = "JSON Input"  
+    description = "JSON Input."
+
+    def build_config(self):
+        return {
+            "input_value": {
+                "display_name": "JSON",
+                "field_type": "NestedDict"
+            }
+        }
+
+    def build(self, input_value: NestedDict) -> NestedDict:
+        return input_value

src/backend/base/langflow/components/inputs/KeyPairInput.py

@@ -0,0 +1,19 @@
+from langflow.base.io.text import TextComponent
+from langflow.field_typing.constants import Data
+
+
+class KeyPairInput(TextComponent):
+    display_name = "Dictionary Input"  
+    description = "Dictionary Input."
+
+    def build_config(self):
+        return {
+            "input_value": {
+                "display_name": "Dictionaries",
+                "field_type": "dict",
+                "list": True
+            }
+        }
+
+    def build(self, input_value: dict) -> dict:
+        return input_value

src/backend/base/langflow/components/outputs/CSVOutput.py

@@ -0,0 +1,17 @@
+from typing import Optional
+
+from langflow.base.io.text import TextComponent
+from langflow.field_typing import Text, Data
+
+
+class CSVOutput(TextComponent):
+    display_name = "CSV Output"
+    description = "Used view csv files"
+
+    field_config = {
+        "input_value": {"display_name": "csv","info":"A csv blob","input_types":["Data"]},
+        "separator": {"display_name": "separator","info":"The separator used in the csv file","input_types":["Text"], "field_type":"Text","default_value":";","options":[";", ",", "|"]},
+    }
+
+    def build(self, input_value: Data, separator) -> Data:
+        return {"data": input_value, "separator": separator}

src/backend/base/langflow/components/outputs/ImageOutput.py

@@ -0,0 +1,15 @@
+from typing import Optional
+
+from langflow.base.io.text import TextComponent
+from langflow.field_typing import Text
+
+class ImageOutput(TextComponent):
+    display_name = "Image Output"
+    description = "Used view image files"
+
+    field_config = {
+        "input_value": {"display_name": "image","info":"A image url","input_types":["Text"]},
+    }
+
+    def build(self, input_value: Text) -> Text:
+        return input_value

src/backend/base/langflow/components/outputs/JsonOutput.py

@@ -0,0 +1,17 @@
+from langflow.base.io.text import TextComponent
+from langflow.field_typing.constants import Data, NestedDict
+
+class JsonOutput(TextComponent):
+    display_name = "JSON Output"  
+    description = "JSON Output."
+
+    def build_config(self):
+        return {
+            "input_value": {
+                "display_name": "JSON",
+                "field_type": "NestedDict"
+            }
+        }
+
+    def build(self, input_value: NestedDict) -> NestedDict:
+        return input_value

src/backend/base/langflow/components/outputs/PDFOutput.py

@@ -0,0 +1,16 @@
+from typing import Optional
+
+from langflow.base.io.text import TextComponent
+from langflow.field_typing import Text
+
+
+class PDFOutput(TextComponent):
+    display_name = "PDF Output"
+    description = "Used view pdf files"
+
+    field_config = {
+        "input_value": {"display_name": "pdf","info":"A pdf url","input_types":["Text"]},
+    }
+
+    def build(self, input_value: Text) -> Text:
+        return input_value