@alpaca-editor/core 1.0.4033 → 1.0.4037

package/dist/splash-screen/OpenPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenPage.js","sourceRoot":"","sources":["../../src/splash-screen/OpenPage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"OpenPage.js","sourceRoot":"","sources":["../../src/splash-screen/OpenPage.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEjC,MAAM,UAAU,QAAQ;IACtB,MAAM,YAAY,GAChB,OAAO,MAAM,KAAK,WAAW;QAC3B,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,sBAAsB,CAAC;QAC9C,CAAC,CAAC,IAAI,CAAC;IAEX,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAsB,IAAI,CAAC,CAAC;IAC5E,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,WAAW,GAAmB,YAAY;QAC9C,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;QAC1B,CAAC,CAAC,EAAE,CAAC;IAEP,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC;YAC1C,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,cAAK,SAAS,EAAC,qDAAqD,YAClE,KAAC,OAAO,KAAG,GACP,CACP,CAAC;IACJ,CAAC;IAED,MAAM,QAAQ,GAAG,CAAC,IAAoB,EAAE,EAAE;QACxC,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,WAAW,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;QACvC,WAAW;YACT,EAAE,QAAQ,CAAC;YACT,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI;YAC/B,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC;aACD,OAAO,CAAC,GAAG,EAAE;YACZ,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,OAAO,CACL,eAAK,SAAS,EAAC,4BAA4B,aACzC,eAAK,SAAS,EAAC,YAAY,aACzB,KAAC,IAAI,IAAC,SAAS,EAAC,SAAS,GAAG,EAC5B,eAAK,SAAS,EAAC,yBAAyB,aACtC,cAAK,SAAS,EAAC,kCAAkC,0BAAgB,EACjE,cAAK,SAAS,EAAC,oCAAoC,8EAE7C,IACF,EACN,eAAK,SAAS,EAAC,wBAAwB,aACrC,MAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,UAAU,CAAC,EAClD,SAAS,EAAE,KAAK,iCAEA,KAAC,aAAa,KAAG,IACpB,EACf,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CACZ,WAAW,EAAE,UAAU,CACrB,WAAW,CAAC,gBAAgB,IAAI,eAAe,CAChD,EAEH,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,KAAK,gBACJ,OAAO,YAElB,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,GAAG,GACZ,IACX,IACF,EAEN,eAAK,SAAS,EAAC,gDAAgD,aAC7D,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,IAAI,IACH,IAAI,EAAE,YAAG,SAAS,EAAC,uBAAuB,GAAK,EAC/C,KAAK,EAAC,gBAAgB,EACtB,WAAW,EAAC,yCAAyC,EACrD,SAAS,QACT,SAAS,EAAC,QAAQ,YAElB,cAAK,SAAS,EAAC,aAAa,YAC1B,cAAK,SAAS,EAAC,iBAAiB,YAC9B,KAAC,oBAAoB,IACnB,cAAc,EAAE,YAAY,EAAE,EAAE,EAChC,aAAa,EAAE,IAAI,EACnB,iBAAiB,EAAE,CAAC,SAAS,EAAE,EAAE;gDAC/B,MAAM,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;gDAClC,IAAI,YAAY,EAAE,CAAC;oDACjB,QAAQ,CAAC,YAAY,CAAC,CAAC;gDACzB,CAAC;4CACH,CAAC,GACD,GACE,GACF,GACD,GACH,EACN,cAAK,SAAS,EAAC,gBAAgB,YAC7B,KAAC,WAAW,KAAG,GACX,IACF,IACF,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,6CAA6C,YACzD,aAAa,EAAE,GACZ,CACP,CAAC;AACJ,CAAC"}

package/dist/styles.css

@@ -85,6 +85,7 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --breakpoint-xl: 80rem;
+    --container-md: 28rem;
     --container-lg: 32rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -292,9 +293,6 @@
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
-  .bottom-8 {
-    bottom: calc(var(--spacing) * 8);
-  }
   .-left-1\.5 {
     left: calc(var(--spacing) * -1.5);
   }
@@ -382,6 +380,9 @@
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
   .mx-6 {
     margin-inline: calc(var(--spacing) * 6);
   }
