From 315579e8da06feaef8a98ae4e28244281cdcb193 Mon Sep 17 00:00:00 2001
From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com>
Date: Sat, 18 Nov 2023 20:53:23 +0000
Subject: [PATCH 01/17] Create sweep.yaml

---
 sweep.yaml | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 sweep.yaml

diff --git a/sweep.yaml b/sweep.yaml
new file mode 100644
index 0000000..ada0e25
--- /dev/null
+++ b/sweep.yaml
@@ -0,0 +1,42 @@
+# Sweep AI turns bugs & feature requests into code changes (https://sweep.dev)
+# For details on our config file, check out our docs at https://docs.sweep.dev/usage/config
+
+# This setting contains a list of rules that Sweep will check for. If any of these rules are broken in a new commit, Sweep will create an pull request to fix the broken rule.
+rules:
+  - "All docstrings and comments should be up to date."
+['All new business logic should have corresponding unit tests.', 'Refactor large functions to be more modular.', 'Add docstrings to all functions and file headers.']
+
+# This is the branch that Sweep will develop from and make pull requests to. Most people use 'main' or 'master' but some users also use 'dev' or 'staging'.
+branch: 'main'
+
+# By default Sweep will read the logs and outputs from your existing Github Actions. To disable this, set this to false.
+gha_enabled: True
+
+# This is the description of your project. It will be used by sweep when creating PRs. You can tell Sweep what's unique about your project, what frameworks you use, or anything else you want.
+#
+# Example:
+#
+# description: sweepai/sweep is a python project. The main api endpoints are in sweepai/api.py. Write code that adheres to PEP8.
+description: ''
+
+# This sets whether to create pull requests as drafts. If this is set to True, then all pull requests will be created as drafts and GitHub Actions will not be triggered.
+draft: False
+
+# This is a list of directories that Sweep will not be able to edit.
+blocked_dirs: []
+
+# This is a list of documentation links that Sweep will use to help it understand your code. You can add links to documentation for any packages you use here.
+#
+# Example:
+#
+# docs:
+#   - PyGitHub: ["https://pygithub.readthedocs.io/en/latest/", "We use pygithub to interact with the GitHub API"]
+docs: []
+
+# Sandbox executes commands in a sandboxed environment to validate code changes after every edit to guarantee pristine code. For more details, see the [Sandbox](./sandbox) page.
+sandbox:
+  install:
+    - trunk init
+  check:
+    - trunk fmt {file_path} || return 0
+    - trunk check --fix --print-failures {file_path}

From 6e699c7f72bc47a8a0f33ed9a3d3118918ee254e Mon Sep 17 00:00:00 2001
From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com>
Date: Sat, 18 Nov 2023 20:53:24 +0000
Subject: [PATCH 02/17] Create sweep template

---
 .github/ISSUE_TEMPLATE/sweep-template.yml | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/sweep-template.yml

diff --git a/.github/ISSUE_TEMPLATE/sweep-template.yml b/.github/ISSUE_TEMPLATE/sweep-template.yml
new file mode 100644
index 0000000..44116f5
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/sweep-template.yml
@@ -0,0 +1,15 @@
+name: Sweep Issue
+title: 'Sweep: '
+description: For small bugs, features, refactors, and tests to be handled by Sweep, an AI-powered junior developer.
+labels: sweep
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Details
+      description: Tell Sweep where and what to edit and provide enough context for a new developer to the codebase
+      placeholder: |
+        Unit Tests: Write unit tests for <FILE>. Test each function in the file. Make sure to test edge cases.
+        Bugs: The bug might be in <FILE>. Here are the logs: ...
+        Features: the new endpoint should use the ... class from <FILE> because it contains ... logic.
+        Refactors: We are migrating this function to ... version because ...
\ No newline at end of file

From d177ad30c8eabf784aaa4d6880890ddc28384c64 Mon Sep 17 00:00:00 2001
From: dialmedu <diegomesa.1414@gmail.com>
Date: Fri, 24 Nov 2023 01:57:29 -0500
Subject: [PATCH 03/17] small fix, check that dataUrls are valid, when there is
 only text on the clipboard

---
 frontend/src/components/ImageUpload.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ImageUpload.tsx b/frontend/src/components/ImageUpload.tsx
