Add edit button with popover

app/src/components/EditWithAIButton.tsx

@@ -0,0 +1,45 @@
+import { MagicWand, Microphone } from "phosphor-react";
+import { Button2, IconButton2 } from "../ui/Shared";
+import * as Popover from "@radix-ui/react-popover";
+import { Trans, t } from "@lingui/macro";
+
+export function EditWithAIButton() {
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <Button2
+          leftIcon={
+            <MagicWand className="group-hover-tilt-shaking" size={18} />
+          }
+          color="zinc"
+          size="sm"
+          rounded
+          className="aria-[expanded=true]:bg-zinc-700"
+        >
+          <Trans>Edit with AI</Trans>
+        </Button2>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          side="top"
+          sideOffset={10}
+          align="center"
+          className="w-[300px] bg-white rounded shadow border p-2 grid gap-2"
+        >
+          <div className="relative">
+            <textarea
+              placeholder={t`Write your prompt here or press and hold the button to speak...`}
+              className="text-xs w-full resize-none h-24 p-2 leading-normal"
+            />
+            <IconButton2 size="xs" className="!absolute bottom-0 right-0">
+              <Microphone size={16} />
+            </IconButton2>
+          </div>
+          <Button2 size="sm" color="purple">
+            <Trans>Submit</Trans>
+          </Button2>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

app/src/index.css

@@ -246,3 +246,25 @@ main .monaco-editor {
 [data-radix-popper-content-wrapper] {
   @apply !z-10;
 }
+
+@keyframes tilt-shaking {
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(8deg);
+  }
+  50% {
+    transform: rotate(0eg);
+  }
+  75% {
+    transform: rotate(-8deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.group:hover .group-hover-tilt-shaking {
+  animation: tilt-shaking 0.25s ease-in-out 2;
+}

app/src/pages/Sandbox.tsx

@@ -27,6 +27,7 @@ import { useIsProUser } from "../lib/hooks";
 import { ThemeTab } from "../components/Tabs/ThemeTab";
 import { FlowchartLayout } from "../components/FlowchartLayout";
 import { useEditorStore } from "../lib/useEditorStore";
+import { EditWithAIButton } from "../components/EditWithAIButton";
 
 const Sandbox = memo(function Edit() {
   const isProUser = useIsProUser();
@@ -113,8 +114,11 @@ const Sandbox = memo(function Edit() {
             <Actions />
           </div>
           <WithGraph>
-            <Tabs.Content value="Document" className="overflow-hidden">
+            <Tabs.Content value="Document" className="overflow-hidden relative">
               <TextEditor value={text} onChange={onChange} />
+              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2">
+                <EditWithAIButton />
+              </div>
             </Tabs.Content>
             <Tabs.Content value="Theme" className="overflow-hidden">
               <ThemeTab />

app/src/ui/Shared.tsx

@@ -180,6 +180,7 @@ export const Button2 = forwardRef<
     rightIcon?: ReactNode;
     color?: keyof typeof button2Colors;
     size?: keyof typeof pSize;
+    rounded?: boolean;
   } & React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
@@ -194,6 +195,7 @@ export const Button2 = forwardRef<
       rightIcon,
       isLoading,
       className = "",
+      rounded,
       ...props
     },
     ref
@@ -203,7 +205,9 @@ export const Button2 = forwardRef<
         className={`flex font-bold items-center justify-center gap-3 whitespace-nowrap ${button2Classes} ${pxButtonSize[
           size
         ](!!leftIcon, !!rightIcon)} ${button2Colors[color]}
-      ${pSize[size]} ${focusClasses} ${className}
+      ${pSize[size]} ${focusClasses} ${
+          rounded ? "!rounded-full" : ""
+        } ${className}
       `}
         {...props}
         disabled={props.disabled || isLoading}