jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Refactor chatView component and improve error handling (#2144)

Browse source 
* Refactor chatView component to handle artifacts in chat messages, fixing bug on streamed messages after refresh

* Improve error handling and error messages in CustomNodes hooks to provide more informative and user-friendly error messages. This ensures that users are aware of any unexpected errors that occur while updating or adding components, and prompts them to try again. This change also aligns with recent improvements in error handling across the codebase.

* ♻️ (utils.ts): remove unnecessary trailing commas in function parameters

* ✨ (frontend): add constants for error messages in CustomNodes hooks
♻️ (frontend): refactor error handling in CustomNodes hooks to use constants

* feat: Add constants for error messages in CustomNodes hooks

Refactor error handling in CustomNodes hooks to use constants for error messages. This improves code readability and maintainability, ensuring consistent error messages are displayed to users. This change aligns with recent improvements in error handling across the codebase.

* refactor: Improve error handling and error messages in CustomNodes hooks

* refactor: Improve error handling and error messages in CustomNodes hooks

* refactor: Improve error handling and error messages in CustomNodes hooks

* refactor: Add missing click event in codeAreaModalComponent.spec.ts

* refactor: Update cURL code generation to use icon-Copy test ID for button click

* refactor: Improve error handling and error messages in CustomNodes hooks

* refactor: Remove unnecessary click event in logs.spec.ts

* refactor: Fix XPath selectors in textInputOutput.spec.ts

* fix python api test

* refactor: Update cURL code generation to use icon-Copy test ID for button click

* fix save component

* refactor: Update API key selection in userSettings.spec.ts

* refactor: Update promptModalComponent.spec.ts

* refactor: Update chatInputOutput.spec.ts for zoom out functionality

* refactor: Add return_message option to ChatInput build_config

* fix streaming

* update example

* update example name

* refactor: Update chatInputOutputUser.spec.ts test to improve readability and maintainability

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: italojohnny <italojohnnydosanjos@gmail.com>
This commit is contained in:
anovazzi1 2024-06-12 13:05:31 -03:00 • committed by GitHub
commit fdf44f6bc8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 629 additions and 751 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
.langchain.db-shm Normal file
View file

Binary file not shown.

0
.langchain.db-wal Normal file
View file

6
src/backend/base/langflow/components/inputs/ChatInput.py
View file

@ -18,6 +18,10 @@ class ChatInput(ChatComponent):
"display_name": "Text", "display_name": "Text",
"multiline": True, "multiline": True,
} }
build_config["return_message"] = {
"display_name": "Return Record",
"advanced": True,
}
return build_config return build_config
@ -28,7 +32,7 @@ class ChatInput(ChatComponent):
input_value: Optional[str] = None, input_value: Optional[str] = None,
files: Optional[list[str]] = None, files: Optional[list[str]] = None,
session_id: Optional[str] = None, session_id: Optional[str] = None,
return_message: Optional[bool] = False, return_message: Optional[bool] = True,
) -> Union[Message, Text]: ) -> Union[Message, Text]:
return super().build_with_record( return super().build_with_record(
sender=sender, sender=sender,

9
src/backend/base/langflow/graph/vertex/types.py
View file

@ -1,5 +1,5 @@
import json import json
from typing import AsyncIterator, Dict, Iterator, List from typing import AsyncIterator, Dict, Iterator, List, Generator
import yaml import yaml
from langchain_core.messages import AIMessage, AIMessageChunk from langchain_core.messages import AIMessage, AIMessageChunk
@ -99,11 +99,12 @@ class InterfaceVertex(Vertex):
# Turn the dict into a pleasing to # Turn the dict into a pleasing to
# read JSON inside a code block # read JSON inside a code block
message = dict_to_codeblock(self._built_object) message = dict_to_codeblock(self._built_object)
elif isinstance(self._built_object, Message): elif isinstance(self._built_object, (Message, Generator)):
if isinstance(message, (AsyncIterator, Iterator)): if isinstance(message, (AsyncIterator, Iterator, Generator)):
stream_url = self.build_stream_url() stream_url = self.build_stream_url()
message = "" message = ""
self._built_object.text = message if hasattr(self._built_object, "text"):
self._built_object.text = message
else: else:
message = self._built_object.text message = self._built_object.text
elif not isinstance(self._built_object, str): elif not isinstance(self._built_object, str):

338
src/backend/base/langflow/initial_setup/starter_projects/Basic Prompting (Hello, world!).json
View file

@ -2,100 +2,72 @@
"data": { "data": {
"edges": [ "edges": [
{ {
"className": "stroke-gray-900 stroke-connection", "className": "",
"data": { "data": {
"sourceHandle": { "sourceHandle": {
"baseClasses": [ "baseClasses": ["object", "Text", "str"],
"object",
"Text",
"str"
],
"dataType": "OpenAIModel", "dataType": "OpenAIModel",
"id": "OpenAIModel-k39HS" "id": "OpenAIModel-NDBjF"
}, },
"targetHandle": { "targetHandle": {
"fieldName": "input_value", "fieldName": "input_value",
"id": "ChatOutput-njtka", "id": "ChatOutput-JkVmc",
"inputTypes": [ "inputTypes": ["Text"],
"Text"
],
"type": "str" "type": "str"
} }
}, },
"id": "reactflow__edge-OpenAIModel-k39HS{œbaseClassesœ:[œobjectœ,œTextœ,œstrœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-k39HSœ}-ChatOutput-njtka{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-njtkaœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}", "id": "reactflow__edge-OpenAIModel-NDBjF{œbaseClassesœ:[œobjectœ,œTextœ,œstrœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-NDBjFœ}-ChatOutput-JkVmc{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-JkVmcœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
"source": "OpenAIModel-k39HS", "source": "OpenAIModel-NDBjF",
"sourceHandle": "{œbaseClassesœ: [œobjectœ, œTextœ, œstrœ], œdataTypeœ: œOpenAIModelœ, œidœ: œOpenAIModel-k39HSœ}", "sourceHandle": "{œbaseClassesœ: [œobjectœ, œTextœ, œstrœ], œdataTypeœ: œOpenAIModelœ, œidœ: œOpenAIModel-NDBjFœ}",
"style": { "style": {
"stroke": "#555" "stroke": "#555"
}, },
"target": "ChatOutput-njtka", "target": "ChatOutput-JkVmc",
"targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-njtkaœ, œinputTypesœ: [œTextœ], œtypeœ: œstrœ}" "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-JkVmcœ, œinputTypesœ: [œTextœ], œtypeœ: œstrœ}"
}, },
{ {
"className": "stroke-gray-900 stroke-connection", "className": "",
"data": { "data": {
"sourceHandle": { "sourceHandle": {
"baseClasses": [ "baseClasses": ["object", "str", "Text"],
"object",
"str",
"Text"
],
"dataType": "Prompt", "dataType": "Prompt",
"id": "Prompt-uxBqP" "id": "Prompt-WSII4"
}, },
"targetHandle": { "targetHandle": {
"fieldName": "input_value", "fieldName": "input_value",
"id": "OpenAIModel-k39HS", "id": "OpenAIModel-NDBjF",
"inputTypes": [ "inputTypes": ["Text", "Record", "Prompt"],
"Text",
"Record",
"Prompt"
],
"type": "str" "type": "str"
} }
}, },
"id": "reactflow__edge-Prompt-uxBqP{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-uxBqPœ}-OpenAIModel-k39HS{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-k39HSœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}", "id": "reactflow__edge-Prompt-WSII4{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-WSII4œ}-OpenAIModel-NDBjF{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-NDBjFœ,œinputTypesœ:[œTextœ,œRecordœ,œPromptœ],œtypeœ:œstrœ}",
"source": "Prompt-uxBqP", "source": "Prompt-WSII4",
"sourceHandle": "{œbaseClassesœ: [œobjectœ, œstrœ, œTextœ], œdataTypeœ: œPromptœ, œidœ: œPrompt-uxBqPœ}", "sourceHandle": "{œbaseClassesœ: [œobjectœ, œstrœ, œTextœ], œdataTypeœ: œPromptœ, œidœ: œPrompt-WSII4œ}",
"style": { "style": {
"stroke": "#555" "stroke": "#555"
}, },
"target": "OpenAIModel-k39HS", "target": "OpenAIModel-NDBjF",
"targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-k39HSœ, œinputTypesœ: [œTextœ, œRecordœ, œPromptœ], œtypeœ: œstrœ}" "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-NDBjFœ, œinputTypesœ: [œTextœ, œRecordœ, œPromptœ], œtypeœ: œstrœ}"
}, },
{ {
"className": "stroke-gray-900 stroke-connection",
"data": { "data": {
"sourceHandle": { "sourceHandle": {
"baseClasses": [ "baseClasses": ["Message", "object", "str", "Text"],
"object",
"Record",
"str",
"Text"
],
"dataType": "ChatInput", "dataType": "ChatInput",
"id": "ChatInput-P3fgL" "id": "ChatInput-kltLA"
}, },
"targetHandle": { "targetHandle": {
"fieldName": "user_input", "fieldName": "user_input",
"id": "Prompt-uxBqP", "id": "Prompt-WSII4",
"inputTypes": [ "inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
"Document",
"BaseOutputParser",
"Record",
"Text"
],
"type": "str" "type": "str"
} }
}, },
"id": "reactflow__edge-ChatInput-P3fgL{œbaseClassesœ:[œobjectœ,œRecordœ,œstrœ,œTextœ],œdataTypeœ:œChatInputœ,œidœ:œChatInput-P3fgLœ}-Prompt-uxBqP{œfieldNameœ:œuser_inputœ,œidœ:œPrompt-uxBqPœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}", "id": "reactflow__edge-ChatInput-kltLA{œbaseClassesœ:[œMessageœ,œobjectœ,œstrœ,œTextœ],œdataTypeœ:œChatInputœ,œidœ:œChatInput-kltLAœ}-Prompt-WSII4{œfieldNameœ:œuser_inputœ,œidœ:œPrompt-WSII4œ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
"source": "ChatInput-P3fgL", "source": "ChatInput-kltLA",
"sourceHandle": "{œbaseClassesœ: [œobjectœ, œRecordœ, œstrœ, œTextœ], œdataTypeœ: œChatInputœ, œidœ: œChatInput-P3fgLœ}", "sourceHandle": "{œbaseClassesœ: [œMessageœ, œobjectœ, œstrœ, œTextœ], œdataTypeœ: œChatInputœ, œidœ: œChatInput-kltLAœ}",
"style": { "target": "Prompt-WSII4",
"stroke": "#555" "targetHandle": "{œfieldNameœ: œuser_inputœ, œidœ: œPrompt-WSII4œ, œinputTypesœ: [œDocumentœ, œBaseOutputParserœ, œRecordœ, œTextœ], œtypeœ: œstrœ}"
},
"target": "Prompt-uxBqP",
"targetHandle": "{œfieldNameœ: œuser_inputœ, œidœ: œPrompt-uxBqPœ, œinputTypesœ: [œDocumentœ, œBaseOutputParserœ, œRecordœ, œTextœ], œtypeœ: œstrœ}"
} }
], ],
"nodes": [ "nodes": [
@ -103,18 +75,12 @@
"data": { "data": {
"description": "Create a prompt template with dynamic variables.", "description": "Create a prompt template with dynamic variables.",
"display_name": "Prompt", "display_name": "Prompt",
"id": "Prompt-uxBqP", "id": "Prompt-WSII4",
"node": { "node": {
"base_classes": [ "base_classes": ["object", "str", "Text"],
"object",
"str",
"Text"
],
"beta": false, "beta": false,
"custom_fields": { "custom_fields": {
"template": [ "template": ["user_input"]
"user_input"
]
}, },
"description": "Create a prompt template with dynamic variables.", "description": "Create a prompt template with dynamic variables.",
"display_name": "Prompt", "display_name": "Prompt",
@ -129,9 +95,7 @@
"is_input": null, "is_input": null,
"is_output": null, "is_output": null,
"name": "", "name": "",
"output_types": [ "output_types": ["Prompt"],
"Prompt"
],
"template": { "template": {
"_type": "CustomComponent", "_type": "CustomComponent",
"code": { "code": {
@ -159,9 +123,7 @@
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "", "info": "",
"input_types": [ "input_types": ["Text"],
"Text"
],
"list": false, "list": false,
"load_from_db": false, "load_from_db": false,
"multiline": false, "multiline": false,
@ -205,17 +167,17 @@
"type": "Prompt" "type": "Prompt"
}, },
"dragging": false, "dragging": false,
"height": 383, "height": 419,
"id": "Prompt-uxBqP", "id": "Prompt-WSII4",
"position": { "position": {
"x": 53.588791333410654, "x": 18.562420355453696,
"y": -107.07318910019967 "y": -284.15095348876025
}, },
"positionAbsolute": { "positionAbsolute": {
"x": 53.588791333410654, "x": 18.562420355453696,
"y": -107.07318910019967 "y": -284.15095348876025
}, },
"selected": true, "selected": false,
"type": "genericNode", "type": "genericNode",
"width": 384 "width": 384
}, },
@ -223,13 +185,9 @@
"data": { "data": {
"description": "Generates text using OpenAI LLMs.", "description": "Generates text using OpenAI LLMs.",
"display_name": "OpenAI", "display_name": "OpenAI",
"id": "OpenAIModel-k39HS", "id": "OpenAIModel-NDBjF",
"node": { "node": {
"base_classes": [ "base_classes": ["object", "Text", "str"],
"object",
"Text",
"str"
],
"beta": false, "beta": false,
"custom_fields": { "custom_fields": {
"input_value": null, "input_value": null,
@ -259,9 +217,7 @@
], ],
"frozen": false, "frozen": false,
"icon": "OpenAI", "icon": "OpenAI",
"output_types": [ "output_types": ["Text"],
"Text"
],
"template": { "template": {
"_type": "CustomComponent", "_type": "CustomComponent",
"code": { "code": {
@ -289,11 +245,7 @@
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "", "info": "",
"input_types": [ "input_types": ["Text", "Record", "Prompt"],
"Text",
"Record",
"Prompt"
],
"list": false, "list": false,
"load_from_db": false, "load_from_db": false,
"multiline": false, "multiline": false,
@ -350,9 +302,7 @@
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "", "info": "",
"input_types": [ "input_types": ["Text"],
"Text"
],
"list": true, "list": true,
"load_from_db": false, "load_from_db": false,
"multiline": false, "multiline": false,
@ -370,7 +320,7 @@
"show": true, "show": true,
"title_case": false, "title_case": false,
"type": "str", "type": "str",
"value": "gpt-3.5-turbo" "value": "gpt-4o"
}, },
"openai_api_base": { "openai_api_base": {
"advanced": true, "advanced": true,
@ -379,9 +329,7 @@
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\n\nYou can change this to use other APIs like JinaChat, LocalAI and Prem.", "info": "The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\n\nYou can change this to use other APIs like JinaChat, LocalAI and Prem.",
"input_types": [ "input_types": ["Text"],
"Text"
],
"list": false, "list": false,
"load_from_db": false, "load_from_db": false,
"multiline": false, "multiline": false,
@ -400,11 +348,9 @@
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [ "input_types": ["Text"],
"Text"
],
"list": false, "list": false,
"load_from_db": true, "load_from_db": false,
"multiline": false, "multiline": false,
"name": "openai_api_key", "name": "openai_api_key",
"password": true, "password": true,
@ -413,7 +359,7 @@
"show": true, "show": true,
"title_case": false, "title_case": false,
"type": "str", "type": "str",
"value": "OPENAI_API_KEY" "value": ""
}, },
"stream": { "stream": {
"advanced": true, "advanced": true,
@ -432,7 +378,7 @@
"show": true, "show": true,
"title_case": false, "title_case": false,
"type": "bool", "type": "bool",
"value": true "value": false
}, },
"system_message": { "system_message": {
"advanced": true, "advanced": true,
@ -441,9 +387,7 @@
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "System message to pass to the model.", "info": "System message to pass to the model.",
"input_types": [ "input_types": ["Text"],
"Text"
],
"list": false, "list": false,
"load_from_db": false, "load_from_db": false,
"multiline": false, "multiline": false,
@ -485,8 +429,8 @@
"type": "OpenAIModel" "type": "OpenAIModel"
}, },
"dragging": false, "dragging": false,
"height": 563, "height": 571,
"id": "OpenAIModel-k39HS", "id": "OpenAIModel-NDBjF",
"position": { "position": {
"x": 634.8148772766217, "x": 634.8148772766217,
"y": 27.035057029045305 "y": 27.035057029045305
@ -501,14 +445,9 @@
}, },
{ {
"data": { "data": {
"id": "ChatOutput-njtka", "id": "ChatOutput-JkVmc",
"node": { "node": {
"base_classes": [ "base_classes": ["Record", "Text", "str", "object"],
"Record",
"Text",
"str",
"object"
],
"beta": false, "beta": false,
"custom_fields": { "custom_fields": {
"input_value": null, "input_value": null,
@ -525,10 +464,7 @@
"field_order": [], "field_order": [],
"frozen": false, "frozen": false,
"icon": "ChatOutput", "icon": "ChatOutput",
"output_types": [ "output_types": ["Message", "Text"],
"Message",
"Text"
],
"template": { "template": {
"_type": "CustomComponent", "_type": "CustomComponent",
"code": { "code": {
@ -556,9 +492,7 @@
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "", "info": "",
"input_types": [ "input_types": ["Text"],
"Text"
],
"list": false, "list": false,
"load_from_db": false, "load_from_db": false,
"multiline": true, "multiline": true,
@ -577,17 +511,12 @@
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "", "info": "",
"input_types": [ "input_types": ["Text"],
"Text"
],
"list": true, "list": true,
"load_from_db": false, "load_from_db": false,
"multiline": false, "multiline": false,
"name": "sender", "name": "sender",
"options": [ "options": ["Machine", "User"],
"Machine",
"User"
],
"password": false, "password": false,
"placeholder": "", "placeholder": "",
"required": false, "required": false,
@ -603,9 +532,7 @@
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "", "info": "",
"input_types": [ "input_types": ["Text"],
"Text"
],
"list": false, "list": false,
"load_from_db": false, "load_from_db": false,
"multiline": false, "multiline": false,
@ -625,9 +552,7 @@
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "If provided, the message will be stored in the memory.", "info": "If provided, the message will be stored in the memory.",
"input_types": [ "input_types": ["Text"],
"Text"
],
"list": false, "list": false,
"load_from_db": false, "load_from_db": false,
"multiline": false, "multiline": false,
@ -644,15 +569,15 @@
"type": "ChatOutput" "type": "ChatOutput"
}, },
"dragging": false, "dragging": false,
"height": 383, "height": 391,
"id": "ChatOutput-njtka", "id": "ChatOutput-JkVmc",
"position": { "position": {
"x": 1193.250417197867, "x": 1183.52086970399,
"y": 71.88476890163852 "y": -21.518887039580306
}, },
"positionAbsolute": { "positionAbsolute": {
"x": 1193.250417197867, "x": 1183.52086970399,
"y": 71.88476890163852 "y": -21.518887039580306
}, },
"selected": false, "selected": false,
"type": "genericNode", "type": "genericNode",
@ -660,18 +585,14 @@
}, },
{ {
"data": { "data": {
"id": "ChatInput-P3fgL", "id": "ChatInput-kltLA",
"node": { "node": {
"base_classes": [ "base_classes": ["Message", "object", "str", "Text"],
"object",
"Record",
"str",
"Text"
],
"beta": false, "beta": false,
"custom_fields": { "custom_fields": {
"files": null,
"input_value": null, "input_value": null,
"return_record": null, "return_message": null,
"sender": null, "sender": null,
"sender_name": null, "sender_name": null,
"session_id": null "session_id": null
@ -683,10 +604,7 @@
"field_order": [], "field_order": [],
"frozen": false, "frozen": false,
"icon": "ChatInput", "icon": "ChatInput",
"output_types": [ "output_types": ["Message", "Text"],
"Message",
"Text"
],
"template": { "template": {
"_type": "CustomComponent", "_type": "CustomComponent",
"code": { "code": {
@ -705,7 +623,49 @@
"show": true, "show": true,
"title_case": false, "title_case": false,
"type": "code", "type": "code",
"value": "from typing import Optional\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.schema.message import Message\nfrom langflow.field_typing import Text\nfrom typing import Union\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"ChatInput\"\n\n def build_config(self):\n build_config = super().build_config()\n build_config[\"input_value\"] = {\n \"input_types\": [],\n \"display_name\": \"Text\",\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 files: Optional[list[str]] = None,\n session_id: Optional[str] = None,\n return_message: Optional[bool] = False,\n ) -> Union[Message, Text]:\n return super().build_with_record(\n sender=sender,\n sender_name=sender_name,\n input_value=input_value,\n files=files,\n session_id=session_id,\n return_message=return_message,\n )\n" "value": "from typing import Optional\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.schema.message import Message\nfrom langflow.field_typing import Text\nfrom typing import Union\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"ChatInput\"\n\n def build_config(self):\n build_config = super().build_config()\n build_config[\"input_value\"] = {\n \"input_types\": [],\n \"display_name\": \"Text\",\n \"multiline\": True,\n }\n build_config[\"return_message\"] = {\n \"display_name\": \"Return Record\",\n \"advanced\": 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 files: Optional[list[str]] = None,\n session_id: Optional[str] = None,\n return_message: Optional[bool] = True,\n ) -> Union[Message, Text]:\n return super().build_with_record(\n sender=sender,\n sender_name=sender_name,\n input_value=input_value,\n files=files,\n session_id=session_id,\n return_message=return_message,\n )\n"
},
"files": {
"advanced": true,
"display_name": "Files",
"dynamic": false,
"fileTypes": [
".txt",
".md",
".mdx",
".csv",
".json",
".yaml",
".yml",
".xml",
".html",
".htm",
".pdf",
".docx",
".py",
".sh",
".sql",
".js",
".ts",
".tsx",
".jpg",
".jpeg",
".png",
".bmp"
],
"file_path": "",
"info": "Files to be sent with the message.",
"list": false,
"load_from_db": false,
"multiline": false,
"name": "files",
"password": false,
"placeholder": "",
"required": false,
"show": true,
"title_case": false,
"type": "file",
"value": ""
}, },
"input_value": { "input_value": {
"advanced": false, "advanced": false,
@ -725,7 +685,26 @@
"show": true, "show": true,
"title_case": false, "title_case": false,
"type": "str", "type": "str",
"value": "hi" "value": "what do you see?"
},
"return_message": {
"advanced": true,
"display_name": "Return Record",
"dynamic": false,
"fileTypes": [],
"file_path": "",
"info": "",
"list": false,
"load_from_db": false,
"multiline": false,
"name": "return_message",
"password": false,
"placeholder": "",
"required": false,
"show": true,
"title_case": false,
"type": "bool",
"value": true
}, },
"sender": { "sender": {
"advanced": true, "advanced": true,
@ -734,17 +713,12 @@
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "", "info": "",
"input_types": [ "input_types": ["Text"],
"Text"
],
"list": true, "list": true,
"load_from_db": false, "load_from_db": false,
"multiline": false, "multiline": false,
"name": "sender", "name": "sender",
"options": [ "options": ["Machine", "User"],
"Machine",
"User"
],
"password": false, "password": false,
"placeholder": "", "placeholder": "",
"required": false, "required": false,
@ -754,15 +728,13 @@
"value": "User" "value": "User"
}, },
"sender_name": { "sender_name": {
"advanced": false, "advanced": true,
"display_name": "Sender Name", "display_name": "Sender Name",
"dynamic": false, "dynamic": false,
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "", "info": "",
"input_types": [ "input_types": ["Text"],
"Text"
],
"list": false, "list": false,
"load_from_db": false, "load_from_db": false,
"multiline": false, "multiline": false,
@ -782,9 +754,7 @@
"fileTypes": [], "fileTypes": [],
"file_path": "", "file_path": "",
"info": "If provided, the message will be stored in the memory.", "info": "If provided, the message will be stored in the memory.",
"input_types": [ "input_types": ["Text"],
"Text"
],
"list": false, "list": false,
"load_from_db": false, "load_from_db": false,
"multiline": false, "multiline": false,
@ -801,30 +771,30 @@
"type": "ChatInput" "type": "ChatInput"
}, },
"dragging": false, "dragging": false,
"height": 375, "height": 289,
"id": "ChatInput-P3fgL", "id": "ChatInput-kltLA",
"position": { "position": {
"x": -495.2223093083827, "x": -560.3246254009209,
"y": -232.56998443685862 "y": -435.0506368105706
}, },
"positionAbsolute": { "positionAbsolute": {
"x": -495.2223093083827, "x": -560.3246254009209,
"y": -232.56998443685862 "y": -435.0506368105706
}, },
"selected": false, "selected": true,
"type": "genericNode", "type": "genericNode",
"width": 384 "width": 384
} }
], ],
"viewport": { "viewport": {
"x": 260.58251815500563, "x": 223.38563623650703,
"y": 318.2261172111936, "y": 271.96191180648566,
"zoom": 0.43514115784696294 "zoom": 0.5138985141032123
} }
}, },
"description": "This flow will get you experimenting with the basics of the UI, the Chat and the Prompt component. \n\nTry changing the Template in it to see how the model behaves. \nYou can change it to this and a Text Input into the `type_of_person` variable : \"Answer the user as if you were a pirate.\n\nUser: {user_input}\n\nAnswer: \" ", "description": "This flow will get you experimenting with the basics of the UI, the Chat and the Prompt component. \n\nTry changing the Template in it to see how the model behaves. \nYou can change it to this and a Text Input into the `type_of_person` variable : \"Answer the user as if you were a pirate.\n\nUser: {user_input}\n\nAnswer: \" ",
"id": "c091a57f-43a7-4a5e-b352-035ae8d8379c", "id": "ad43b14f-6ec7-496f-9564-aad928603084",
"is_component": false, "is_component": false,
"last_tested_version": "1.0.0a4", "last_tested_version": "1.0.0a52",
"name": "Basic Prompting (Hello, World)" "name": "Basic Prompting (Hello, World)"
} }

BIN
src/backend/base/langflow/langflow-pre.db-shm Normal file
View file

Binary file not shown.

BIN
src/backend/base/langflow/langflow-pre.db-wal Normal file
View file

Binary file not shown.

794
src/frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

30
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -61,10 +61,10 @@ export default function GenericNode({
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const isDark = useDarkStore((state) => state.dark); const isDark = useDarkStore((state) => state.dark);
const buildStatus = useFlowStore( const buildStatus = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.status (state) => state.flowBuildStatus[data.id]?.status,
); );
const lastRunTime = useFlowStore( const lastRunTime = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.timestamp (state) => state.flowBuildStatus[data.id]?.timestamp,
); );
const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
@ -72,7 +72,7 @@ export default function GenericNode({
const [nodeName, setNodeName] = useState(data.node!.display_name); const [nodeName, setNodeName] = useState(data.node!.display_name);
const [inputDescription, setInputDescription] = useState(false); const [inputDescription, setInputDescription] = useState(false);
const [nodeDescription, setNodeDescription] = useState( const [nodeDescription, setNodeDescription] = useState(
data.node?.description! data.node?.description!,
); );
const [isOutdated, setIsOutdated] = useState(false); const [isOutdated, setIsOutdated] = useState(false);
const [validationStatus, setValidationStatus] = const [validationStatus, setValidationStatus] =
@ -90,7 +90,7 @@ export default function GenericNode({
data.node!, data.node!,
setNode, setNode,
setIsOutdated, setIsOutdated,
updateNodeInternals updateNodeInternals,
); );
const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
@ -117,12 +117,12 @@ export default function GenericNode({
selected: boolean, selected: boolean,
showNode: boolean, showNode: boolean,
buildStatus: BuildStatus | undefined, buildStatus: BuildStatus | undefined,
validationStatus: VertexBuildTypeAPI | null validationStatus: VertexBuildTypeAPI | null,
) => { ) => {
const specificClassFromBuildStatus = getSpecificClassFromBuildStatus( const specificClassFromBuildStatus = getSpecificClassFromBuildStatus(
buildStatus, buildStatus,
validationStatus, validationStatus,
isDark isDark,
); );
const baseBorderClass = getBaseBorderClass(selected); const baseBorderClass = getBaseBorderClass(selected);
@ -131,7 +131,7 @@ export default function GenericNode({
baseBorderClass, baseBorderClass,
nodeSizeClass, nodeSizeClass,
"generic-node-div group/node", "generic-node-div group/node",
specificClassFromBuildStatus specificClassFromBuildStatus,
); );
return names; return names;
}; };
@ -176,7 +176,7 @@ export default function GenericNode({
showNode, showNode,
isEmoji, isEmoji,
nodeIconFragment, nodeIconFragment,
checkNodeIconFragment checkNodeIconFragment,
); );
function countHandles(): void { function countHandles(): void {
@ -309,7 +309,7 @@ export default function GenericNode({
selected, selected,
showNode, showNode,
buildStatus, buildStatus,
validationStatus validationStatus,
)} )}
> >
{data.node?.beta && showNode && ( {data.node?.beta && showNode && (
@ -457,7 +457,7 @@ export default function GenericNode({
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
templateField templateField,
)} )}
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}
name={templateField} name={templateField}
@ -485,7 +485,7 @@ export default function GenericNode({
proxy={data.node?.template[templateField].proxy} proxy={data.node?.template[templateField].proxy}
showNode={showNode} showNode={showNode}
/> />
) ),
)} )}
<ParameterComponent <ParameterComponent
selected={selected} selected={selected}
@ -643,7 +643,7 @@ export default function GenericNode({
!data.node?.description) && !data.node?.description) &&
nameEditable nameEditable
? "font-light italic" ? "font-light italic"
: "" : "",
)} )}
onDoubleClick={(e) => { onDoubleClick={(e) => {
setInputDescription(true); setInputDescription(true);
@ -713,13 +713,13 @@ export default function GenericNode({
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
templateField templateField,
)} )}
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}
name={templateField} name={templateField}
tooltipTitle={ tooltipTitle={
data.node?.template[templateField].input_types?.join( data.node?.template[templateField].input_types?.join(
"\n" "\n",
) ?? data.node?.template[templateField].type ) ?? data.node?.template[templateField].type
} }
required={data.node!.template[templateField].required} required={data.node!.template[templateField].required}
@ -746,7 +746,7 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
Object.keys(data.node!.template).length < 1 ? "hidden" : "", Object.keys(data.node!.template).length < 1 ? "hidden" : "",
"flex-max-width justify-center" "flex-max-width justify-center",
)} )}
> >
{" "} {" "}

10
src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx
View file

@ -1,5 +1,9 @@
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { useEffect } from "react"; import { useEffect } from "react";
import {
ERROR_UPDATING_COMPONENT,
TITLE_ERROR_UPDATING_COMPONENT,
} from "../../constants/constants";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import { ResponseErrorDetailAPI } from "../../types/api"; import { ResponseErrorDetailAPI } from "../../types/api";
@ -39,8 +43,10 @@ const useFetchDataOnMount = (
let responseError = error as ResponseErrorDetailAPI; let responseError = error as ResponseErrorDetailAPI;
setErrorData({ setErrorData({
title: "Error while updating the Component", title: TITLE_ERROR_UPDATING_COMPONENT,
list: [responseError?.response?.data?.detail ?? "Unknown error"], list: [
responseError?.response?.data?.detail ?? ERROR_UPDATING_COMPONENT,
],
}); });
} }
setIsLoading(false); setIsLoading(false);

9
src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx
View file

@ -1,4 +1,8 @@
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import {
ERROR_UPDATING_COMPONENT,
TITLE_ERROR_UPDATING_COMPONENT,
} from "../../constants/constants";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import { ResponseErrorTypeAPI } from "../../types/api"; import { ResponseErrorTypeAPI } from "../../types/api";
@ -43,9 +47,10 @@ const useHandleOnNewValue = (
} catch (error) { } catch (error) {
let responseError = error as ResponseErrorTypeAPI; let responseError = error as ResponseErrorTypeAPI;
setErrorData({ setErrorData({
title: "Error while updating the Component", title: TITLE_ERROR_UPDATING_COMPONENT,
list: [ list: [
responseError?.response?.data?.detail.error ?? "Unknown error", responseError?.response?.data?.detail.error ??
ERROR_UPDATING_COMPONENT,
], ],
}); });
} }

10
src/frontend/src/CustomNodes/hooks/use-handle-refresh-buttons.tsx
View file

@ -1,4 +1,8 @@
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import {
ERROR_UPDATING_COMPONENT,
TITLE_ERROR_UPDATING_COMPONENT,
} from "../../constants/constants";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import { ResponseErrorDetailAPI } from "../../types/api"; import { ResponseErrorDetailAPI } from "../../types/api";
import { handleUpdateValues } from "../../utils/parameterUtils"; import { handleUpdateValues } from "../../utils/parameterUtils";
@ -25,8 +29,10 @@ const useHandleRefreshButtonPress = (setIsLoading, setNode, renderTooltips) => {
let responseError = error as ResponseErrorDetailAPI; let responseError = error as ResponseErrorDetailAPI;
setErrorData({ setErrorData({
title: "Error while updating the Component", title: TITLE_ERROR_UPDATING_COMPONENT,
list: [responseError?.response?.data?.detail ?? "Unknown error"], list: [
responseError?.response?.data?.detail ?? ERROR_UPDATING_COMPONENT,
],
}); });
} }
setIsLoading(false); setIsLoading(false);

5
src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
View file

@ -70,7 +70,10 @@ export default function AddNewVariableButton({
let responseError = error as ResponseErrorDetailAPI; let responseError = error as ResponseErrorDetailAPI;
setErrorData({ setErrorData({
title: "Error creating variable", title: "Error creating variable",
list: [responseError?.response?.data?.detail ?? "Unknown error"], list: [
responseError?.response?.data?.detail ??
"An unexpected error occurred while adding a new variable. Please try again.",
],
}); });
}); });
} }

5
src/frontend/src/constants/constants.ts
View file

@ -837,3 +837,8 @@ export const MAX_BATCH_SIZE = 50;
export const MODAL_CLASSES = export const MODAL_CLASSES =
"nopan nodelete nodrag noundo nocopy fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"; "nopan nodelete nodrag noundo nocopy fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
export const ERROR_UPDATING_COMPONENT =
"An unexpected error occurred while updating the Component. Please try again.";
export const TITLE_ERROR_UPDATING_COMPONENT =
"Error while updating the Component";

18
src/frontend/src/modals/IOModal/components/chatView/index.tsx
View file

@ -62,14 +62,20 @@ export default function ChatView({
const chatMessages: ChatMessageType[] = chatOutputResponses const chatMessages: ChatMessageType[] = chatOutputResponses
.sort((a, b) => Date.parse(a.timestamp) - Date.parse(b.timestamp)) .sort((a, b) => Date.parse(a.timestamp) - Date.parse(b.timestamp))
// //
.filter((output) => output.data.message) .filter(
(output) =>
output.data.message || (!output.data.message && output.artifacts),
)
.map((output, index) => { .map((output, index) => {
try { try {
console.log("output:", output); console.log("output:", output);
const { sender, message, sender_name, stream_url, files } = const { sender, message, sender_name, stream_url, files } =
output.data.message; output.data.message?.message ||
console.log("output.data.message:", output.data.message); (output.data.message?.files ?? []).length > 0 ||
console.log("output.data.message.files:", output.data.message.files); output.data.message?.stream_url
? output.data.message
: output.artifacts;
console.log(output);
const is_ai = const is_ai =
sender === "Machine" || sender === null || sender === undefined; sender === "Machine" || sender === null || sender === undefined;
return { return {
@ -134,7 +140,7 @@ export default function ChatView({
function updateChat( function updateChat(
chat: ChatMessageType, chat: ChatMessageType,
message: string, message: string,
stream_url?: string stream_url?: string,
) { ) {
// if (message === "") return; // if (message === "") return;
chat.message = message; chat.message = message;
@ -164,7 +170,7 @@ export default function ChatView({
setIsDragging, setIsDragging,
setFiles, setFiles,
currentFlowId, currentFlowId,
setErrorData setErrorData,
); );
return ( return (

4
src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts
View file

@ -13,8 +13,8 @@ export const getNodesWithDefaultValue = (flow) => {
templateField.charAt(0) !== "_" && templateField.charAt(0) !== "_" &&
node.data.node.template[templateField]?.show && node.data.node.template[templateField]?.show &&
LANGFLOW_SUPPORTED_TYPES.has( LANGFLOW_SUPPORTED_TYPES.has(
node.data.node.template[templateField]?.type node.data.node.template[templateField]?.type,
) ),
) )
.map((n, i) => { .map((n, i) => {
arrNodesWithValues.push(node["id"]); arrNodesWithValues.push(node["id"]);

34
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -50,7 +50,7 @@ export default function NodeToolbarComponent({
const [showconfirmShare, setShowconfirmShare] = useState(false); const [showconfirmShare, setShowconfirmShare] = useState(false);
const [showOverrideModal, setShowOverrideModal] = useState(false); const [showOverrideModal, setShowOverrideModal] = useState(false);
const [flowComponent, setFlowComponent] = useState<FlowType>( const [flowComponent, setFlowComponent] = useState<FlowType>(
createFlowComponent(cloneDeep(data), version) createFlowComponent(cloneDeep(data), version),
); );
const preventDefault = true; const preventDefault = true;
const isMac = navigator.platform.toUpperCase().includes("MAC"); const isMac = navigator.platform.toUpperCase().includes("MAC");
@ -67,7 +67,7 @@ export default function NodeToolbarComponent({
data.node.template[templateField]?.type === "Any" || data.node.template[templateField]?.type === "Any" ||
data.node.template[templateField]?.type === "int" || data.node.template[templateField]?.type === "int" ||
data.node.template[templateField]?.type === "dict" || data.node.template[templateField]?.type === "dict" ||
data.node.template[templateField]?.type === "NestedDict") data.node.template[templateField]?.type === "NestedDict"),
).length; ).length;
const hasStore = useStoreStore((state) => state.hasStore); const hasStore = useStoreStore((state) => state.hasStore);
@ -220,7 +220,7 @@ export default function NodeToolbarComponent({
const updateNodeInternals = useUpdateNodeInternals(); const updateNodeInternals = useUpdateNodeInternals();
const setLastCopiedSelection = useFlowStore( const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection (state) => state.setLastCopiedSelection,
); );
const setSuccessData = useAlertStore((state) => state.setSuccessData); const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -294,7 +294,7 @@ export default function NodeToolbarComponent({
nodes, nodes,
edges, edges,
setNodes, setNodes,
setEdges setEdges,
); );
break; break;
case "override": case "override":
@ -321,14 +321,14 @@ export default function NodeToolbarComponent({
y: 10, y: 10,
paneX: nodes.find((node) => node.id === data.id)?.position.x, paneX: nodes.find((node) => node.id === data.id)?.position.x,
paneY: nodes.find((node) => node.id === data.id)?.position.y, paneY: nodes.find((node) => node.id === data.id)?.position.y,
} },
); );
break; break;
} }
}; };
const isSaved = flows.some((flow) => const isSaved = flows.some((flow) =>
Object.values(flow).includes(data.node?.display_name!) Object.values(flow).includes(data.node?.display_name!),
); );
function displayShortcut({ function displayShortcut({
@ -346,7 +346,7 @@ export default function NodeToolbarComponent({
} }
}); });
const filteredShortcut = fixedShortcut.filter( const filteredShortcut = fixedShortcut.filter(
(key) => !key.toLowerCase().includes("shift") (key) => !key.toLowerCase().includes("shift"),
); );
let shortcutWPlus: string[] = []; let shortcutWPlus: string[] = [];
if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" "); if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
@ -370,7 +370,7 @@ export default function NodeToolbarComponent({
const setNode = useFlowStore((state) => state.setNode); const setNode = useFlowStore((state) => state.setNode);
const handleOnNewValue = ( const handleOnNewValue = (
newValue: string | string[] | boolean | Object[] newValue: string | string[] | boolean | Object[],
): void => { ): void => {
if (data.node!.template[name].value !== newValue) { if (data.node!.template[name].value !== newValue) {
takeSnapshot(); takeSnapshot();
@ -426,8 +426,8 @@ export default function NodeToolbarComponent({
<ShadTooltip <ShadTooltip
content={displayShortcut( content={displayShortcut(
shortcuts.find( shortcuts.find(
({ name }) => name.split(" ")[0].toLowerCase() === "code" ({ name }) => name.split(" ")[0].toLowerCase() === "code",
)! )!,
)} )}
side="top" side="top"
> >
@ -446,8 +446,8 @@ export default function NodeToolbarComponent({
<ShadTooltip <ShadTooltip
content={displayShortcut( content={displayShortcut(
shortcuts.find( shortcuts.find(
({ name }) => name.split(" ")[0].toLowerCase() === "advanced" ({ name }) => name.split(" ")[0].toLowerCase() === "advanced",
)! )!,
)} )}
side="top" side="top"
> >
@ -486,14 +486,14 @@ export default function NodeToolbarComponent({
<ShadTooltip <ShadTooltip
content={displayShortcut( content={displayShortcut(
shortcuts.find( shortcuts.find(
({ name }) => name.split(" ")[0].toLowerCase() === "freeze" ({ name }) => name.split(" ")[0].toLowerCase() === "freeze",
)! )!,
)} )}
side="top" side="top"
> >
<button <button
className={classNames( className={classNames(
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
)} )}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -514,7 +514,7 @@ export default function NodeToolbarComponent({
className={cn( className={cn(
"h-4 w-4 transition-all", "h-4 w-4 transition-all",
// TODO UPDATE THIS COLOR TO BE A VARIABLE // TODO UPDATE THIS COLOR TO BE A VARIABLE
frozen ? "animate-wiggle text-ice" : "" frozen ? "animate-wiggle text-ice" : "",
)} )}
/> />
</button> </button>
@ -542,7 +542,7 @@ export default function NodeToolbarComponent({
<div <div
data-testid="more-options-modal" data-testid="more-options-modal"
className={classNames( className={classNames(
"relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
)} )}
> >
<IconComponent <IconComponent

1
src/frontend/src/types/api/index.ts
View file

@ -159,6 +159,7 @@ export type VertexBuildTypeAPI = {
timestamp: string; timestamp: string;
params: any; params: any;
messages: ChatOutputType[] | ChatInputType[]; messages: ChatOutputType[] | ChatInputType[];
artifacts: any | ChatOutputType | ChatInputType;
}; };
// data is the object received by the API // data is the object received by the API

5
src/frontend/src/utils/buildUtils.ts
View file

@ -279,7 +279,10 @@ async function buildVertex({
console.error(error); console.error(error);
onBuildError!( onBuildError!(
"Error Building Component", "Error Building Component",
[(error as AxiosError<any>).response?.data?.detail ?? "Unknown Error"], [
(error as AxiosError<any>).response?.data?.detail ??
"An unexpected error occurred while building the Component. Please try again.",
],
verticesIds.map((id) => ({ id })), verticesIds.map((id) => ({ id })),
); );
stopBuild(); stopBuild();

20
src/frontend/src/utils/utils.ts
View file

@ -56,7 +56,7 @@ export function normalCaseToSnakeCase(str: string): string {
export function toTitleCase( export function toTitleCase(
str: string | undefined, str: string | undefined,
isNodeField?: boolean isNodeField?: boolean,
): string { ): string {
if (!str) return ""; if (!str) return "";
let result = str let result = str
@ -65,7 +65,7 @@ export function toTitleCase(
if (isNodeField) return word; if (isNodeField) return word;
if (index === 0) { if (index === 0) {
return checkUpperWords( return checkUpperWords(
word[0].toUpperCase() + word.slice(1).toLowerCase() word[0].toUpperCase() + word.slice(1).toLowerCase(),
); );
} }
return checkUpperWords(word.toLowerCase()); return checkUpperWords(word.toLowerCase());
@ -78,7 +78,7 @@ export function toTitleCase(
if (isNodeField) return word; if (isNodeField) return word;
if (index === 0) { if (index === 0) {
return checkUpperWords( return checkUpperWords(
word[0].toUpperCase() + word.slice(1).toLowerCase() word[0].toUpperCase() + word.slice(1).toLowerCase(),
); );
} }
return checkUpperWords(word.toLowerCase()); return checkUpperWords(word.toLowerCase());
@ -182,7 +182,7 @@ export function checkLocalStorageKey(key: string): boolean {
export function IncrementObjectKey( export function IncrementObjectKey(
object: object, object: object,
key: string key: string,
): { newKey: string; increment: number } { ): { newKey: string; increment: number } {
let count = 1; let count = 1;
const type = removeCountFromString(key); const type = removeCountFromString(key);
@ -217,7 +217,7 @@ export function groupByFamily(
data: APIDataType, data: APIDataType,
baseClasses: string, baseClasses: string,
left: boolean, left: boolean,
flow?: NodeType[] flow?: NodeType[],
): groupedObjType[] { ): groupedObjType[] {
const baseClassesSet = new Set(baseClasses.split("\n")); const baseClassesSet = new Set(baseClasses.split("\n"));
let arrOfPossibleInputs: Array<{ let arrOfPossibleInputs: Array<{
@ -243,7 +243,7 @@ export function groupByFamily(
baseClassesSet.has(template.type)) || baseClassesSet.has(template.type)) ||
(template?.input_types && (template?.input_types &&
template?.input_types.some((inputType) => template?.input_types.some((inputType) =>
baseClassesSet.has(inputType) baseClassesSet.has(inputType),
))) )))
); );
}; };
@ -263,7 +263,7 @@ export function groupByFamily(
hasBaseClassInBaseClasses: hasBaseClassInBaseClasses:
foundNode?.hasBaseClassInBaseClasses || foundNode?.hasBaseClassInBaseClasses ||
nodeData.node!.base_classes.some((baseClass) => nodeData.node!.base_classes.some((baseClass) =>
baseClassesSet.has(baseClass) baseClassesSet.has(baseClass),
), //seta como anterior ou verifica se o node tem base class ), //seta como anterior ou verifica se o node tem base class
displayName: nodeData.node?.display_name, displayName: nodeData.node?.display_name,
}); });
@ -280,10 +280,10 @@ export function groupByFamily(
if (!foundNode) { if (!foundNode) {
foundNode = { foundNode = {
hasBaseClassInTemplate: Object.values(node!.template).some( hasBaseClassInTemplate: Object.values(node!.template).some(
checkBaseClass checkBaseClass,
), ),
hasBaseClassInBaseClasses: node!.base_classes.some((baseClass) => hasBaseClassInBaseClasses: node!.base_classes.some((baseClass) =>
baseClassesSet.has(baseClass) baseClassesSet.has(baseClass),
), ),
displayName: node?.display_name, displayName: node?.display_name,
}; };
@ -355,7 +355,7 @@ export function isTimeStampString(str: string): boolean {
export function extractColumnsFromRows( export function extractColumnsFromRows(
rows: object[], rows: object[],
mode: "intersection" | "union", mode: "intersection" | "union",
excludeColumns?: Array<string> excludeColumns?: Array<string>,
): (ColDef<any> | ColGroupDef<any>)[] { ): (ColDef<any> | ColGroupDef<any>)[] {
let columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {}; let columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {};
if (rows.length === 0) { if (rows.length === 0) {

66
src/frontend/tests/end-to-end/chatInputOutput.spec.ts
View file

@ -28,27 +28,55 @@ test("chat_io_teste", async ({ page }) => {
); );
await page.getByTestId("blank-flow").click(); await page.getByTestId("blank-flow").click();
await page.waitForTimeout(2000); await page.waitForTimeout(3000);
await page.getByTestId("extended-disclosure").click();
await page.getByPlaceholder("Search").click();
await page.getByPlaceholder("Search").fill("chat output");
await page.waitForTimeout(1000);
// Create the DataTransfer and File await page
const dataTransfer = await page.evaluateHandle((data) => { .getByTestId("outputsChat Output")
const dt = new DataTransfer(); .dragTo(page.locator('//*[@id="react-flow-id"]'));
// Convert the buffer to a hex array await page.mouse.up();
const file = new File([data], "ChatTest.json", { await page.mouse.down();
type: "application/json",
}); await page.getByPlaceholder("Search").click();
dt.items.add(file); await page.getByPlaceholder("Search").fill("chat input");
return dt; await page.waitForTimeout(1000);
}, jsonContent);
await page
.getByTestId("inputsChat Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.mouse.up();
await page.mouse.down();
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
// Click and hold on the first element
await page
.locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[10]/button/div/div',
)
.hover();
await page.mouse.down();
// Move to the second element
await page
.locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[4]/div/button/div/div',
)
.hover();
// Release the mouse
await page.mouse.up();
// Now dispatch
await page.dispatchEvent(
'//*[@id="react-flow-id"]/div[1]/div[1]/div',
"drop",
{
dataTransfer,
},
);
await page.getByLabel("fit view").click(); await page.getByLabel("fit view").click();
await page.getByText("Playground", { exact: true }).click(); await page.getByText("Playground", { exact: true }).click();
await page.getByPlaceholder("Send a message...").click(); await page.getByPlaceholder("Send a message...").click();

13
src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
View file

@ -56,10 +56,15 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
.getByTestId("textarea-input_value") .getByTestId("textarea-input_value")
.nth(1) .nth(1)
.fill( .fill(
"testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!" "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
); );
await page.getByText("Playground", { exact: true }).last().click();
await page.getByTestId("icon-LucideSend").click(); await page.getByTestId("icon-LucideSend").click();
await page.getByText("Close", { exact: true }).click(); await page.getByText("Close", { exact: true }).click();
await page.getByText("Chat Input", { exact: true }).click();
await page.getByTestId("advanced-button-modal").click();
await page.getByTestId("showsender_name").click();
await page.getByText("Save Changes", { exact: true }).click();
await page await page
.getByTestId("popover-anchor-input-sender_name") .getByTestId("popover-anchor-input-sender_name")
@ -87,9 +92,9 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
await page await page
.getByText( .getByText(
"testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!", "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
{ exact: true } { exact: true },
) )
.isVisible() .isVisible(),
); );
}); });
@ -199,7 +204,7 @@ test("user must be able to send an image on chat", async ({ page }) => {
const jsonContent = readFileSync( const jsonContent = readFileSync(
"src/frontend/tests/end-to-end/assets/chain.png", "src/frontend/tests/end-to-end/assets/chain.png",
"utf-8" "utf-8",
); );
// Create the DataTransfer and File // Create the DataTransfer and File

1
src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
View file

@ -40,6 +40,7 @@ test("CodeAreaModalComponent", async ({ page }) => {
await page.getByTitle("zoom out").click(); await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click(); await page.getByTitle("zoom out").click();
await page.getByTestId("div-generic-node").click(); await page.getByTestId("div-generic-node").click();
await page.getByTestId("code-button-modal").click(); await page.getByTestId("code-button-modal").click();
const wCode = const wCode =