Merge branch 'form_io' of https://github.com/logspace-ai/langflow into form_io

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

@@ -5,6 +5,7 @@ import { TextAreaComponentType } from "../../types/components";
 import { TypeModal } from "../../utils";
 
 import { ExternalLink } from "lucide-react";
+import { TabsContext } from "../../contexts/tabsContext";
 
 export default function TextAreaComponent({
   value,
@@ -14,6 +15,7 @@ export default function TextAreaComponent({
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
   const { openPopUp, closePopUp } = useContext(PopUpContext);
+  const { setDisableCopyPaste } = useContext(TabsContext);
 
   useEffect(() => {
     if (disabled) {
@@ -31,6 +33,12 @@ export default function TextAreaComponent({
       <div className="flex w-full items-center">
         <input
           value={myValue}
+          onFocus={() => {
+            setDisableCopyPaste(true);
+          }}
+          onBlur={() => {
+            setDisableCopyPaste(false);
+          }}
           className={
             editNode
               ? " input-edit-node "

src/frontend/src/contexts/tabsContext.tsx

@@ -539,11 +539,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   const updateEdges = (edges) => {
     edges.forEach((edge) => {
-      edge.style = { stroke: "inherit" };
       edge.className =
-        edge.targetHandle.split("|")[0] === "Text"
+        (edge.targetHandle.split("|")[0] === "Text"
           ? "stroke-gray-800 "
-          : "stroke-gray-900 ";
+          : "stroke-gray-900 ") + " stroke-connection";
       edge.animated = edge.targetHandle.split("|")[0] === "Text";
     });
   };

src/frontend/src/index.css

@@ -27,8 +27,7 @@
   --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
   --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
   --radius: 0.5rem;
-  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */  
-  
   --round-btn-shadow: #00000063;
   
   --error-background: #fef2f2;
@@ -55,6 +54,8 @@
   --status-yellow: #eab308;
   --status-green: #4ade80;
   --status-blue:#2563eb;
+  --connection: #555;
+
 }
 
 .dark {
@@ -113,6 +114,8 @@
   --status-yellow: #eab308;
   --status-green: #4ade80;
   --status-blue: #2563eb;
+  --connection: #555;
+
 }}
 
 @layer base {

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

@@ -12,9 +12,8 @@ const ConnectionLineComponent = ({
       <path
         fill="none"
         // ! Replace hash # colors here
-        stroke="#222"
         strokeWidth={1.5}
-        className="animated "
+        className="animated stroke-connection "
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
         style={connectionLineStyle}
       />

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

@@ -184,11 +184,11 @@ export default function Page({ flow }: { flow: FlowType }) {
         addEdge(
           {
             ...params,
-            style: { stroke: "inherit" },
+            style: { stroke: "#555" },
             className:
-              params.targetHandle.split("|")[0] === "Text"
+              (params.targetHandle.split("|")[0] === "Text"
                 ? "stroke-foreground "
-                : "stroke-foreground ",
+                : "stroke-foreground ") + " stroke-connection",
             animated: params.targetHandle.split("|")[0] === "Text",
           },
           eds
@@ -338,7 +338,8 @@ export default function Page({ flow }: { flow: FlowType }) {
   const onSelectionEnd = useCallback(() => {
     setSelectionEnded(true);
   }, []);
-  const onSelectionStart = useCallback(() => {
+  const onSelectionStart = useCallback((event) => {
+    event.preventDefault();
     setSelectionEnded(false);
   }, []);
 
@@ -410,7 +411,6 @@ export default function Page({ flow }: { flow: FlowType }) {
                   nodesDraggable={!disableCopyPaste}
                   panOnDrag={!disableCopyPaste}
                   zoomOnDoubleClick={!disableCopyPaste}
-                  selectNodesOnDrag={false}
                   className="theme-attribution"
                   minZoom={0.01}
                   maxZoom={8}

src/frontend/tailwind.config.js

@@ -43,6 +43,7 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
       colors: {
+        connection: "var(--connection)",
         "almost-dark-gray": "var(--almost-dark-gray)",
         "almost-light-blue": "var(--almost-light-blue)",
         "almost-medium-blue": "var(--almost-medium-blue)",