@@ -556,6 +557,10 @@
     width: calc(var(--spacing) * 2.5);
     height: calc(var(--spacing) * 2.5);
   }
+  .size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
   .size-3\.5 {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -620,12 +625,12 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-15 {
+    height: calc(var(--spacing) * 15);
+  }
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
-  .h-20 {
-    height: calc(var(--spacing) * 20);
-  }
   .h-23 {
     height: calc(var(--spacing) * 23);
   }
@@ -674,8 +679,8 @@
   .h-\[160px\] {
     height: 160px;
   }
-  .h-\[400px\] {
-    height: 400px;
+  .h-\[250px\] {
+    height: 250px;
   }
   .h-\[600px\] {
     height: 600px;
@@ -710,6 +715,9 @@
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
+  .max-h-64 {
+    max-height: calc(var(--spacing) * 64);
+  }
   .max-h-80 {
     max-height: calc(var(--spacing) * 80);
   }
@@ -752,6 +760,9 @@
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
+  .min-h-\[70px\] {
+    min-height: 70px;
+  }
   .min-h-\[100px\] {
     min-height: 100px;
   }
@@ -842,6 +853,9 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
+  .w-\[--radix-dropdown-menu-trigger-width\] {
+    width: --radix-dropdown-menu-trigger-width;
+  }
   .w-\[2px\] {
     width: 2px;
   }
@@ -869,6 +883,9 @@
   .w-\[400px\] {
     width: 400px;
   }
+  .w-\[450px\] {
+    width: 450px;
+  }
   .w-auto {
     width: auto;
   }
@@ -908,6 +925,9 @@
   .max-w-lg {
     max-width: var(--container-lg);
   }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .max-w-none {
     max-width: none;
   }
@@ -941,6 +961,9 @@
   .min-w-\[120px\] {
     min-width: 120px;
   }
+  .min-w-\[200px\] {
+    min-width: 200px;
+  }
   .min-w-full {
     min-width: 100%;
   }
@@ -2499,12 +2522,21 @@
     -webkit-user-select: text;
     user-select: text;
   }
+  .\!\[--width\:340px\] {
+    --width: 340px !important;
+  }
+  .\[-ms-overflow-style\:none\] {
+    -ms-overflow-style: none;
+  }
   .\[animation-delay\:-0\.3s\] {
     animation-delay: -0.3s;
   }
   .\[animation-delay\:-0\.15s\] {
     animation-delay: -0.15s;
   }
+  .\[scrollbar-width\:none\] {
+    scrollbar-width: none;
+  }
   .fade-in {
     --tw-enter-opacity: 0;
   }
@@ -2812,6 +2844,13 @@
       }
     }
   }
+  .hover\:bg-green-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-green-50);
+      }
+    }
+  }
   .hover\:bg-green-600 {
     &:hover {
       @media (hover: hover) {
@@ -2847,6 +2886,13 @@
       }
     }
   }
+  .hover\:bg-red-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-200);
+      }
+    }
+  }
   .hover\:bg-red-400 {
     &:hover {
       @media (hover: hover) {
@@ -2996,6 +3042,13 @@
       }
     }
   }