index 4a46d99..451bc1a 100644
--- a/frontend/src/components/ImageUpload.tsx
+++ b/frontend/src/components/ImageUpload.tsx
@@ -106,7 +106,9 @@ function ImageUpload({ setReferenceImages }: Props) {
       // Convert images to data URLs and set the prompt images state
       Promise.all(files.map((file) => fileToDataURL(file)))
         .then((dataUrls) => {
-          setReferenceImages(dataUrls.map((dataUrl) => dataUrl as string));
+          if(dataUrls.length > 0) {
+            setReferenceImages(dataUrls.map((dataUrl) => dataUrl as string));
+          }
         })
         .catch((error) => {
           // TODO: Display error to user

From 7ef6a0b205c75010621b0cdf3350c111b921da0c Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 14:54:02 -0500
Subject: [PATCH 04/17] collect emails on hosted version

---
 frontend/package.json                         |   4 +-
 .../src/components/TermsOfServiceDialog.tsx   |  82 ++++++++---
 frontend/src/components/ui/alert-dialog.tsx   | 139 ++++++++++++++++++
 frontend/src/components/ui/checkbox.tsx       |  28 ++++
 frontend/src/config.ts                        |   3 +
 frontend/yarn.lock                            |  30 +++-
 6 files changed, 263 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/components/ui/alert-dialog.tsx
 create mode 100644 frontend/src/components/ui/checkbox.tsx

diff --git a/frontend/package.json b/frontend/package.json
index ef840e7..40fed34 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@codemirror/lang-html": "^6.4.6",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
@@ -22,8 +24,8 @@
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "codemirror": "^6.0.1",
-    "html2canvas": "^1.4.1",
     "copy-to-clipboard": "^3.3.3",
+    "html2canvas": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
diff --git a/frontend/src/components/TermsOfServiceDialog.tsx b/frontend/src/components/TermsOfServiceDialog.tsx
index 2bd3178..b812d26 100644
--- a/frontend/src/components/TermsOfServiceDialog.tsx
+++ b/frontend/src/components/TermsOfServiceDialog.tsx
@@ -1,26 +1,54 @@
+import React from "react";
 import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./ui/alert-dialog";
+import { Input } from "./ui/input";
+import toast from "react-hot-toast";
+import { PICO_BACKEND_FORM_SECRET } from "../config";
 
 const TermsOfServiceDialog: React.FC<{
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }> = ({ open, onOpenChange }) => {
+  const [email, setEmail] = React.useState("");
+
+  const onSubscribe = async () => {
+    await fetch("https://backend.buildpicoapps.com/form", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ email, secret: PICO_BACKEND_FORM_SECRET }),
+    });
+  };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle className="mb-4">Terms of Service</DialogTitle>
-        </DialogHeader>
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="mb-2">
+            Enter your email to get started
+          </AlertDialogTitle>
+        </AlertDialogHeader>
+
+        <div className="mb-2">
+          <Input
+            placeholder="Email"
+            value={email}
+            onChange={(e) => {
+              setEmail(e.target.value);
+            }}
+          />
+        </div>
         <div className="flex items-center space-x-2">
           <span>
-            By using this website, you agree to the{" "}
+            By providing your email, you consent to receiving occasional product
+            updates, and you accept the{" "}
             <a
               href="https://a.picoapps.xyz/camera-write"
               target="_blank"
@@ -28,23 +56,35 @@ const TermsOfServiceDialog: React.FC<{
             >
               terms of service
             </a>
-            . This project is MIT licensed.{" "}
+            . <br />
+            <br />
+            Prefer to run it yourself locally? This project is open source.{" "}
             <a
               href="https://github.com/abi/screenshot-to-code"
               target="_blank"
               className="underline"
             >
-              You can run this app locally by downloading the source code from
-              Github.
+              Download the code and get started on Github.
             </a>
           </span>
         </div>
 
-        <DialogFooter>
-          <DialogClose>Agree</DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        <AlertDialogFooter>
+          <AlertDialogAction
+            onClick={(e) => {
+              if (!email.trim() || !email.trim().includes("@")) {
+                e.preventDefault();
+                toast.error("Please enter your email");
+              } else {
+                onSubscribe();
+              }
+            }}
+          >
+            Agree
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 
diff --git a/frontend/src/components/ui/alert-dialog.tsx b/frontend/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..cc49f39
--- /dev/null
+++ b/frontend/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,139 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..f831532
--- /dev/null
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
index 7a6251c..4f0de2f 100644
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@@ -7,3 +7,6 @@ export const WS_BACKEND_URL =
 
 export const HTTP_BACKEND_URL =
   import.meta.env.VITE_HTTP_BACKEND_URL || "http://127.0.0.1:7001";
+
+export const PICO_BACKEND_FORM_SECRET =
+  import.meta.env.VITE_PICO_BACKEND_FORM_SECRET || null;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 1230589..21ea63f 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -593,6 +593,34 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-alert-dialog@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz#70dd529cbf1e4bff386814d3776901fcaa131b8c"
+  integrity sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dialog" "1.0.5"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+
+"@radix-ui/react-checkbox@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz#98f22c38d5010dd6df4c5744cac74087e3275f4b"
+  integrity sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
 "@radix-ui/react-collection@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159"
@@ -618,7 +646,7 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/react-dialog@^1.0.5":
+"@radix-ui/react-dialog@1.0.5", "@radix-ui/react-dialog@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
   integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==

From a178e316c4afddb0178021c2fa05543c70002f20 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 15:30:03 -0500
Subject: [PATCH 05/17] make drag and drop area more obvious

---
 frontend/src/components/ImageUpload.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ImageUpload.tsx b/frontend/src/components/ImageUpload.tsx
index 4a46d99..d3972ca 100644
--- a/frontend/src/components/ImageUpload.tsx
+++ b/frontend/src/components/ImageUpload.tsx
@@ -140,7 +140,10 @@ function ImageUpload({ setReferenceImages }: Props) {
       {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
       <div {...getRootProps({ style: style as any })}>
         <input {...getInputProps()} />
-        <p>Drop a screenshot here, paste from clipboard, or click to select</p>
+        <p className="text-slate-700 font-bold">
+          Drag & drop a screenshot here, or paste from clipboard, or click to
+          upload
+        </p>
       </div>
     </section>
   );

From e8f4bf1deab670637d18ccda4a84725b3a4df0fe Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 15:31:59 -0500
Subject: [PATCH 06/17] style fix

---
 frontend/src/components/ImageUpload.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ImageUpload.tsx b/frontend/src/components/ImageUpload.tsx
index f024e2e..bc17d5f 100644
--- a/frontend/src/components/ImageUpload.tsx
+++ b/frontend/src/components/ImageUpload.tsx
@@ -106,7 +106,7 @@ function ImageUpload({ setReferenceImages }: Props) {
       // Convert images to data URLs and set the prompt images state
       Promise.all(files.map((file) => fileToDataURL(file)))
         .then((dataUrls) => {
-          if(dataUrls.length > 0) {
+          if (dataUrls.length > 0) {
             setReferenceImages(dataUrls.map((dataUrl) => dataUrl as string));
           }
         })

From 0d542e18cc5f56a53070ed1da482a5e98d2973fd Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 15:35:22 -0500
Subject: [PATCH 07/17] Reset any existing state before running create

---
 frontend/src/App.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4c843d6..529283c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -116,6 +116,9 @@ function App() {
 
   // Initial version creation
   function doCreate(referenceImages: string[]) {
+    // Reset any existing state
+    reset();
+
     setReferenceImages(referenceImages);
     if (referenceImages.length > 0) {
       doGenerateCode({

From 8184f833fff91879f620d8385b09dc43143788d3 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 15:44:58 -0500
Subject: [PATCH 08/17] Delete sweep-template.yml

---
 .github/ISSUE_TEMPLATE/sweep-template.yml | 15 ---------------
 1 file changed, 15 deletions(-)
 delete mode 100644 .github/ISSUE_TEMPLATE/sweep-template.yml

diff --git a/.github/ISSUE_TEMPLATE/sweep-template.yml b/.github/ISSUE_TEMPLATE/sweep-template.yml
deleted file mode 100644
index 44116f5..0000000
--- a/.github/ISSUE_TEMPLATE/sweep-template.yml
+++ /dev/null
@@ -1,15 +0,0 @@
-name: Sweep Issue
-title: 'Sweep: '
-description: For small bugs, features, refactors, and tests to be handled by Sweep, an AI-powered junior developer.
-labels: sweep
-body:
-  - type: textarea
-    id: description
-    attributes:
-      label: Details
-      description: Tell Sweep where and what to edit and provide enough context for a new developer to the codebase
-      placeholder: |
-        Unit Tests: Write unit tests for <FILE>. Test each function in the file. Make sure to test edge cases.
-        Bugs: The bug might be in <FILE>. Here are the logs: ...
-        Features: the new endpoint should use the ... class from <FILE> because it contains ... logic.
-        Refactors: We are migrating this function to ... version because ...
\ No newline at end of file

From f9a30be761f57d362fd9f5c2328619d02b864fff Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 18:49:33 -0500
Subject: [PATCH 09/17] update copy on URL input section

---
 frontend/src/components/UrlInputSection.tsx | 27 +++++++--------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/UrlInputSection.tsx b/frontend/src/components/UrlInputSection.tsx
index 20e9c54..abf50a9 100644
--- a/frontend/src/components/UrlInputSection.tsx
+++ b/frontend/src/components/UrlInputSection.tsx
@@ -12,11 +12,13 @@ interface Props {
 export function UrlInputSection({ doCreate, screenshotOneApiKey }: Props) {
   const [isLoading, setIsLoading] = useState(false);
   const [referenceUrl, setReferenceUrl] = useState("");
-  const isDisabled = !screenshotOneApiKey;
 
   async function takeScreenshot() {
     if (!screenshotOneApiKey) {
-      toast.error("Please add a Screenshot API key in the settings dialog");
+      toast.error(
+        "Please add a ScreenshotOne API key in the Settings dialog. This is optional - you can also drag/drop and upload images directly.",
+        { duration: 8000 }
+      );
       return;
     }
 
@@ -64,24 +66,13 @@ export function UrlInputSection({ doCreate, screenshotOneApiKey }: Props) {
         onChange={(e) => setReferenceUrl(e.target.value)}
         value={referenceUrl}
       />
-      <Button onClick={takeScreenshot} disabled={isDisabled || isLoading}>
+      <Button
+        onClick={takeScreenshot}
+        disabled={isLoading}
+        className="bg-slate-400"
+      >
         {isLoading ? "Capturing..." : "Capture"}
       </Button>
-      {isDisabled && (
-        <div className="flex space-y-4 bg-slate-200 p-2 rounded text-stone-800 text-sm">
-          <span>
-            To screenshot a URL, add a{" "}
-            <a
-              href="https://screenshotone.com?via=screenshot-to-code"
-              className="underline"
-              target="_blank"
-            >
-              ScreenshotOne API key
-            </a>{" "}
-            in the settings dialog.
-          </span>
-        </div>
-      )}
     </div>
   );
 }

From e5ca11daef57666d59db62518e1153b177dde0c5 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 18:51:18 -0500
Subject: [PATCH 10/17] update copy on Settings Dialog for screenshotting a URL

---
 frontend/src/components/SettingsDialog.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 121c17c..397ce02 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -77,7 +77,10 @@ function SettingsDialog({ settings, setSettings }: Props) {
           />
 
           <Label htmlFor="screenshot-one-api-key">
-            <div>ScreenshotOne API key</div>
+            <div>
+              ScreenshotOne API key (optional - only needed if you want to use
+              URLs directly instead of taking the screenshot yourself)
+            </div>
             <div className="font-light mt-2 leading-relaxed">
               Only stored in your browser. Never stored on servers.{" "}
               <a

From 03d3154fc86796d904de33c30094a0b4e01ac66d Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 20:09:14 -0500
Subject: [PATCH 11/17] add Troubleshooting doc

---
 Troubleshooting.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 Troubleshooting.md

diff --git a/Troubleshooting.md b/Troubleshooting.md
new file mode 100644
index 0000000..4f51f6d
--- /dev/null
+++ b/Troubleshooting.md
@@ -0,0 +1,8 @@
+### Getting an OpenAI API key
+
+You don't need a ChatGPT Pro account. Screenshot to code uses API keys from your OpenAI developer account. In order to get access to the GPT4 Vision model.
+
+1. Open [OpenAI Dashboard](https://platform.openai.com/)
+1. Go to Settings > Billing
+1. Click at the Add payment details
+1. You have to add credits, the minimum is $5. 5. Go to **Settings > Limits** and check at the bottom of the page, you have to be Tier 1 user to get GPT4 access

From d4d330c1f52b50ee6fc7124903ada84c50d6740c Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 21:55:13 -0500
Subject: [PATCH 12/17] Update Troubleshooting.md

---
 Troubleshooting.md | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/Troubleshooting.md b/Troubleshooting.md
index 4f51f6d..0704859 100644
--- a/Troubleshooting.md
+++ b/Troubleshooting.md
@@ -1,8 +1,16 @@
 ### Getting an OpenAI API key
 
-You don't need a ChatGPT Pro account. Screenshot to code uses API keys from your OpenAI developer account. In order to get access to the GPT4 Vision model.
+You don't need a ChatGPT Pro account. Screenshot to code uses API keys from your OpenAI developer account. In order to get access to the GPT4 Vision model, log into your OpenAI account and then, follow these instructions:
 
 1. Open [OpenAI Dashboard](https://platform.openai.com/)
 1. Go to Settings > Billing
 1. Click at the Add payment details
-1. You have to add credits, the minimum is $5. 5. Go to **Settings > Limits** and check at the bottom of the page, you have to be Tier 1 user to get GPT4 access
+<img width="1030" alt="285636868-c80deb92-ab47-45cd-988f-deee67fbd44d" src="https://github.com/abi/screenshot-to-code/assets/23818/4e0f4b77-9578-4f9a-803c-c12b1502f3d7">
+4. You have to buy some credits. The minimum is $5.
+
+5. Go to Settings > Limits and check at the bottom of the page, your current tier has to be "Tier 1" to have GPT4 access
+<img width="785" alt="285636973-da38bd4d-8a78-4904-8027-ca67d729b933" src="https://github.com/abi/screenshot-to-code/assets/23818/8d07cd84-0cf9-4f88-bc00-80eba492eadf">
+
+Some users have also reported that it can take upto 30 minutes after your credit purchase for the GPT4 vision model to be activated.
+
+If you've followed these steps, and it still doesn't work, feel free to open a Github issue.

From fb4dc08b4e7414ac6f6194de4af63305c0c27505 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 21:59:44 -0500
Subject: [PATCH 13/17] update onboarding note

---
 frontend/src/components/OnboardingNote.tsx | 34 +++++++++++++---------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/OnboardingNote.tsx b/frontend/src/components/OnboardingNote.tsx
index 8cc6f11..cfb9e5f 100644
--- a/frontend/src/components/OnboardingNote.tsx
+++ b/frontend/src/components/OnboardingNote.tsx
@@ -1,19 +1,27 @@
 export function OnboardingNote() {
   return (
-    <div className="flex flex-col space-y-4 bg-slate-500 p-2 rounded text-stone-200">
-      Please add your OpenAI API key (must have GPT4 vision access) in the
-      settings dialog (gear icon above).
-      <br />
-      <br />
-      How do you get an OpenAI API key that has the GPT4 Vision model available?
-      Create an OpenAI account. And then, you need to buy at least $1 worth of
-      credit on the Billing dashboard.
-      <br />
+    <div className="flex flex-col space-y-4 bg-green-700 p-2 rounded text-stone-200 text-sm">
       <span>
-        This key is only stored in your browser. Never stored on servers. This
-        app is open source. You can{" "}
-        <a href="https://github.com/abi/screenshot-to-code" className="inline">
-          check the code to confirm.
+        To use Screenshot to Code, you need an OpenAI API key with GPT4 vision
+        access.{" "}
+        <a
+          href="https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md"
+          className="inline underline hover:opacity-70"
+          target="_blank"
+        >
+          Follow these instructions to get yourself a key.
+        </a>{" "}
+        Then, paste it in the Settings dialog (gear icon above).
+      </span>
+      <span>
+        Your key is only stored in your browser. Never stored on our servers. If
+        you prefer, you can als run this app completely locally.{" "}
+        <a
+          href="https://github.com/abi/screenshot-to-code"
+          className="inline underline hover:opacity-70"
+          target="_blank"
+        >
+          See the Github project for instructions.
         </a>
       </span>
     </div>

From d3a71c5fb3b7747f4898734bb5150b481cf674bc Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 22:04:33 -0500
Subject: [PATCH 14/17] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9a100ca..be1f53b 100644
--- a/README.md
+++ b/README.md
@@ -66,7 +66,7 @@ The app will be up and running at http://localhost:5173. Note that you can't dev
 ## 🙋‍♂️ FAQs
 
 - **I'm running into an error when setting up the backend. How can I fix it?** [Try this](https://github.com/abi/screenshot-to-code/issues/3#issuecomment-1814777959). If that still doesn't work, open an issue.
-- **How do I get an OpenAI API key that has the GPT4 Vision model available?** Create an OpenAI account. And then, you need to buy at least $1 worth of credit on the [Billing dashboard](https://platform.openai.com/account/billing/overview). Also, see [OpenAI docs](https://help.openai.com/en/articles/7102672-how-can-i-access-gpt-4).
+- **How do I get an OpenAI API key?** See https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md
 - **How can I provide feedback?** For feedback, feature requests and bug reports, open an issue or ping me on [Twitter](https://twitter.com/_abi_).
 
 ## 📚 Examples

From b7b219b697c175d388e71b320ebe144db69295d0 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 22:09:21 -0500
Subject: [PATCH 15/17] fix typo

---
 frontend/src/components/OnboardingNote.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/OnboardingNote.tsx b/frontend/src/components/OnboardingNote.tsx
index cfb9e5f..5bd5fb4 100644
--- a/frontend/src/components/OnboardingNote.tsx
+++ b/frontend/src/components/OnboardingNote.tsx
@@ -15,7 +15,7 @@ export function OnboardingNote() {
       </span>
       <span>
         Your key is only stored in your browser. Never stored on our servers. If
-        you prefer, you can als run this app completely locally.{" "}
+        you prefer, you can also run this app completely locally.{" "}
         <a
           href="https://github.com/abi/screenshot-to-code"
           className="inline underline hover:opacity-70"

From 10322253f37b86e35e73885be7ca2ec4513f7217 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 22:13:14 -0500
Subject: [PATCH 16/17] update code style

---
 frontend/src/App.tsx | 58 ++++++++++++++++++++++++++------------------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e449b7c..0a3bf3d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -97,36 +97,40 @@ function App() {
     setAppState(AppState.CODE_READY);
   };
 
-  function doOpenInCodepenio(){
-    const code = generatedCode
+  function doOpenInCodepenio() {
+    const code = generatedCode;
 
-    var form = document.createElement('form');
-    form.setAttribute('method', 'POST');
-    form.setAttribute('action', 'https://codepen.io/pen/define');
-    form.setAttribute('target', '_blank'); // open in new window
+    const form = document.createElement("form");
+    form.setAttribute("method", "POST");
+    form.setAttribute("action", "https://codepen.io/pen/define");
+    form.setAttribute("target", "_blank"); // open in new window
 
-    const data = { 
+    const data = {
       html: code,
       editors: "100", // 1:Open html, 0:close CSS, 0:Close Js
       layout: "left",
-      css_external: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-        + (generatedCode.includes('<ion-') ? ',https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css': '')
-      ,
-      js_external: "https://cdn.tailwindcss.com " 
-        + (generatedCode.includes('<ion-') ? ',https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js,https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js': '')
-      ,
-    }
+      css_external:
+        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" +
+        (generatedCode.includes("<ion-")
+          ? ",https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
+          : ""),
+      js_external:
+        "https://cdn.tailwindcss.com " +
+        (generatedCode.includes("<ion-")
+          ? ",https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js,https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
+          : ""),
+    };
     // test have html to json
     try {
-      JSON.stringify(data)
+      JSON.stringify(data);
     } catch (error) {
-      data.html = "<!-- Copy your code here -->"
+      data.html = "<!-- Copy your code here -->";
     }
     // Crear un input tipo hidden
-    var input = document.createElement('input');
-    input.setAttribute('type', 'hidden');
-    input.setAttribute('name', 'data');
-    input.setAttribute('value', JSON.stringify(data));
+    const input = document.createElement("input");
+    input.setAttribute("type", "hidden");
+    input.setAttribute("name", "data");
+    input.setAttribute("value", JSON.stringify(data));
 
     // Agregar el input al formulario
     form.appendChild(input);
@@ -359,10 +363,18 @@ function App() {
                       className="bg-black text-white flex items-center justify-center hover:text-black hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5"
                       onClick={doCopyCode}
                     >
-                       Copy Code <FaCopy className="ml-2" />
+                      Copy Code <FaCopy className="ml-2" />
                     </span>
-                    <Button onClick={doOpenInCodepenio} className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none">
-                      Open in <img src="https://assets.codepen.io/t-1/codepen-logo.svg" alt="codepen.io" className="h-4 ml-1" />
+                    <Button
+                      onClick={doOpenInCodepenio}
+                      className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none"
+                    >
+                      Open in{" "}
+                      <img
+                        src="https://assets.codepen.io/t-1/codepen-logo.svg"
+                        alt="codepen.io"
+                        className="h-4 ml-1"
+                      />
                     </Button>
                   </div>
                   <CodeMirror

From 2eb98587b2b8eb0fa4303683b90f76f7e6d2b6a1 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 22:30:11 -0500
Subject: [PATCH 17/17] split code tab into separate component and clean up
 code

---
 frontend/src/App.tsx                | 87 +++--------------------------
 frontend/src/components/CodeTab.tsx | 87 +++++++++++++++++++++++++++++
 2 files changed, 94 insertions(+), 80 deletions(-)
 create mode 100644 frontend/src/components/CodeTab.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0a3bf3d..59a0c4f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback } from "react";
+import { useRef, useState } from "react";
 import ImageUpload from "./components/ImageUpload";
 import CodePreview from "./components/CodePreview";
 import Preview from "./components/Preview";
@@ -7,7 +7,6 @@ import Spinner from "./components/Spinner";
 import classNames from "classnames";
 import {
   FaCode,
-  FaCopy,
   FaDesktop,
   FaDownload,
   FaMobile,
@@ -15,12 +14,9 @@ import {
 } from "react-icons/fa";
 
 import { Switch } from "./components/ui/switch";
-import copy from "copy-to-clipboard";
-import toast from "react-hot-toast";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
-import CodeMirror from "./components/CodeMirror";
 import SettingsDialog from "./components/SettingsDialog";
 import { Settings, EditorTheme, AppState } from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
@@ -31,6 +27,7 @@ import { UrlInputSection } from "./components/UrlInputSection";
 import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
 import html2canvas from "html2canvas";
 import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants";
+import CodeTab from "./components/CodeTab";
 
 function App() {
   const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
@@ -97,49 +94,6 @@ function App() {
     setAppState(AppState.CODE_READY);
   };
 
-  function doOpenInCodepenio() {
-    const code = generatedCode;
-
-    const form = document.createElement("form");
-    form.setAttribute("method", "POST");
-    form.setAttribute("action", "https://codepen.io/pen/define");
-    form.setAttribute("target", "_blank"); // open in new window
-
-    const data = {
-      html: code,
-      editors: "100", // 1:Open html, 0:close CSS, 0:Close Js
-      layout: "left",
-      css_external:
-        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" +
-        (generatedCode.includes("<ion-")
-          ? ",https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
-          : ""),
-      js_external:
-        "https://cdn.tailwindcss.com " +
-        (generatedCode.includes("<ion-")
-          ? ",https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js,https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
-          : ""),
-    };
-    // test have html to json
-    try {
-      JSON.stringify(data);
-    } catch (error) {
-      data.html = "<!-- Copy your code here -->";
-    }
-    // Crear un input tipo hidden
-    const input = document.createElement("input");
-    input.setAttribute("type", "hidden");
-    input.setAttribute("name", "data");
-    input.setAttribute("value", JSON.stringify(data));
-
-    // Agregar el input al formulario
-    form.appendChild(input);
-
-    // Agregar el formulario al documento y enviarlo automáticamente
-    document.body.appendChild(form);
-    form.submit();
-  }
-
   function doGenerateCode(params: CodeGenerationParams) {
     setExecutionConsole([]);
     setAppState(AppState.CODING);
@@ -192,11 +146,6 @@ function App() {
     setUpdateInstruction("");
   }
 
-  const doCopyCode = useCallback(() => {
-    copy(generatedCode);
-    toast.success("Copied to clipboard");
-  }, [generatedCode]);
-
   const handleTermDialogOpenChange = (open: boolean) => {
     setSettings((s) => ({
       ...s,
@@ -356,33 +305,11 @@ function App() {
                 <Preview code={generatedCode} device="mobile" />
               </TabsContent>
               <TabsContent value="code">
-                <div className="relative">
-                  <div className="flex justify-start items-center px-4 mb-2">
-                    <span
-                      title="Copy Code"
-                      className="bg-black text-white flex items-center justify-center hover:text-black hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5"
-                      onClick={doCopyCode}
-                    >
-                      Copy Code <FaCopy className="ml-2" />
-                    </span>
-                    <Button
-                      onClick={doOpenInCodepenio}
-                      className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none"
-                    >
-                      Open in{" "}
-                      <img
-                        src="https://assets.codepen.io/t-1/codepen-logo.svg"
-                        alt="codepen.io"
-                        className="h-4 ml-1"
-                      />
-                    </Button>
-                  </div>
-                  <CodeMirror
-                    code={generatedCode}
-                    editorTheme={settings.editorTheme}
-                    onCodeChange={setGeneratedCode}
-                  />
-                </div>
+                <CodeTab
+                  code={generatedCode}
+                  setCode={setGeneratedCode}
+                  settings={settings}
+                />
               </TabsContent>
             </Tabs>
           </div>
diff --git a/frontend/src/components/CodeTab.tsx b/frontend/src/components/CodeTab.tsx
new file mode 100644
index 0000000..d10f649
--- /dev/null
+++ b/frontend/src/components/CodeTab.tsx
@@ -0,0 +1,87 @@
+import { FaCopy } from "react-icons/fa";
+import CodeMirror from "./CodeMirror";
+import { Button } from "./ui/button";
+import { Settings } from "../types";
+import copy from "copy-to-clipboard";
+import { useCallback } from "react";
+import toast from "react-hot-toast";
+
+interface Props {
+  code: string;
+  setCode: React.Dispatch<React.SetStateAction<string>>;
+  settings: Settings;
+}
+
+function CodeTab({ code, setCode, settings }: Props) {
+  const copyCode = useCallback(() => {
+    copy(code);
+    toast.success("Copied to clipboard");
+  }, [code]);
+
+  const doOpenInCodepenio = useCallback(async () => {
+    // TODO: Update CSS and JS external links depending on the framework being used
+    const data = {
+      html: code,
+      editors: "100", // 1: Open HTML, 0: Close CSS, 0: Close JS
+      layout: "left",
+      css_external:
+        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" +
+        (code.includes("<ion-")
+          ? ",https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
+          : ""),
+      js_external:
+        "https://cdn.tailwindcss.com " +
+        (code.includes("<ion-")
+          ? ",https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js,https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
+          : ""),
+    };
+
+    // Create a hidden form and submit it to open the code in CodePen
+    // Can't use fetch API directly because we want to open the URL in a new tab
+    const input = document.createElement("input");
+    input.setAttribute("type", "hidden");
+    input.setAttribute("name", "data");
+    input.setAttribute("value", JSON.stringify(data));
+
+    const form = document.createElement("form");
+    form.setAttribute("method", "POST");
+    form.setAttribute("action", "https://codepen.io/pen/define");
+    form.setAttribute("target", "_blank");
+    form.appendChild(input);
+
+    document.body.appendChild(form);
+    form.submit();
+  }, [code]);
+
+  return (
+    <div className="relative">
+      <div className="flex justify-start items-center px-4 mb-2">
+        <span
+          title="Copy Code"
+          className="bg-black text-white flex items-center justify-center hover:text-black hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5"
+          onClick={copyCode}
+        >
+          Copy Code <FaCopy className="ml-2" />
+        </span>
+        <Button
+          onClick={doOpenInCodepenio}
+          className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none"
+        >
+          Open in{" "}
+          <img
+            src="https://assets.codepen.io/t-1/codepen-logo.svg"
+            alt="codepen.io"
+            className="h-4 ml-1"
+          />
+        </Button>
+      </div>
+      <CodeMirror
+        code={code}
+        editorTheme={settings.editorTheme}
+        onCodeChange={setCode}
+      />
+    </div>
+  );
+}
+
+export default CodeTab;