From 795068b4a4543fe6f73d7c7d4f0bc4fc06812974 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 28 Feb 2024 17:32:52 -0300 Subject: [PATCH 01/12] Add OpenAI icon to ConversationalAgent and ChatOpenAIComponent --- .../langflow/components/agents/OpenAIConversationalAgent.py | 3 ++- src/backend/langflow/components/model_specs/ChatOpenAISpecs.py | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/backend/langflow/components/agents/OpenAIConversationalAgent.py b/src/backend/langflow/components/agents/OpenAIConversationalAgent.py index 5dfb53387..5a411ecec 100644 --- a/src/backend/langflow/components/agents/OpenAIConversationalAgent.py +++ b/src/backend/langflow/components/agents/OpenAIConversationalAgent.py @@ -16,7 +16,8 @@ from langflow.field_typing.range_spec import RangeSpec class ConversationalAgent(CustomComponent): display_name: str = "OpenAI Conversational Agent" description: str = "Conversational Agent that can use OpenAI's function calling API" - + icon = "OpenAI" + def build_config(self): openai_function_models = [ "gpt-4-turbo-preview", diff --git a/src/backend/langflow/components/model_specs/ChatOpenAISpecs.py b/src/backend/langflow/components/model_specs/ChatOpenAISpecs.py index 2ad4f0309..0f20f0852 100644 --- a/src/backend/langflow/components/model_specs/ChatOpenAISpecs.py +++ b/src/backend/langflow/components/model_specs/ChatOpenAISpecs.py @@ -9,6 +9,7 @@ from langflow.field_typing import BaseLanguageModel, NestedDict class ChatOpenAIComponent(CustomComponent): display_name = "ChatOpenAI" description = "`OpenAI` Chat large language models API." + icon = "OpenAI" def build_config(self): return { From b25d5b4a5b2b9c56a15d53f778b60a13994acaa7 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 28 Feb 2024 17:38:08 -0300 Subject: [PATCH 02/12] Add Google icon to components --- .../langflow/components/model_specs/GoogleGenerativeAISpecs.py | 1 + .../langflow/components/models/GoogleGenerativeAIModel.py | 1 + src/frontend/src/utils/styleUtils.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/src/backend/langflow/components/model_specs/GoogleGenerativeAISpecs.py b/src/backend/langflow/components/model_specs/GoogleGenerativeAISpecs.py index eb1134583..9ff17e389 100644 --- a/src/backend/langflow/components/model_specs/GoogleGenerativeAISpecs.py +++ b/src/backend/langflow/components/model_specs/GoogleGenerativeAISpecs.py @@ -10,6 +10,7 @@ class GoogleGenerativeAIComponent(CustomComponent): display_name: str = "Google Generative AI" description: str = "A component that uses Google Generative AI to generate text." documentation: str = "http://docs.langflow.org/components/custom" + icon = "Google" def build_config(self): return { diff --git a/src/backend/langflow/components/models/GoogleGenerativeAIModel.py b/src/backend/langflow/components/models/GoogleGenerativeAIModel.py index 423a66df6..50a3f0f7a 100644 --- a/src/backend/langflow/components/models/GoogleGenerativeAIModel.py +++ b/src/backend/langflow/components/models/GoogleGenerativeAIModel.py @@ -11,6 +11,7 @@ class GoogleGenerativeAIComponent(LCModelComponent): display_name: str = "Google Generative AIModel" description: str = "Generate text using Google Generative AI to generate text." icon = "GoogleGenerativeAI" + icon = "Google" def build_config(self): return { diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index 4abcecdaf..0c0d54014 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -270,6 +270,7 @@ export const nodeIconsLucide: iconsType = { GoogleSearchAPIWrapper: GoogleIcon, GoogleSearchResults: GoogleIcon, GoogleSearchRun: GoogleIcon, + Google: GoogleIcon, HNLoader: HackerNewsIcon, HuggingFaceHub: HuggingFaceIcon, HuggingFaceEmbeddings: HuggingFaceIcon, From 907300881bf14f327ee3abcca114da96394bdf74 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 28 Feb 2024 17:41:17 -0300 Subject: [PATCH 03/12] Update Amazon icons in code --- .../langflow/components/model_specs/AmazonBedrockSpecs.py | 2 ++ src/backend/langflow/components/models/AmazonBedrockModel.py | 2 +- src/backend/langflow/components/retrievers/AmazonKendra.py | 1 + src/frontend/src/utils/styleUtils.ts | 1 + 4 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/backend/langflow/components/model_specs/AmazonBedrockSpecs.py b/src/backend/langflow/components/model_specs/AmazonBedrockSpecs.py index 0c1e3b159..3b79ff76c 100644 --- a/src/backend/langflow/components/model_specs/AmazonBedrockSpecs.py +++ b/src/backend/langflow/components/model_specs/AmazonBedrockSpecs.py @@ -10,6 +10,8 @@ from langflow import CustomComponent class AmazonBedrockComponent(CustomComponent): display_name: str = "Amazon Bedrock" description: str = "LLM model from Amazon Bedrock." + icon = "Amazon" + def build_config(self): return { diff --git a/src/backend/langflow/components/models/AmazonBedrockModel.py b/src/backend/langflow/components/models/AmazonBedrockModel.py index 4ae28e70c..fdddc07d1 100644 --- a/src/backend/langflow/components/models/AmazonBedrockModel.py +++ b/src/backend/langflow/components/models/AmazonBedrockModel.py @@ -9,7 +9,7 @@ from langflow.field_typing import Text class AmazonBedrockComponent(LCModelComponent): display_name: str = "Amazon Bedrock Model" description: str = "Generate text using LLM model from Amazon Bedrock." - icon = "AmazonBedrock" + icon = "Amazon" def build_config(self): return { diff --git a/src/backend/langflow/components/retrievers/AmazonKendra.py b/src/backend/langflow/components/retrievers/AmazonKendra.py index c0aedb1bc..886afeff5 100644 --- a/src/backend/langflow/components/retrievers/AmazonKendra.py +++ b/src/backend/langflow/components/retrievers/AmazonKendra.py @@ -9,6 +9,7 @@ from langflow import CustomComponent class AmazonKendraRetrieverComponent(CustomComponent): display_name: str = "Amazon Kendra Retriever" description: str = "Retriever that uses the Amazon Kendra API." + icon = "Amazon" def build_config(self): return { diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index 0c0d54014..8cc5ce054 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -258,6 +258,7 @@ export const nodeIconsLucide: iconsType = { Chroma: ChromaIcon, AirbyteJSONLoader: AirbyteIcon, AmazonBedrockEmbeddings: AWSIcon, + Amazon: AWSIcon, Anthropic: AnthropicIcon, ChatAnthropic: AnthropicIcon, BingSearchAPIWrapper: BingIcon, From 4fea0d4b13ba19cf82166f2940a1ee71eeab440d Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 28 Feb 2024 17:44:43 -0300 Subject: [PATCH 04/12] Add icon to CohereComponent --- src/backend/langflow/components/model_specs/CohereSpecs.py | 1 + 1 file changed, 1 insertion(+) diff --git a/src/backend/langflow/components/model_specs/CohereSpecs.py b/src/backend/langflow/components/model_specs/CohereSpecs.py index 3b74fc9b4..8cb0f3624 100644 --- a/src/backend/langflow/components/model_specs/CohereSpecs.py +++ b/src/backend/langflow/components/model_specs/CohereSpecs.py @@ -7,6 +7,7 @@ class CohereComponent(CustomComponent): display_name = "Cohere" description = "Cohere large language models." documentation = "https://python.langchain.com/docs/modules/model_io/models/llms/integrations/cohere" + icon = "Cohere" def build_config(self): return { From 72a0eec57298ec1dd57c537419ca907f838a6a30 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 28 Feb 2024 17:47:55 -0300 Subject: [PATCH 05/12] Add MongoDB icon to MongoDBAtlasComponent and styleUtils --- .../langflow/components/vectorstores/MongoDBAtlasVector.py | 1 + src/frontend/src/utils/styleUtils.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/backend/langflow/components/vectorstores/MongoDBAtlasVector.py b/src/backend/langflow/components/vectorstores/MongoDBAtlasVector.py index de5533b0a..5d4537408 100644 --- a/src/backend/langflow/components/vectorstores/MongoDBAtlasVector.py +++ b/src/backend/langflow/components/vectorstores/MongoDBAtlasVector.py @@ -11,6 +11,7 @@ class MongoDBAtlasComponent(CustomComponent): description = ( "Construct a `MongoDB Atlas Vector Search` vector store from raw documents." ) + icon="MongoDB" def build_config(self): return { diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index 8cc5ce054..c57530104 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -279,6 +279,8 @@ export const nodeIconsLucide: iconsType = { Meta: MetaIcon, Midjorney: MidjourneyIcon, MongoDBAtlasVectorSearch: MongoDBIcon, + MongoDB:MongoDBIcon, + MongoDBChatMessageHistory: MongoDBIcon, NotionDirectoryLoader: NotionIcon, ChatOpenAI: OpenAiIcon, AzureChatOpenAI: OpenAiIcon, From ddaa9a2c8c773269100df79dbe7f58097ba99c65 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 28 Feb 2024 17:50:54 -0300 Subject: [PATCH 06/12] Add icon to model specs classes --- .../langflow/components/model_specs/AnthropicLLMSpecs.py | 1 + src/backend/langflow/components/model_specs/AnthropicSpecs.py | 2 ++ .../langflow/components/model_specs/ChatAnthropicSpecs.py | 1 + 3 files changed, 4 insertions(+) diff --git a/src/backend/langflow/components/model_specs/AnthropicLLMSpecs.py b/src/backend/langflow/components/model_specs/AnthropicLLMSpecs.py index 94c4ed8f5..121c5b2c2 100644 --- a/src/backend/langflow/components/model_specs/AnthropicLLMSpecs.py +++ b/src/backend/langflow/components/model_specs/AnthropicLLMSpecs.py @@ -10,6 +10,7 @@ from langflow import CustomComponent class AnthropicLLM(CustomComponent): display_name: str = "AnthropicLLM" description: str = "Anthropic Chat&Completion large language models." + icon ="Anthropic" def build_config(self): return { diff --git a/src/backend/langflow/components/model_specs/AnthropicSpecs.py b/src/backend/langflow/components/model_specs/AnthropicSpecs.py index c1b776617..7a0f3e4db 100644 --- a/src/backend/langflow/components/model_specs/AnthropicSpecs.py +++ b/src/backend/langflow/components/model_specs/AnthropicSpecs.py @@ -10,6 +10,8 @@ from langflow.field_typing import BaseLanguageModel, NestedDict class AnthropicComponent(CustomComponent): display_name = "Anthropic" description = "Anthropic large language models." + icon ="Anthropic" + def build_config(self): return { diff --git a/src/backend/langflow/components/model_specs/ChatAnthropicSpecs.py b/src/backend/langflow/components/model_specs/ChatAnthropicSpecs.py index c0e376d16..9534c7cf1 100644 --- a/src/backend/langflow/components/model_specs/ChatAnthropicSpecs.py +++ b/src/backend/langflow/components/model_specs/ChatAnthropicSpecs.py @@ -9,6 +9,7 @@ class ChatAnthropicComponent(CustomComponent): display_name = "ChatAnthropic" description = "`Anthropic` chat large language models." documentation = "https://python.langchain.com/docs/modules/model_io/models/chat/integrations/anthropic" + icon ="Anthropic" def build_config(self): return { From 0dc45c3c5080655c24ae4fa158e9a4f6f1ad7e3a Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 28 Feb 2024 17:54:08 -0300 Subject: [PATCH 07/12] Add HuggingFace icon to components --- .../langflow/components/embeddings/HuggingFaceEmbeddings.py | 1 + .../components/embeddings/HuggingFaceInferenceAPIEmbeddings.py | 2 ++ .../components/model_specs/HuggingFaceEndpointsSpecs.py | 2 ++ src/frontend/src/utils/styleUtils.ts | 1 + 4 files changed, 6 insertions(+) diff --git a/src/backend/langflow/components/embeddings/HuggingFaceEmbeddings.py b/src/backend/langflow/components/embeddings/HuggingFaceEmbeddings.py index 6f3540358..4b25dffe7 100644 --- a/src/backend/langflow/components/embeddings/HuggingFaceEmbeddings.py +++ b/src/backend/langflow/components/embeddings/HuggingFaceEmbeddings.py @@ -9,6 +9,7 @@ class HuggingFaceEmbeddingsComponent(CustomComponent): documentation = ( "https://python.langchain.com/docs/modules/data_connection/text_embedding/integrations/sentence_transformers" ) + icon="HuggingFace" def build_config(self): return { diff --git a/src/backend/langflow/components/embeddings/HuggingFaceInferenceAPIEmbeddings.py b/src/backend/langflow/components/embeddings/HuggingFaceInferenceAPIEmbeddings.py index acc828d7f..edb83ed72 100644 --- a/src/backend/langflow/components/embeddings/HuggingFaceInferenceAPIEmbeddings.py +++ b/src/backend/langflow/components/embeddings/HuggingFaceInferenceAPIEmbeddings.py @@ -9,6 +9,8 @@ class HuggingFaceInferenceAPIEmbeddingsComponent(CustomComponent): display_name = "HuggingFaceInferenceAPIEmbeddings" description = "HuggingFace sentence_transformers embedding models, API version." documentation = "https://github.com/huggingface/text-embeddings-inference" + icon="HuggingFace" + def build_config(self): return { diff --git a/src/backend/langflow/components/model_specs/HuggingFaceEndpointsSpecs.py b/src/backend/langflow/components/model_specs/HuggingFaceEndpointsSpecs.py index 579e3c0b3..704de9029 100644 --- a/src/backend/langflow/components/model_specs/HuggingFaceEndpointsSpecs.py +++ b/src/backend/langflow/components/model_specs/HuggingFaceEndpointsSpecs.py @@ -8,6 +8,8 @@ from langflow import CustomComponent class HuggingFaceEndpointsComponent(CustomComponent): display_name: str = "Hugging Face Inference API" description: str = "LLM model from Hugging Face Inference API." + icon="HuggingFace" + def build_config(self): return { diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index c57530104..c43081381 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -274,6 +274,7 @@ export const nodeIconsLucide: iconsType = { Google: GoogleIcon, HNLoader: HackerNewsIcon, HuggingFaceHub: HuggingFaceIcon, + HuggingFace: HuggingFaceIcon, HuggingFaceEmbeddings: HuggingFaceIcon, IFixitLoader: IFixIcon, Meta: MetaIcon, From fa6ff4178836e60420e4efbc3f8962b4e9d98bf9 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 28 Feb 2024 17:55:20 -0300 Subject: [PATCH 08/12] Add icon to QdrantComponent and QdrantSearchComponent --- src/backend/langflow/components/vectorstores/Qdrant.py | 1 + src/backend/langflow/components/vectorstores/QdrantSearch.py | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/backend/langflow/components/vectorstores/Qdrant.py b/src/backend/langflow/components/vectorstores/Qdrant.py index 6d68cdd55..3541f09e2 100644 --- a/src/backend/langflow/components/vectorstores/Qdrant.py +++ b/src/backend/langflow/components/vectorstores/Qdrant.py @@ -10,6 +10,7 @@ from langflow.field_typing import Document, Embeddings, NestedDict class QdrantComponent(CustomComponent): display_name = "Qdrant" description = "Construct Qdrant wrapper from a list of texts." + icon="Qdrant" def build_config(self): return { diff --git a/src/backend/langflow/components/vectorstores/QdrantSearch.py b/src/backend/langflow/components/vectorstores/QdrantSearch.py index 46e2766fd..742690a5d 100644 --- a/src/backend/langflow/components/vectorstores/QdrantSearch.py +++ b/src/backend/langflow/components/vectorstores/QdrantSearch.py @@ -9,6 +9,8 @@ from langflow.schema import Record class QdrantSearchComponent(QdrantComponent, LCVectorStoreComponent): display_name = "Qdrant" description = "Construct Qdrant wrapper from a list of texts." + icon="Qdrant" + def build_config(self): return { From 59db705a195fee11c44b2254a4608b4dbe4e401d Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 28 Feb 2024 17:59:43 -0300 Subject: [PATCH 09/12] Add VertexAI icon to ChatVertexAI and VertexAI components --- .../langflow/components/model_specs/ChatVertexAISpecs.py | 2 ++ src/backend/langflow/components/model_specs/VertexAISpecs.py | 1 + src/backend/langflow/components/models/VertexAiModel.py | 2 ++ 3 files changed, 5 insertions(+) diff --git a/src/backend/langflow/components/model_specs/ChatVertexAISpecs.py b/src/backend/langflow/components/model_specs/ChatVertexAISpecs.py index 66235a1d8..8cc7b4256 100644 --- a/src/backend/langflow/components/model_specs/ChatVertexAISpecs.py +++ b/src/backend/langflow/components/model_specs/ChatVertexAISpecs.py @@ -10,6 +10,8 @@ from langflow.field_typing import BaseLanguageModel class ChatVertexAIComponent(CustomComponent): display_name = "ChatVertexAI" description = "`Vertex AI` Chat large language models API." + icon="VertexAI" + def build_config(self): return { diff --git a/src/backend/langflow/components/model_specs/VertexAISpecs.py b/src/backend/langflow/components/model_specs/VertexAISpecs.py index 008451bc8..a6013e17d 100644 --- a/src/backend/langflow/components/model_specs/VertexAISpecs.py +++ b/src/backend/langflow/components/model_specs/VertexAISpecs.py @@ -7,6 +7,7 @@ from langchain_community.llms.vertexai import VertexAI class VertexAIComponent(CustomComponent): display_name = "VertexAI" description = "Google Vertex AI large language models" + icon="VertexAI" def build_config(self): return { diff --git a/src/backend/langflow/components/models/VertexAiModel.py b/src/backend/langflow/components/models/VertexAiModel.py index d7eab71ed..5a1950f39 100644 --- a/src/backend/langflow/components/models/VertexAiModel.py +++ b/src/backend/langflow/components/models/VertexAiModel.py @@ -9,6 +9,8 @@ from langflow.field_typing import Text class ChatVertexAIComponent(LCModelComponent): display_name = "ChatVertexAIModel" description = "Generate text using Vertex AI Chat large language models API." + icon="VertexAI" + def build_config(self): return { From 706e80aeedf602b3f91f3b63f9e846a3632f8b54 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 28 Feb 2024 18:01:36 -0300 Subject: [PATCH 10/12] Add icons to Vectara and Weaviate components --- .../langflow/components/retrievers/VectaraSelfQueryRetriver.py | 2 ++ src/backend/langflow/components/vectorstores/Vectara.py | 1 + src/backend/langflow/components/vectorstores/VectaraSearch.py | 2 ++ src/backend/langflow/components/vectorstores/WeaviateSearch.py | 2 ++ 4 files changed, 7 insertions(+) diff --git a/src/backend/langflow/components/retrievers/VectaraSelfQueryRetriver.py b/src/backend/langflow/components/retrievers/VectaraSelfQueryRetriver.py index 26afd765c..aa4f412a8 100644 --- a/src/backend/langflow/components/retrievers/VectaraSelfQueryRetriver.py +++ b/src/backend/langflow/components/retrievers/VectaraSelfQueryRetriver.py @@ -17,6 +17,8 @@ class VectaraSelfQueryRetriverComponent(CustomComponent): description: str = "Implementation of Vectara Self Query Retriever" documentation = "https://python.langchain.com/docs/integrations/retrievers/self_query/vectara_self_query" beta = True + icon="Vectara" + field_config = { "code": {"show": True}, diff --git a/src/backend/langflow/components/vectorstores/Vectara.py b/src/backend/langflow/components/vectorstores/Vectara.py index b5360ffd2..5ac105543 100644 --- a/src/backend/langflow/components/vectorstores/Vectara.py +++ b/src/backend/langflow/components/vectorstores/Vectara.py @@ -18,6 +18,7 @@ class VectaraComponent(CustomComponent): "https://python.langchain.com/docs/integrations/vectorstores/vectara" ) beta = True + icon="Vectara" field_config = { "vectara_customer_id": { "display_name": "Vectara Customer ID", diff --git a/src/backend/langflow/components/vectorstores/VectaraSearch.py b/src/backend/langflow/components/vectorstores/VectaraSearch.py index c90148d1e..da2c083d1 100644 --- a/src/backend/langflow/components/vectorstores/VectaraSearch.py +++ b/src/backend/langflow/components/vectorstores/VectaraSearch.py @@ -14,6 +14,8 @@ class VectaraSearchComponent(VectaraComponent, LCVectorStoreComponent): "https://python.langchain.com/docs/integrations/vectorstores/vectara" ) beta = True + icon="Vectara" + field_config = { "search_type": { "display_name": "Search Type", diff --git a/src/backend/langflow/components/vectorstores/WeaviateSearch.py b/src/backend/langflow/components/vectorstores/WeaviateSearch.py index 2d7001074..3eda5c583 100644 --- a/src/backend/langflow/components/vectorstores/WeaviateSearch.py +++ b/src/backend/langflow/components/vectorstores/WeaviateSearch.py @@ -14,6 +14,8 @@ class WeaviateSearchVectorStore(WeaviateVectorStoreComponent, LCVectorStoreCompo "https://python.langchain.com/docs/integrations/vectorstores/weaviate" ) beta = True + icon="Weaviate" + field_config = { "search_type": { "display_name": "Search Type", From f7fbf1465973208e11fa7fd4b59b42f11271d3c1 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 28 Feb 2024 18:04:28 -0300 Subject: [PATCH 11/12] Add Supabase icon to search component --- .../components/vectorstores/SupabaseVectorStoreSearch.py | 1 + src/frontend/src/utils/styleUtils.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/backend/langflow/components/vectorstores/SupabaseVectorStoreSearch.py b/src/backend/langflow/components/vectorstores/SupabaseVectorStoreSearch.py index 493632fe9..3a57f7951 100644 --- a/src/backend/langflow/components/vectorstores/SupabaseVectorStoreSearch.py +++ b/src/backend/langflow/components/vectorstores/SupabaseVectorStoreSearch.py @@ -11,6 +11,7 @@ from langflow.schema import Record class SupabaseSearchComponent(LCVectorStoreComponent): display_name = "Supabase Search" description = "Search a Supabase Vector Store for similar documents." + icon="Supabase" def build_config(self): return { diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index c43081381..2cd74d6d1 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -294,6 +294,7 @@ export const nodeIconsLucide: iconsType = { Searx: SearxIcon, SlackDirectoryLoader: SvgSlackIcon, SupabaseVectorStore: SupabaseIcon, + Supabase: SupabaseIcon, VertexAI: VertexAIIcon, ChatVertexAI: VertexAIIcon, VertexAIEmbeddings: VertexAIIcon, From 0e55a4f8c8ea3de7be5f8bcc17b65245bd72826f Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Wed, 28 Feb 2024 18:09:06 -0300 Subject: [PATCH 12/12] Feat: add shortcut to open code modal (Ctrl shift C) --- src/frontend/src/App.tsx | 20 ++++++++++++++++++ .../src/CustomNodes/GenericNode/index.tsx | 1 + .../src/modals/codeAreaModal/index.tsx | 21 +++++++++++++++++++ .../components/nodeToolbarComponent/index.tsx | 9 ++++++++ src/frontend/src/stores/flowStore.ts | 10 +++++++++ src/frontend/src/types/components/index.ts | 1 + src/frontend/src/types/zustand/flow/index.ts | 2 ++ 7 files changed, 64 insertions(+) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index ad76ff49a..7faf4bc79 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -21,6 +21,7 @@ import { useDarkStore } from "./stores/darkStore"; import useFlowsManagerStore from "./stores/flowsManagerStore"; import { useStoreStore } from "./stores/storeStore"; import { useTypesStore } from "./stores/typesStore"; +import useFlowStore from "./stores/flowStore"; export default function App() { const removeFromTempNotificationList = useAlertStore( @@ -44,6 +45,25 @@ export default function App() { const refreshStars = useDarkStore((state) => state.refreshStars); const checkHasStore = useStoreStore((state) => state.checkHasStore); + const handleModalWShortcut = useFlowStore(state => state.handleModalWShortcut); + const nodes = useFlowStore(state => state.nodes); + + useEffect(() => { + const onKeyDown = (event: KeyboardEvent) => { + const selectedNode = nodes.filter((obj) => obj.selected); + if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "C" && selectedNode.length > 0) { + event.preventDefault(); + handleModalWShortcut("code"); + } + }; + + document.addEventListener("keydown", onKeyDown); + + return () => { + document.removeEventListener("keydown", onKeyDown); + }; + }, [handleModalWShortcut, nodes]); + useEffect(() => { refreshStars(); refreshVersion(); diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index ecfe6b5eb..8a83aac62 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -267,6 +267,7 @@ export default function GenericNode({ showNode={showNode} openAdvancedModal={false} onCloseAdvancedModal={() => {}} + selected={selected} >
state.handleModalWShortcut) + const openCodeModalWShortcut = useFlowStore(state => state.openCodeModalWShortcut); +const nodes = useFlowStore(state => state.nodes); + +useEffect(() => { + const onKeyDown = (event: KeyboardEvent) => { + + const selectedNode = nodes.filter((obj) => obj.selected); + if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "C" && selectedNode.length > 0) { + event.preventDefault(); + setOpen(openCodeModalWShortcut) + } + + } + document.addEventListener("keydown", onKeyDown); + + return () => { + document.removeEventListener("keydown", onKeyDown); + } +}, []); + useEffect(() => { if (openModal) setOpen(true); }, [openModal]); diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index a0136ba85..7eef65c7e 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -36,6 +36,7 @@ export default function NodeToolbarComponent({ numberOfHandles, showNode, name = "code", + selected, onCloseAdvancedModal, }: nodeToolbarPropsType): JSX.Element { const nodeLength = Object.keys(data.node!.template).filter( @@ -89,6 +90,14 @@ export default function NodeToolbarComponent({ }, [showModalAdvanced]); const updateNodeInternals = useUpdateNodeInternals(); + const openCodeModalWShortcut = useFlowStore(state => state.openCodeModalWShortcut); + const handleModalWShortcut = useFlowStore(state => state.handleModalWShortcut); + + useEffect(() => { + console.log(openCodeModalWShortcut) + setOpenModal(openCodeModalWShortcut) + }, [openCodeModalWShortcut, handleModalWShortcut]) + const setLastCopiedSelection = useFlowStore(state => state.setLastCopiedSelection); useEffect(() => { setFlowComponent(createFlowComponent(cloneDeep(data), version)); diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index f9a211e86..1d1c1ad14 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -48,6 +48,16 @@ const useFlowStore = create((set, get) => ({ flowPool: {}, inputs: [], outputs: [], + openCodeModalWShortcut: false, + handleModalWShortcut: ((modal) => { + switch (modal) { + case "code": + set((state) => ({ + openCodeModalWShortcut: !state.openCodeModalWShortcut, + })); + break + } + }), setFlowPool: (flowPool) => { set({ flowPool }); }, diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 30a32ba19..4f5d1bb60 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -484,6 +484,7 @@ export type nodeToolbarPropsType = { name?: string; openAdvancedModal?: boolean; onCloseAdvancedModal?: (close: boolean) => void; + selected: boolean; }; export type parsedDataType = { diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index c506b034f..1b3056122 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -37,6 +37,8 @@ export type FlowPoolType = { }; export type FlowStoreType = { + openCodeModalWShortcut: boolean; + handleModalWShortcut: (modal: string) => void flowPool: FlowPoolType; inputs: Array<{ type: string; id: string }>; outputs: Array<{ type: string; id: string }>;