wip target element + no follow up option

app/api/ask-ai/route.ts

@@ -223,7 +223,7 @@ export async function PUT(request: NextRequest) {
   const userToken = request.cookies.get(MY_TOKEN_KEY())?.value;
 
   const body = await request.json();
-  const { prompt, html, previousPrompt, provider } = body;
+  const { prompt, html, previousPrompt, provider, selectedElementHtml } = body;
 
   if (!prompt || !html) {
     return NextResponse.json(
@@ -294,7 +294,9 @@ export async function PUT(request: NextRequest) {
           },
           {
             role: "assistant",
-            content: `The current code is: \n\`\`\`html\n${html}\n\`\`\``,
+            content: selectedElementHtml
+              ? `Here is the selected HTML element:\n\n${selectedElementHtml}`
+              : `The current code is: \n\`\`\`html\n${html}\n\`\`\``,
           },
           {
             role: "user",

components/editor/ask-ai/index.tsx

@@ -4,7 +4,7 @@ import { useState, useRef } from "react";
 import classNames from "classnames";
 import { toast } from "sonner";
 import { useLocalStorage, useUpdateEffect } from "react-use";
-import { ArrowUp, ChevronDown } from "lucide-react";
+import { ArrowUp, ChevronDown, Info, Crosshair } from "lucide-react";
 import { FaStopCircle } from "react-icons/fa";
 
 import { defaultHTML } from "@/lib/consts";
@@ -12,11 +12,20 @@ import ProModal from "@/components/pro-modal";
 import { Button } from "@/components/ui/button";
 import { MODELS } from "@/lib/providers";
 import { HtmlHistory } from "@/types";
-import { InviteFriends } from "@/components/invite-friends";
+// import { InviteFriends } from "@/components/invite-friends";
 import { Settings } from "@/components/editor/ask-ai/settings";
 import { LoginModal } from "@/components/login-modal";
 import { ReImagine } from "@/components/editor/ask-ai/re-imagine";
 import Loading from "@/components/loading";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip";
+import { TooltipContent } from "@radix-ui/react-tooltip";
+import { SelectedHtmlElement } from "./selected-html-element";
 
 export function AskAI({
   html,
@@ -24,6 +33,10 @@ export function AskAI({
   onScrollToBottom,
   isAiWorking,
   setisAiWorking,
+  isEditableModeEnabled = false,
+  selectedElement,
+  setSelectedElement,
+  setIsEditableModeEnabled,
   onNewPrompt,
   onSuccess,
 }: {
@@ -35,6 +48,10 @@ export function AskAI({
   htmlHistory?: HtmlHistory[];
   setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
   onSuccess: (h: string, p: string, n?: number[][]) => void;
+  isEditableModeEnabled: boolean;
+  setIsEditableModeEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedElement?: HTMLElement | null;
+  setSelectedElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
 }) {
   const refThink = useRef<HTMLDivElement | null>(null);
   const audio = useRef<HTMLAudioElement | null>(null);
@@ -52,6 +69,7 @@ export function AskAI({
   const [openThink, setOpenThink] = useState(false);
   const [isThinking, setIsThinking] = useState(true);
   const [controller, setController] = useState<AbortController | null>(null);
+  const [isFollowUp, setIsFollowUp] = useState(true);
 
   const callAi = async (redesignMarkdown?: string) => {
     if (isAiWorking) return;
@@ -66,13 +84,14 @@ export function AskAI({
     let thinkResponse = "";
     let lastRenderTime = 0;
 
-    const isFollowUp = html !== defaultHTML;
     const abortController = new AbortController();
     setController(abortController);
     try {
       onNewPrompt(prompt);
-      if (isFollowUp && !redesignMarkdown) {
-        // TODO use @/lib/api instead of fetch directly (if possible)
+      if (isFollowUp && !redesignMarkdown && html !== defaultHTML) {
+        const selectedElementHtml = selectedElement
+          ? selectedElement.outerHTML
+          : "";
         const request = await fetch("/api/ask-ai", {
           method: "PUT",
           body: JSON.stringify({
@@ -81,6 +100,7 @@ export function AskAI({
             previousPrompt,
             model,
             html,
+            selectedElementHtml,
           }),
           headers: {
             "Content-Type": "application/json",
@@ -263,6 +283,43 @@ export function AskAI({
 
   return (
     <>
+      <div className="ml-auto select-none text-xs text-neutral-400 flex items-center justify-center gap-2 bg-neutral-800 border border-neutral-700 rounded-md p-1 pr-2.5 max-w-max">
+        <label
+          htmlFor="follow-up-checkbox"
+          className="flex items-center gap-1.5 cursor-pointer"
+        >
+          <Checkbox
+            id="follow-up-checkbox"
+            checked={isFollowUp}
+            onCheckedChange={(e) => {
+              setIsFollowUp(e === true);
+            }}
+          />
+          Follow-Up
+        </label>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Info className="size-3 text-neutral-300 cursor-pointer" />
+          </PopoverTrigger>
+          <PopoverContent
+            align="start"
+            className="!rounded-2xl !p-0 min-w-xs text-center overflow-hidden"
+          >
+            <header className="bg-neutral-950 px-4 py-3 border-b border-neutral-700/70">
+              <p className="text-base text-neutral-200 font-semibold">
+                What is a Follow-Up?
+              </p>
+            </header>
+            <main className="p-4">
+              <p className="text-sm text-neutral-400">
+                A Follow-Up is a request to DeepSite to edit the current HTML
+                instead of starting from scratch. This is useful when you want
+                to make small changes or improvements to the existing design.
+              </p>
+            </main>
+          </PopoverContent>
+        </Popover>
+      </div>
       <div className="bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-10 w-full group">
         {think && (
           <div className="w-full border-b border-neutral-700 relative overflow-hidden">
@@ -301,6 +358,14 @@ export function AskAI({
             </main>
           </div>
         )}
+        {!isAiWorking && selectedElement && (
+          <div className="px-4 pt-3">
+            <SelectedHtmlElement
+              element={selectedElement}
+              onDelete={() => setSelectedElement(null)}
+            />
+          </div>
+        )}
         <div className="w-full relative flex items-center justify-between">
           {isAiWorking && (
             <div className="absolute bg-neutral-800 rounded-lg bottom-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-center justify-between max-lg:text-sm">
@@ -322,9 +387,18 @@ export function AskAI({
           <input
             type="text"
             disabled={isAiWorking}
-            className="w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4"
+            className={classNames(
+              "w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4",
+              {
+                "!pt-2.5": selectedElement && !isAiWorking,
+              }
+            )}
             placeholder={
-              hasAsked ? "Ask DeepSite for edits" : "Ask DeepSite anything..."
+              selectedElement
+                ? `Ask DeepSite about ${selectedElement.tagName.toLowerCase()}...`
+                : hasAsked
+                ? "Ask DeepSite for edits"
+                : "Ask DeepSite anything..."
             }
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
@@ -338,7 +412,33 @@ export function AskAI({
         <div className="flex items-center justify-between gap-2 px-4 pb-3">
           <div className="flex-1 flex items-center justify-start gap-1.5">
             <ReImagine onRedesign={(md) => callAi(md)} />
-            <InviteFriends />
+            {html !== defaultHTML && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="xs"
+                    variant={isEditableModeEnabled ? "default" : "outline"}
+                    onClick={() => {
+                      setIsEditableModeEnabled?.(!isEditableModeEnabled);
+                    }}
+                    className={classNames("h-[28px]", {
+                      "!text-neutral-400 hover:!text-neutral-200 !border-neutral-600 !hover:!border-neutral-500":
+                        !isEditableModeEnabled,
+                    })}
+                  >
+                    <Crosshair className="size-4" />
+                    Edit
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent
+                  align="start"
+                  className="bg-neutral-950 text-xs text-neutral-200 py-1 px-2 rounded-md -translate-y-0.5"
+                >
+                  Select an element on the page to ask DeepSite edit it
+                  directly.
+                </TooltipContent>
+              </Tooltip>
+            )}
           </div>
           <div className="flex items-center justify-end gap-2">
             <Settings

components/editor/ask-ai/re-imagine.tsx

@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
 import Loading from "@/components/loading";
+import { api } from "@/lib/api";
 
 export function ReImagine({
   onRedesign,
@@ -29,6 +30,7 @@ export function ReImagine({
   };
 
   const handleClick = async () => {
+    if (isLoading) return; // Prevent multiple clicks while loading
     if (!url) {
       toast.error("Please enter a URL.");
       return;
@@ -37,24 +39,25 @@ export function ReImagine({
       toast.error("Please enter a valid URL.");
       return;
     }
+    // TODO implement the API call to redesign the site
     // Here you would typically handle the re-design logic
     setIsLoading(true);
-    const request = await fetch("/api/re-design", {
-      method: "POST",
-      body: JSON.stringify({ url }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-    const response = await request.json();
-    if (response.ok) {
-      setOpen(false);
-      setUrl("");
-      onRedesign(response.markdown);
-      toast.success("DeepSite is redesigning your site! Let him cook... 🔥");
-    } else {
-      toast.error(response.message || "Failed to redesign the site.");
-    }
+    // const request = await api.post("/api/re-design", {
+    //   method: "POST",
+    //   body: JSON.stringify({ url }),
+    //   headers: {
+    //     "Content-Type": "application/json",
+    //   },
+    // });
+    // const response = await request.json();
+    // if (response.ok) {
+    //   setOpen(false);
+    //   setUrl("");
+    //   onRedesign(response.markdown);
+    //   toast.success("DeepSite is redesigning your site! Let him cook... 🔥");
+    // } else {
+    //   toast.error(response.message || "Failed to redesign the site.");
+    // }
     setIsLoading(false);
   };
 
@@ -126,10 +129,20 @@ export function ReImagine({
                 variant="black"
                 onClick={handleClick}
                 className="relative w-full"
-                disabled={isLoading}
               >
-                Redesign <Paintbrush className="size-4" />
-                {isLoading && <Loading className="ml-2 size-4 animate-spin" />}
+                {isLoading ? (
+                  <>
+                    <Loading
+                      overlay={false}
+                      className="ml-2 size-4 animate-spin"
+                    />
+                    Fetching your site...
+                  </>
+                ) : (
+                  <>
+                    Redesign <Paintbrush className="size-4" />
+                  </>
+                )}
               </Button>
             </div>
           </main>

components/editor/ask-ai/selected-html-element.tsx

@@ -0,0 +1,42 @@
+import { Collapsible, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { htmlTagToText } from "@/lib/html-tag-to-text";
+import { Code, XCircle } from "lucide-react";
+
+export const SelectedHtmlElement = ({
+  element,
+  onDelete,
+}: {
+  element: HTMLElement | null;
+  onDelete?: () => void;
+}) => {
+  if (!element) return null;
+
+  const tagName = element.tagName.toLowerCase();
+  return (
+    <Collapsible
+      className="border border-neutral-700 rounded-xl p-1.5 pr-3 max-w-max hover:brightness-110 transition-all duration-200 ease-in-out !cursor-pointer"
+      onClick={onDelete}
+    >
+      <CollapsibleTrigger className="flex items-center justify-start gap-2 cursor-pointer">
+        <div className="rounded-lg bg-neutral-700 size-6 flex items-center justify-center">
+          <Code className="text-neutral-300 size-3.5" />
+        </div>
+        <p className="text-sm font-semibold text-neutral-300">
+          {htmlTagToText(tagName)}
+        </p>
+        <XCircle className="text-neutral-300 size-4" />
+      </CollapsibleTrigger>
+      {/* <CollapsibleContent className="border-t border-neutral-700 pt-2 mt-2">
+        <div className="text-xs text-neutral-400">
+          <p>
+            <span className="font-semibold">ID:</span> {element.id || "No ID"}
+          </p>
+          <p>
+            <span className="font-semibold">Classes:</span>{" "}
+            {element.className || "No classes"}
+          </p>
+        </div>
+      </CollapsibleContent> */}
+    </Collapsible>
+  );
+};

components/editor/index.tsx

@@ -47,6 +47,10 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
   const [device, setDevice] = useState<"desktop" | "mobile">("desktop");
   const [isResizing, setIsResizing] = useState(false);
   const [isAiWorking, setIsAiWorking] = useState(false);
+  const [isEditableModeEnabled, setIsEditableModeEnabled] = useState(false);
+  const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(
+    null
+  );
 
   /**
    * Resets the layout based on screen size
@@ -158,6 +162,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
         resizer.current.addEventListener("mousedown", handleMouseDown);
       }
     } else {
+      setIsEditableModeEnabled(false);
       if (preview.current) {
         // Reset preview width when switching to preview tab
         preview.current.style.width = "100%";
@@ -234,6 +239,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                     prompt: p,
                   });
                   setHtmlHistory(currentHistory);
+                  setSelectedElement(null);
                   // if xs or sm
                   if (window.innerWidth <= 1024) {
                     setCurrentTab("preview");
@@ -269,6 +275,10 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                     editorRef.current?.getModel()?.getLineCount() ?? 0
                   );
                 }}
+                isEditableModeEnabled={isEditableModeEnabled}
+                setIsEditableModeEnabled={setIsEditableModeEnabled}
+                selectedElement={selectedElement}
+                setSelectedElement={setSelectedElement}
               />
             </div>
             <div
@@ -284,7 +294,12 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
           ref={preview}
           device={device}
           currentTab={currentTab}
+          isEditableModeEnabled={isEditableModeEnabled}
           iframeRef={iframeRef}
+          onClickElement={(element) => {
+            setIsEditableModeEnabled(false);
+            setSelectedElement(element);
+          }}
         />
       </main>
       <Footer

components/editor/preview/index.tsx

@@ -1,9 +1,12 @@
 "use client";
+import { useUpdateEffect } from "react-use";
+import { useMemo, useState } from "react";
 import classNames from "classnames";
 import { toast } from "sonner";
 
 import { cn } from "@/lib/utils";
 import { GridPattern } from "@/components/magic-ui/grid-pattern";
+import { htmlTagToText } from "@/lib/html-tag-to-text";
 
 export const Preview = ({
   html,
@@ -13,6 +16,8 @@ export const Preview = ({
   device,
   currentTab,
   iframeRef,
+  isEditableModeEnabled,
+  onClickElement,
 }: {
   html: string;
   isResizing: boolean;
@@ -21,7 +26,80 @@ export const Preview = ({
   iframeRef?: React.RefObject<HTMLIFrameElement | null>;
   device: "desktop" | "mobile";
   currentTab: string;
+  isEditableModeEnabled?: boolean;
+  onClickElement?: (element: HTMLElement) => void;
 }) => {
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(
+    null
+  );
+
+  // add event listener to the iframe to track hovered elements
+  const handleMouseOver = (event: MouseEvent) => {
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const targetElement = event.target as HTMLElement;
+        if (
+          hoveredElement !== targetElement &&
+          targetElement !== iframeDocument.body
+        ) {
+          setHoveredElement(targetElement);
+          targetElement.classList.add("hovered-element");
+        } else {
+          return setHoveredElement(null);
+        }
+      }
+    }
+  };
+  const handleMouseOut = () => {
+    setHoveredElement(null);
+  };
+  const handleClick = (event: MouseEvent) => {
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const targetElement = event.target as HTMLElement;
+        if (targetElement !== iframeDocument.body) {
+          onClickElement?.(targetElement);
+        }
+      }
+    }
+  };
+
+  useUpdateEffect(() => {
+    const cleanupListeners = () => {
+      if (iframeRef?.current?.contentDocument) {
+        const iframeDocument = iframeRef.current.contentDocument;
+        iframeDocument.removeEventListener("mouseover", handleMouseOver);
+        iframeDocument.removeEventListener("mouseout", handleMouseOut);
+        iframeDocument.removeEventListener("click", handleClick);
+      }
+    };
+
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        // Clean up existing listeners first
+        cleanupListeners();
+
+        if (isEditableModeEnabled) {
+          iframeDocument.addEventListener("mouseover", handleMouseOver);
+          iframeDocument.addEventListener("mouseout", handleMouseOut);
+          iframeDocument.addEventListener("click", handleClick);
+        }
+      }
+    }
+
+    // Clean up when component unmounts or dependencies change
+    return cleanupListeners;
+  }, [iframeRef, isEditableModeEnabled]);
+
+  const selectedElement = useMemo(() => {
+    if (!isEditableModeEnabled) return null;
+    if (!hoveredElement) return null;
+    return hoveredElement;
+  }, [hoveredElement, isEditableModeEnabled]);
+
   return (
     <div
       ref={ref}
@@ -49,6 +127,27 @@ export const Preview = ({
           "[mask-image:radial-gradient(900px_circle_at_center,white,transparent)]"
         )}
       />
+      {!isAiWorking && hoveredElement && selectedElement && (
+        <div
+          className="cursor-pointer absolute bg-sky-500/10 border-[2px] border-dashed border-sky-500 rounded-r-lg rounded-b-lg p-3 z-10 pointer-events-none"
+          style={{
+            top:
+              selectedElement.getBoundingClientRect().top +
+              (iframeRef?.current?.contentWindow?.scrollY || 0) +
+              24,
+            left:
+              selectedElement.getBoundingClientRect().left +
+              (iframeRef?.current?.contentWindow?.scrollX || 0) +
+              24,
+            width: selectedElement.getBoundingClientRect().width,
+            height: selectedElement.getBoundingClientRect().height,
+          }}
+        >
+          <span className="bg-sky-500 rounded-t-md text-sm text-neutral-100 px-2 py-0.5 -translate-y-7 absolute top-0 left-0">
+            {htmlTagToText(selectedElement.tagName.toLowerCase())}
+          </span>
+        </div>
+      )}
       <iframe
         id="preview-iframe"
         ref={iframeRef}

components/public/navigation/index.tsx

@@ -85,7 +85,7 @@ export default function Navigation() {
         }
       )}
     >
-      <nav className="grid grid-cols-3 p-4 container mx-auto">
+      <nav className="grid grid-cols-2 p-4 container mx-auto">
         <Link href="/" className="flex items-center gap-1">
           <Image
             src={Logo}
@@ -96,7 +96,7 @@ export default function Navigation() {
           />
           <p className="font-sans text-white text-xl font-bold">DeepSite</p>
         </Link>
-        <ul className="flex items-center justify-center gap-6">
+        <ul className="items-center justify-center gap-6 hidden">
           {navigationLinks.map((link) => (
             <li
               key={link.name}

components/space/ask-ai/index.tsx

@@ -8,34 +8,39 @@ import { Button } from "@/components/ui/button";
 
 export const AskAi = () => {
   return (
-    <div className="bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent group">
-      <textarea
-        rows={3}
-        className="w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none mb-1"
-        placeholder="Ask DeepSite anything..."
-        onChange={() => {}}
-        onKeyDown={() => {}}
-      />
-      <div className="flex items-center justify-between gap-2 px-4 pb-3">
-        <div className="flex-1 flex justify-start">
-          <Button
-            size="iconXs"
-            variant="outline"
-            className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
-          >
-            <TiUserAdd className="size-4" />
-          </Button>
-        </div>
-        <div className="flex items-center justify-end gap-2">
-          <Button variant="black" size="sm">
-            <PiGearSixFill className="size-4" />
-            Settings
-          </Button>
-          <Button size="iconXs">
-            <ArrowUp className="size-4" />
-          </Button>
+    <>
+      <div className="bg-red-500 flex items-center justify-end">
+        No Follow-up mode
+      </div>
+      <div className="bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent group">
+        <textarea
+          rows={3}
+          className="w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none mb-1"
+          placeholder="Ask DeepSite anything..."
+          onChange={() => {}}
+          onKeyDown={() => {}}
+        />
+        <div className="flex items-center justify-between gap-2 px-4 pb-3">
+          <div className="flex-1 flex justify-start">
+            <Button
+              size="iconXs"
+              variant="outline"
+              className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
+            >
+              <TiUserAdd className="size-4" />
+            </Button>
+          </div>
+          <div className="flex items-center justify-end gap-2">
+            <Button variant="black" size="sm">
+              <PiGearSixFill className="size-4" />
+              Settings
+            </Button>
+            <Button size="iconXs">
+              <ArrowUp className="size-4" />
+            </Button>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };

components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-3.5 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

components/ui/switch.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

lib/html-tag-to-text.ts

@@ -0,0 +1,96 @@
+export const htmlTagToText = (tagName: string): string => {
+  switch (tagName.toLowerCase()) {
+    case "h1":
+      return "Heading 1";
+    case "h2":
+      return "Heading 2";
+    case "h3":
+      return "Heading 3";
+    case "h4":
+      return "Heading 4";
+    case "h5":
+      return "Heading 5";
+    case "h6":
+      return "Heading 6";
+    case "p":
+      return "Text Paragraph";
+    case "span":
+      return "Inline Text";
+    case "button":
+      return "Button";
+    case "input":
+      return "Input Field";
+    case "select":
+      return "Select Dropdown";
+    case "textarea":
+      return "Text Area";
+    case "form":
+      return "Form";
+    case "table":
+      return "Table";
+    case "thead":
+      return "Table Header";
+    case "tbody":
+      return "Table Body";
+    case "tr":
+      return "Table Row";
+    case "th":
+      return "Table Header Cell";
+    case "td":
+      return "Table Data Cell";
+    case "nav":
+      return "Navigation";
+    case "header":
+      return "Header";
+    case "footer":
+      return "Footer";
+    case "section":
+      return "Section";
+    case "article":
+      return "Article";
+    case "aside":
+      return "Aside";
+    case "div":
+      return "Division";
+    case "main":
+      return "Main Content";
+    case "details":
+      return "Details";
+    case "summary":
+      return "Summary";
+    case "code":
+      return "Code Snippet";
+    case "pre":
+      return "Preformatted Text";
+    case "kbd":
+      return "Keyboard Input";
+    case "label":
+      return "Label";
+    case "canvas":
+      return "Canvas";
+    case "svg":
+      return "SVG Graphic";
+    case "video":
+      return "Video Player";
+    case "audio":
+      return "Audio Player";
+    case "iframe":
+      return "Embedded Frame";
+    case "link":
+      return "Link";
+    case "a":
+      return "Link";
+    case "img":
+      return "Image";
+    case "ul":
+      return "Unordered List";
+    case "ol":
+      return "Ordered List";
+    case "li":
+      return "List Item";
+    case "blockquote":
+      return "Blockquote";
+    default:
+      return tagName.charAt(0).toUpperCase() + tagName.slice(1);
+  }
+};

package-lock.json

@@ -12,11 +12,14 @@
         "@huggingface/inference": "^4.0.3",
         "@monaco-editor/react": "^4.7.0",
         "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-checkbox": "^1.3.2",
+        "@radix-ui/react-collapsible": "^1.1.11",
         "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@radix-ui/react-popover": "^1.1.14",
         "@radix-ui/react-select": "^2.2.5",
         "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-switch": "^1.2.5",
         "@radix-ui/react-tabs": "^1.1.12",
         "@radix-ui/react-toggle": "^1.1.9",
         "@radix-ui/react-toggle-group": "^1.1.10",
@@ -1169,6 +1172,66 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.2.tgz",
+      "integrity": "sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.11.tgz",
+      "integrity": "sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -1662,6 +1725,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.5.tgz",
+      "integrity": "sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tabs": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.12.tgz",

package.json

@@ -13,11 +13,14 @@
     "@huggingface/inference": "^4.0.3",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",