Merge branch 'main' into dev

src/frontend/package-lock.json

@@ -7370,4 +7370,4 @@
             }
         }
     }
-}
+}

src/frontend/src/components/chatComponent/chatTrigger/index.tsx

@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
 import {
-	Bars3CenterLeftIcon,
+  Bars3CenterLeftIcon,
-	ChatBubbleBottomCenterTextIcon,
+  ChatBubbleBottomCenterTextIcon,
 } from "@heroicons/react/24/outline";
 import { nodeColors } from "../../../utils";
 import { PopUpContext } from "../../../contexts/popUpContext";
@@ -9,37 +9,37 @@ import { useContext } from "react";
 import ChatModal from "../../../modals/chatModal";
 
 export default function ChatTrigger({ open, setOpen }) {
-	const { openPopUp } = useContext(PopUpContext);
+  const { openPopUp } = useContext(PopUpContext);
-	return (
+  return (
-		<Transition
+    <Transition
-			show={!open}
+      show={!open}
-			appear={true}
+      appear={true}
-			enter="transition ease-out duration-300"
+      enter="transition ease-out duration-300"
-			enterFrom="translate-y-96"
+      enterFrom="translate-y-96"
-			enterTo="translate-y-0"
+      enterTo="translate-y-0"
-			leave="transition ease-in duration-300"
+      leave="transition ease-in duration-300"
-			leaveFrom="translate-y-0"
+      leaveFrom="translate-y-0"
-			leaveTo="translate-y-96"
+      leaveTo="translate-y-96"
-		>
+    >
-			<div className="absolute bottom-4 right-3">
+      <div className="absolute bottom-4 right-3">
-				<div
+        <div
-					// style={{ backgroundColor: nodeColors["chat"] }}
+          // style={{ backgroundColor: nodeColors["chat"] }}
-					className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 dark:border-gray-600"
+          className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 dark:border-gray-600"
-				>
+        >
-					<button
+          <button
-						onClick={() => {
+            onClick={() => {
-							setOpen(true);
+              setOpen(true);
-						}}
+            }}
-					>
+          >
-						<div className="flex gap-3  items-center">
+            <div className="flex gap-3  items-center">
-							<ChatBubbleBottomCenterTextIcon
+              <ChatBubbleBottomCenterTextIcon
-								className="h-6 w-6 mt-1"
+                className="h-6 w-6 mt-1"
-								style={{ color: "white" }}
+                style={{ color: "white" }}
-							/>
+              />
-						</div>
+            </div>
-					</button>
+          </button>
-				</div>
+        </div>
-			</div>
+      </div>
-		</Transition>
+    </Transition>
-	);
+  );
 }

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -57,7 +57,7 @@ export default function CodeAreaComponent({
 						);
 					}}
 				>
-					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
 				</button>
 			</div>
 		</div>

src/frontend/src/components/promptComponent/index.tsx

@@ -58,7 +58,7 @@ export default function PromptAreaComponent({
 						);
 					}}
 				>
-					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
 				</button>
 			</div>
 		</div>

src/frontend/src/components/textAreaComponent/index.tsx