+  .hover\:text-red-800 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-red-800);
+      }
+    }
+  }
   .hover\:text-white {
     &:hover {
       @media (hover: hover) {
@@ -3660,6 +3713,11 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .xl\:\!\[--width\:660px\] {
+    @media (width >= 80rem) {
+      --width: 660px !important;
+    }
+  }
   .dark\:border-input {
     @media (prefers-color-scheme: dark) {
       border-color: var(--input);
@@ -3881,6 +3939,11 @@
       padding-left: calc(var(--spacing) * 5);
     }
   }
+  .\[\&\:\:-webkit-scrollbar\]\:hidden {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
   .data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive {
     &[data-variant="destructive"] {
       :is(& > *) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.4033",
+  "version": "1.0.4037",
   "publishConfig": {
     "access": "public"
   },

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export { FilterInput, highlightMatch } from "./FilterInput";
 export type { FilterInputProps } from "./FilterInput";
+export { LanguageSelector } from "./ui/LanguageSelector";

package/src/{editor/menubar → components/ui}/LanguageSelector.tsx

@@ -2,12 +2,12 @@
 
 import * as React from "react";
 import { Check, ChevronsUpDown } from "lucide-react";
-import { useEditContext } from "../client/editContext";
-import { Language } from "../pageModel";
+import { useEditContext } from "../../editor/client/editContext";
+import { Language } from "../../editor/pageModel";
 import { cn } from "../../lib/utils";
-import { Button } from "../../components/ui/button";
-import { Switch } from "../../components/ui/switch";
-import { FilterInput, highlightMatch } from "../../components/FilterInput";
+import { Button } from "./button";
+import { Switch } from "./switch";
+import { FilterInput, highlightMatch } from "../FilterInput";
 
 import {
   Command,
@@ -15,12 +15,8 @@ import {
   CommandGroup,
   CommandItem,
   CommandList,
-} from "../../components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "../../components/ui/popover";
+} from "./command";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 
 export function LanguageSelector({
   selectedLanguage,
@@ -103,7 +99,10 @@ export function LanguageSelector({
             )}
             {!currentLanguage && <div>Select language</div>}
           </div>
-          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+          <ChevronsUpDown
+            className="h-4 w-4 shrink-0 opacity-50"
+            strokeWidth={1}
+          />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-64 p-0" align="start">
@@ -171,6 +170,7 @@ export function LanguageSelector({
                         ? "opacity-100"
                         : "opacity-0",
                     )}
+                    strokeWidth={1}
                   />
                 </CommandItem>
               ))}

package/src/components/ui/dropdown-menu.tsx

@@ -34,6 +34,7 @@ function DropdownMenuTrigger({
 function DropdownMenuContent({
   className,
   sideOffset = 4,
+  align = "start",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
   return (
@@ -41,8 +42,9 @@ function DropdownMenuContent({
       <DropdownMenuPrimitive.Content
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
+        align={align}
         className={cn(
-          "bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-[--radix-dropdown-menu-trigger-width] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
           className,
         )}
         {...props}

package/src/components/ui/sonner.tsx

@@ -8,8 +8,12 @@ const Toaster = ({ ...props }: ToasterProps) => {
 
   return (
     <Sonner
+      duration={4000}
       theme={theme as ToasterProps["theme"]}
-      className="toaster group"
+      className="toaster group ![--width:340px] xl:![--width:660px]"
+      toastOptions={{
+        className: "w-[400px] max-h-64 overflow-y-auto",
+      }}
       style={
         {
           "--normal-bg": "var(--popover)",

package/src/config/config.tsx

@@ -34,6 +34,7 @@ import {
   GraphQLIcon,
   JsonIcon,
   PageWizardIcon,
+  SecretAgentIcon,
   TreeIcon,
 } from "../editor/ui/Icons";
 import { Debug } from "../editor/sidebar/Debug";
@@ -443,12 +444,12 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "agents",
           title: "Agents",
-          icon: <SparklesIcon strokeWidth={1} />,
+          icon: <SecretAgentIcon strokeWidth={1} />,
           leftSidebar: {
             panels: [
               {
                 name: "ai-terminal",
-                title: "Agent",
+                title: "Agents",
                 content: <Agents />,
                 initialSize: 70,
                 noOverflow: true,
@@ -580,7 +581,7 @@ export const getConfiguration = (): EditorConfiguration => {
                 name: "tree",
                 icon: <TreeIcon />,
                 title: "Content",
-                content: <MainContentTree mode="normal" />,
+                content: <MainContentTree mode="normal" hideRootNodes={true} />,
                 initialSize: 80,
               },
             ],

package/src/editor/ContentTree.tsx

@@ -55,6 +55,7 @@ export default function ContentTree({
   showGrabCursorForDraggableNodes,
   enableDragAndDrop,
   enableContextMenu,
+  hideRootNodes,
 }: {
   isDraggable?: (item: ItemTreeNodeData) => boolean;
   dragEnd?: () => void;
@@ -83,6 +84,7 @@ export default function ContentTree({
   showGrabCursorForDraggableNodes?: boolean;
   enableDragAndDrop?: boolean;
   enableContextMenu?: boolean;
+  hideRootNodes?: boolean; // When true, hides root nodes and displays their children as top-level nodes
 }) {
   const [treeNodes, setTreeNodes] = useState<TreeNode[]>([]);
 
@@ -187,6 +189,35 @@ export default function ContentTree({
     async (force: boolean = false) => {
       if (!force && treeNodes.length > 0) return treeNodes;
 
+      if (hideRootNodes) {
+        // Load children of root nodes and show them as root level nodes
+        const rootNodes = await Promise.all(
+          rootItemIds
+            ?.map((rootItemId) =>
+              loadNode({
+                id: rootItemId,
+                language,
+                version: 0,
+              }),
+            )
+            .filter((x) => x) || [],
+        );
+
+        const allChildren: CustomTreeNode[] = [];
+        for (const rootNode of rootNodes) {
+          if (rootNode) {
+            const children = await loadNodeChildren(rootNode);
+            // Remove parent reference since these will be displayed as root nodes
+            children.forEach((child) => {
+              child.parent = undefined;
+            });
+            allChildren.push(...children);
+          }
+        }
+
+        return allChildren;
+      }
+
       return await Promise.all(
         rootItemIds
           ?.map((rootItemId) =>
@@ -199,7 +230,14 @@ export default function ContentTree({
           .filter((x) => x) || [],
       );
     },
-    [loadNode, loadNodeChildren, rootItemIds, language, treeNodes],
+    [
+      loadNode,
+      loadNodeChildren,
+      rootItemIds,
+      language,
+      treeNodes,
+      hideRootNodes,
+    ],
   );
 
   const doPreloadNodes = useCallback(
@@ -289,7 +327,7 @@ export default function ContentTree({
     };
 
     load();
-  }, [language, rootItemIds]);
+  }, [language, rootItemIds, hideRootNodes]);
 
   // Handle expanded keys changes without forcing reload
   useEffect(() => {
@@ -680,15 +718,6 @@ export default function ContentTree({
     [loadNodeChildren],
   );
 
-  const loadOnExpand = useCallback(
-    async (node: CustomTreeNode) => {
-      node.children = null;
-      setTreeNodes([...treeNodes]);
-      await loadChildren(node);
-    },
-    [loadChildren, treeNodes],
-  );
-
   const handleDragOverZone = useCallback(
     (node: CustomTreeNode | null, index: number, event: React.DragEvent) => {
       event.dataTransfer.dropEffect = event.ctrlKey ? "copy" : "move";
@@ -716,7 +745,7 @@ export default function ContentTree({
           expandedKeys={expandedKeys}
           onToggleExpand={handleToggleExpand}
           renderNode={memoizedRenderNode}
-          onLazyLoad={loadOnExpand}
+          onLazyLoad={loadChildren}
           onDoubleClick={handleDoubleClick}
           onSelect={handleNodeSelect}
           selectedKeys={selectedKeys}

package/src/editor/PictureEditor.tsx

@@ -214,14 +214,14 @@ export function PictureEditor({
       }}
       onWheel={(e) => {
         if (forwardScrollevents)
-          editContext?.pageView.editorIframeRef!.current?.contentWindow?.document.documentElement?.scrollBy(
+          editContext?.pageView.editorIframe!?.contentWindow?.document.documentElement?.scrollBy(
             {
               behavior: "instant",
               left: 0,
               top: e.deltaY,
             },
           );
-        editContext?.pageView.editorIframeRef!.current?.contentWindow?.document.body?.scrollBy(
+        editContext?.pageView.editorIframe!?.contentWindow?.document.body?.scrollBy(
           {
             behavior: "instant",
             left: 0,

package/src/editor/ScrollingContentTree.tsx

@@ -13,6 +13,7 @@ export function ScrollingContentTree({
   rootItemIds,
   expandedItemId,
   scrollToSelected = true,
+  hideRootNodes,
 }: {
   selectedItemId?: string;
   onSelectionChange?: (itemIds: ItemTreeNodeData[]) => void;
@@ -20,6 +21,7 @@ export function ScrollingContentTree({
   rootItemIds?: string[];
   expandedItemId?: string;
   scrollToSelected?: boolean;
+  hideRootNodes?: boolean;
 }) {
   const [selectedItem, setSelectdItem] = useState<FullItem | null>(null);
   const [expandedItem, setExpandedItem] = useState<FullItem | null>();
@@ -70,6 +72,7 @@ export function ScrollingContentTree({
         className="h-full p-1"
         onSelectionChange={onSelectionChange}
         scrollToSelected={scrollToSelected}
+        hideRootNodes={hideRootNodes}
       />
     </div>
   );

package/src/editor/Terminal.tsx

@@ -28,6 +28,8 @@ export const Terminal = forwardRef<
     onReset: () => void;
     toolbar?: React.ReactNode;
     statusbar?: React.ReactNode;
+    rightbar?: React.ReactNode;
+    submitOverride?: React.ReactNode;
     infobar?: React.ReactNode;
     disabled?: boolean;
     className?: string;
@@ -41,6 +43,8 @@ export const Terminal = forwardRef<
     onReset,
     toolbar,
     statusbar,
+    rightbar,
+    submitOverride,
     infobar,
     disabled,
     className,
@@ -227,13 +231,18 @@ export const Terminal = forwardRef<
         />
         <div className="flex items-center justify-between py-1">
           {statusbar}
-          <SimpleIconButton
-            icon={<Send size={16} strokeWidth={1} />}
-            className="tour-send-button"
-            onClick={submit}
-            disabled={prompt.trim().length === 0}
-            label="Send"
-          />
+          <div className="flex items-center gap-1">
+            {rightbar}
+            {submitOverride ?? (
+              <SimpleIconButton
+                icon={<Send size={16} strokeWidth={1} />}
+                className="tour-send-button"
+                onClick={submit}
+                disabled={prompt.trim().length === 0}
+                label="Send"
+              />
+            )}
+          </div>
         </div>
       </div>
     </div>

package/src/editor/ai/AgentHistory.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { History, Trash2 } from "lucide-react";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { AgentChat } from "../services/agentService";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+
+interface AgentHistoryProps {
+  closedAgents: AgentChat[];
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onOpenAgent: (agent: AgentChat) => void;
+  onDeleteAgent: (agent: AgentChat) => void;
+  formatDateToLocalTime: (dateString: string) => string;
+}
+
+export function AgentHistory({
+  closedAgents,
+  isOpen,
+  onOpenChange,
+  onOpenAgent,
+  onDeleteAgent,
+  formatDateToLocalTime,
+}: AgentHistoryProps) {
+  const handleDeleteClick = (e: React.MouseEvent, agent: AgentChat) => {
+    e.stopPropagation(); // Prevent opening the agent
+    onDeleteAgent(agent);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <SimpleIconButton
+          onClick={() => {}}
+          icon={<History className="size-4" strokeWidth={1} />}
+          label="Agent History"
+          className="text-gray-600 hover:text-gray-800"
+        />
+      </PopoverTrigger>
+      <PopoverContent className="w-72 p-0" align="end">
+        <div className="border-b border-gray-100 px-3 py-2 text-xs font-medium text-gray-500">
+          Agent History
+        </div>
+        <div className="max-h-80 overflow-y-auto">
+          {closedAgents.length === 0 ? (
+            <div className="px-3 py-2 text-xs text-gray-500">
+              No closed agents found
+            </div>
+          ) : (
+            closedAgents.map((agent) => (
+              <div
+                key={agent.id}
+                className="group flex cursor-pointer items-center justify-between border-b border-gray-50 px-3 py-2 text-xs hover:bg-gray-50"
+                onClick={() => onOpenAgent(agent)}
+              >
+                <div className="min-w-0 flex-1">
+                  <div className="truncate font-medium text-gray-900">
+                    {agent.name}
+                  </div>
+                  <div className="truncate text-gray-500">
+                    {agent.profileName}
+                  </div>
+                  <div className="text-xs text-gray-400">
+                    {formatDateToLocalTime(agent.updatedDate)}
+                  </div>
+                </div>
+                <div className="ml-2 flex-shrink-0">
+                  <SimpleIconButton
+                    onClick={(e) => handleDeleteClick(e, agent)}
+                    icon={<Trash2 className="size-3" strokeWidth={1} />}
+                    label="Delete Agent"
+                    className="text-red-600 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-800"
+                  />
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}