feat: refactor EmbedModal props for improved clarity and consistency

langflow-ai · Feb 3, 2025 · 1fe78b6 · 1fe78b6
1 parent d500beb
commit 1fe78b6
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
@@ -124,7 +124,7 @@ export default function PublishDropdown() {
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
-    <EmbedModal open={openEmbedModal} setOpen={setOpenEmbedModal} embedCode={getWidgetCode({ flowId: flowId ?? "", flowName: flowName ?? "", isAuth: !isAuth, tweaksBuildedObject: {}, activeTweaks: false })} />
+    <EmbedModal open={openEmbedModal} setOpen={setOpenEmbedModal} flowId={flowId ?? ""} flowName={flowName ?? ""} isAuth={isAuth} tweaksBuildedObject={{}} activeTweaks={false}></EmbedModal>
     </>
   );
 }
diff --git a/src/frontend/src/modals/EmbedModal/embed-modal.tsx b/src/frontend/src/modals/EmbedModal/embed-modal.tsx
@@ -1,25 +1,34 @@
 import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { oneDark,oneLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import BaseModal from "../baseModal";
 import IconComponent from "../../components/common/genericIconComponent";
 import { Button } from "../../components/ui/button";
+import getWidgetCode from "../apiModal/utils/get-widget-code";
+import { useDarkStore } from "@/stores/darkStore";
 
 interface EmbedModalProps {
   open: boolean;
   setOpen: (open: boolean) => void;
-  embedCode: string;
+  flowId: string;
+  flowName: string;
+  isAuth: boolean;
+  tweaksBuildedObject: {};
+  activeTweaks: boolean;
 }
 
-export default function EmbedModal({ open, setOpen, embedCode }: EmbedModalProps) {
+export default function EmbedModal({ open, setOpen, flowId, flowName, isAuth, tweaksBuildedObject, activeTweaks }: EmbedModalProps) {
+  const isDark = useDarkStore((state) => state.dark);
   const [isCopied, setIsCopied] = useState<boolean>(false);
-
+  const widgetProps = { flowId: flowId, flowName: flowName, isAuth: isAuth, tweaksBuildedObject: tweaksBuildedObject, activeTweaks: activeTweaks }
+  const embedCode = getWidgetCode({...widgetProps, copy: false })
+  const copyCode = getWidgetCode({...widgetProps, copy: true });
   const copyToClipboard = () => {
     if (!navigator.clipboard || !navigator.clipboard.writeText) {
       return;
     }
 
-    navigator.clipboard.writeText(embedCode).then(() => {
+    navigator.clipboard.writeText(copyCode).then(() => {
       setIsCopied(true);
 
       setTimeout(() => {
@@ -29,36 +38,40 @@ export default function EmbedModal({ open, setOpen, embedCode }: EmbedModalProps
   };
 
   return (
-    <BaseModal open={open} setOpen={setOpen} size="medium">
-      <BaseModal.Header description="Copy and paste this code into your website to embed the chat interface.">
-        Embed into site
+    <BaseModal open={open} setOpen={setOpen} size="retangular">
+      <BaseModal.Header>
+        <div className="flex items-center gap-2 text-[16px] font-semibold">
+          <IconComponent name="Columns2" className="icon-size" />
+          Embed into site
+        </div>
       </BaseModal.Header>
-      <BaseModal.Content>
-        <div className="mt-2 flex h-full w-full flex-col">
-          <div className="flex w-full items-center justify-end gap-4 rounded-t-md border border-border bg-muted px-4 py-2">
-            <Button
+      <BaseModal.Content className="">
+        <div className=" flex h-full w-full relative">
+        <Button
               variant="ghost"
               size="icon"
               onClick={copyToClipboard}
               data-testid="btn-copy-code"
+              className="absolute top-2 right-2 group !hover:bg-foreground bg-muted-foreground"
             >
               {isCopied ? (
                 <IconComponent
                   name="Check"
-                  className="h-4 w-4 text-muted-foreground"
+                  className="h-5 w-5 text-muted group-hover:text-muted-foreground"
                 />
               ) : (
                 <IconComponent
                   name="Copy"
-                  className="h-4 w-4 text-muted-foreground"
+                  className="!h-6 !w-6 text-muted group-hover:text-muted-foreground"
                 />
               )}
             </Button>
-          </div>
           <SyntaxHighlighter
+            showLineNumbers={true}
+            wrapLongLines={true}
             language="html"
-            style={oneDark}
-            className="!mt-0 h-full w-full overflow-scroll !rounded-b-md !rounded-t-none border border-border text-left !custom-scroll"
+            style={isDark ? oneDark : oneLight}
+            className="!mt-0 h-full w-full overflow-scroll !rounded-b-md border border-border text-left !custom-scroll"
           >
             {embedCode}
           </SyntaxHighlighter>