@@ -25,7 +25,7 @@ export default function TextAreaComponent({ value, onChange, disabled }:TextArea
             {myValue !== "" ? myValue : 'Text empty'}
         </span>
         <button onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
         </button>
       </div>
     </div>

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -92,10 +92,10 @@ export default function ButtonBox({
 								<div className={textColor}>{icon}</div>
 							</div>
 						</div>
-						<div className="mt-auto mb-auto">
+						<div className="w-full mt-auto mb-auto">
 						<h3
 							className={classNames(
-								"font-semibold text-white dark:text-white/80",
+								"w-full font-semibold break-words text-white dark:text-white/80",
 								titleFontSize,
 								marginTop
 							)}

src/frontend/src/pages/FlowPage/index.tsx

@@ -30,9 +30,7 @@ import { typesContext } from "../../contexts/typesContext";
 import ConnectionLineComponent from "./components/ConnectionLineComponent";
 import { FlowType, NodeType } from "../../types/flow";
 import { APIClassType } from "../../types/api";
-import {
+import { isValidConnection } from "../../utils";
-  isValidConnection,
-} from "../../utils";
 import useUndoRedo from "./hooks/useUndoRedo";
 
 const nodeTypes = {
@@ -43,49 +41,48 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
   let { updateFlow, disableCopyPaste, addFlow, getNodeId, paste } =
     useContext(TabsContext);
   const { types, reactFlowInstance, setReactFlowInstance, templates } =
-  useContext(typesContext);
+    useContext(typesContext);
   const reactFlowWrapper = useRef(null);
-  
+
   const { undo, redo, canUndo, canRedo, takeSnapshot } = useUndoRedo();
-  
+
-  
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [lastSelection, setLastSelection] =
-  useState<OnSelectionChangeParams>(null);
+    useState<OnSelectionChangeParams>(null);
-  
+
   const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
-  
+
   useEffect(() => {
     // this effect is used to attach the global event handlers
-    
+
     const onKeyDown = (event: KeyboardEvent) => {
-      console.log("keydownou", lastCopiedSelection, position)
+      console.log("keydownou", lastCopiedSelection, position);
       if (
         (event.ctrlKey || event.metaKey) &&
         event.key === "c" &&
         lastSelection &&
         !disableCopyPaste
-        ) {
+      ) {
-          event.preventDefault();
+        event.preventDefault();
-          setLastCopiedSelection(_.cloneDeep(lastSelection));
+        setLastCopiedSelection(_.cloneDeep(lastSelection));
-        }
+      }
-        if (
+      if (
-          (event.ctrlKey || event.metaKey) &&
+        (event.ctrlKey || event.metaKey) &&
-          event.key === "v" &&
+        event.key === "v" &&
-          lastCopiedSelection &&
+        lastCopiedSelection &&
-          !disableCopyPaste
+        !disableCopyPaste
-          ) {
+      ) {
-            event.preventDefault();
+        event.preventDefault();
-            let bounds = reactFlowWrapper.current.getBoundingClientRect();
+        let bounds = reactFlowWrapper.current.getBoundingClientRect();
-            paste(lastCopiedSelection, {
+        paste(lastCopiedSelection, {
-              x: position.x - bounds.left,
+          x: position.x - bounds.left,
-              y: position.y - bounds.top,
+          y: position.y - bounds.top,
-            });
+        });
-          }
+      }
-          if (
+      if (
-            (event.ctrlKey || event.metaKey) &&
+        (event.ctrlKey || event.metaKey) &&
-            event.key === "g" &&
+        event.key === "g" &&
-            lastSelection
+        lastSelection
       ) {
         event.preventDefault();
         // addFlow(newFlow, false);
@@ -94,21 +91,18 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
     const handleMouseMove = (event) => {
       setPosition({ x: event.clientX, y: event.clientY });
     };
-    
+
-    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener("keydown", onKeyDown);
-    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener("mousemove", handleMouseMove);
-    
+
     return () => {
-      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener("mousemove", handleMouseMove);
     };
   }, [position, lastCopiedSelection, lastSelection]);
 
-
   const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);
 
-  
-
   const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
   const { setErrorData } = useContext(alertContext);
   const [nodes, setNodes, onNodesChange] = useNodesState(
@@ -314,10 +308,7 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
   }, []);
 
   return (
-    <div
+    <div className="w-full h-full" ref={reactFlowWrapper}>
-      className="w-full h-full"
-      ref={reactFlowWrapper}
-    >
       {Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? (
         <>
           <ReactFlow
@@ -357,4 +348,4 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
       )}
     </div>
   );
-}
+}

src/frontend/tailwind.config.js

@@ -76,6 +76,12 @@ module.exports = {
             backgroundColor: "#bbb",
           },
         },
+        ".dark .theme-attribution .react-flow__attribution": {
+          backgroundColor: "rgba(255, 255, 255, 0.2)",
+        },
+        ".dark .theme-attribution .react-flow__attribution a": {
+          color: "black",
+        },
       });
     }),
     require("@tailwindcss/typography"),