Merge remote-tracking branch 'origin/zustand/io/migration' into cz/fixTestsIo

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();

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -269,6 +269,7 @@ export default function GenericNode({
           showNode={showNode}
           openAdvancedModal={false}
           onCloseAdvancedModal={() => {}}
+          selected={selected}
         ></NodeToolbarComponent>
       </NodeToolbar>
       <div

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -47,6 +47,27 @@ export default function CodeAreaModal({
     }
   }, []);
 
+  const handleModalWShortcut = useFlowStore((state) => 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]);

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,13 @@ export default function NodeToolbarComponent({
   }, [showModalAdvanced]);
   const updateNodeInternals = useUpdateNodeInternals();
 
+  const openCodeModalWShortcut = useFlowStore(state => state.openCodeModalWShortcut);
+  const handleModalWShortcut = useFlowStore(state => state.handleModalWShortcut);
+
+  useEffect(() => {
+    setOpenModal(openCodeModalWShortcut)
+  }, [openCodeModalWShortcut, handleModalWShortcut])
+
   const setLastCopiedSelection = useFlowStore(
     (state) => state.setLastCopiedSelection
   );

src/frontend/src/stores/flowStore.ts

@@ -56,6 +56,16 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   flowPool: {},
   inputs: [],
   outputs: [],
+  openCodeModalWShortcut: false,
+  handleModalWShortcut: ((modal) => {
+    switch (modal) {
+      case "code":
+        set((state) => ({
+          openCodeModalWShortcut: !state.openCodeModalWShortcut,
+        }));
+        break
+    }
+  }),
   setFlowPool: (flowPool) => {
     set({ flowPool });
   },

src/frontend/src/types/components/index.ts

@@ -485,6 +485,7 @@ export type nodeToolbarPropsType = {
   name?: string;
   openAdvancedModal?: boolean;
   onCloseAdvancedModal?: (close: boolean) => void;
+  selected: boolean;
 };
 
 export type parsedDataType = {

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 }>;

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,
@@ -270,13 +271,17 @@ export const nodeIconsLucide: iconsType = {
   GoogleSearchAPIWrapper: GoogleIcon,
   GoogleSearchResults: GoogleIcon,
   GoogleSearchRun: GoogleIcon,
+  Google: GoogleIcon,
   HNLoader: HackerNewsIcon,
   HuggingFaceHub: HuggingFaceIcon,
+  HuggingFace: HuggingFaceIcon,
   HuggingFaceEmbeddings: HuggingFaceIcon,
   IFixitLoader: IFixIcon,
   Meta: MetaIcon,
   Midjorney: MidjourneyIcon,
   MongoDBAtlasVectorSearch: MongoDBIcon,
+  MongoDB:MongoDBIcon,
+  MongoDBChatMessageHistory: MongoDBIcon,
   NotionDirectoryLoader: NotionIcon,
   ChatOpenAI: OpenAiIcon,
   AzureChatOpenAI: OpenAiIcon,
@@ -289,6 +294,7 @@ export const nodeIconsLucide: iconsType = {
   Searx: SearxIcon,
   SlackDirectoryLoader: SvgSlackIcon,
   SupabaseVectorStore: SupabaseIcon,
+  Supabase: SupabaseIcon,
   VertexAI: VertexAIIcon,
   ChatVertexAI: VertexAIIcon,
   VertexAIEmbeddings: VertexAIIcon,