@lukeashford/aurelius 3.0.0 → 3.1.0

package/dist/index.mjs

@@ -6202,9 +6202,9 @@ function areAllTasksSettled(tasks) {
 // src/components/chat/ToolSidebar.tsx
 import React71 from "react";
 var ToolSidebar = React71.forwardRef(
-  ({ tools, activeTools, onToggleTool, className, ...rest }, ref) => {
-    const topTools = tools.filter((t) => t.group === "top");
-    const bottomTools = tools.filter((t) => t.group === "bottom");
+  ({ tools, activeTools, onToggleTool, side, className, ...rest }, ref) => {
+    const topTools = tools.filter((t) => t.group === `top-${side}`);
+    const bottomTools = tools.filter((t) => t.group === `bottom-${side}`);
     const isActive = (toolId) => {
       const tool = tools.find((t) => t.id === toolId);
       if (!tool) return false;
@@ -6232,7 +6232,8 @@ var ToolSidebar = React71.forwardRef(
       {
         ref,
         className: cx(
-          "h-full w-9 bg-charcoal/80 border-l border-ash/40 flex flex-col items-center shrink-0 py-2",
+          "h-full w-9 bg-charcoal/80 flex flex-col items-center shrink-0 py-2",
+          side === "left" ? "border-r border-ash/40" : "border-l border-ash/40",
           className
         ),
         ...rest
@@ -6248,7 +6249,7 @@ ToolSidebar.displayName = "ToolSidebar";
 // src/components/chat/ToolPanelContainer.tsx
 import React72, { useCallback as useCallback16, useEffect as useEffect13, useRef as useRef11, useState as useState17 } from "react";
 var ToolPanelContainer = React72.forwardRef(
-  ({ topContent, bottomContent, width, onResizeStart, className, ...rest }, ref) => {
+  ({ topContent, bottomContent, width, onResizeStart, side = "right", className, ...rest }, ref) => {
     const [topPercent, setTopPercent] = useState17(60);
     const [isResizingHeight, setIsResizingHeight] = useState17(false);
     const containerRef = useRef11(null);
@@ -6306,7 +6307,8 @@ var ToolPanelContainer = React72.forwardRef(
           else if (ref) ref.current = node;
         },
         className: cx(
-          "h-full bg-charcoal/50 border-l border-ash/40 flex flex-col relative shrink-0",
+          "h-full bg-charcoal/50 flex flex-col relative shrink-0",
+          side === "left" ? "border-r border-ash/40" : "border-l border-ash/40",
           className
         ),
         style: width ? { width } : void 0,
@@ -6317,9 +6319,9 @@ var ToolPanelContainer = React72.forwardRef(
         {
           onMouseDown: onResizeStart,
           className: cx(
-            "absolute top-0 left-0 w-1 h-full cursor-col-resize z-50",
+            "absolute top-0 w-1 h-full cursor-col-resize z-50",
             "hover:bg-gold/50 transition-colors",
-            "after:absolute after:inset-y-0 after:-left-1 after:w-2"
+            side === "left" ? "right-0 after:absolute after:inset-y-0 after:-right-1 after:w-2" : "left-0 after:absolute after:inset-y-0 after:-left-1 after:w-2"
           )
         }
       ),
@@ -6443,6 +6445,7 @@ var ChatInterface = React73.forwardRef(
     onArtifactsPanelOpenChange,
     tasks = [],
     tasksTitle,
+    tools: externalTools = [],
     className,
     ...rest
   }, ref) => {
@@ -6450,21 +6453,24 @@ var ChatInterface = React73.forwardRef(
     const prevArtifactNodesRef = useRef13([]);
     const prevTasksRef = useRef13([]);
     const [internalTools, setInternalTools] = useState19({
-      top: null,
-      bottom: null
+      "top-left": null,
+      "bottom-left": null,
+      "top-right": null,
+      "bottom-right": null
     });
     const dismissedToolsRef = useRef13(/* @__PURE__ */ new Set());
     const isPanelControlled = isArtifactsPanelOpen !== void 0;
     const activeTools = useMemo4(() => {
       if (isPanelControlled) {
         return {
-          top: isArtifactsPanelOpen ? "artifacts" : internalTools.top,
-          bottom: internalTools.bottom
+          ...internalTools,
+          "top-right": isArtifactsPanelOpen ? "artifacts" : internalTools["top-right"]
         };
       }
       return internalTools;
     }, [isPanelControlled, isArtifactsPanelOpen, internalTools]);
-    const isAnyToolOpen = activeTools.top !== null || activeTools.bottom !== null;
+    const isLeftPanelOpen = activeTools["top-left"] !== null || activeTools["bottom-left"] !== null;
+    const isRightPanelOpen = activeTools["top-right"] !== null || activeTools["bottom-right"] !== null;
     const {
       width: sidebarWidth,
       startResizing: startResizingSidebar
@@ -6475,20 +6481,44 @@ var ChatInterface = React73.forwardRef(
       direction: "right"
     });
     const {
-      width: toolsWidth,
-      startResizing: startResizingTools
+      width: rightToolsWidth,
+      startResizing: startResizingRightTools
     } = useResizable({
       initialWidthPercent: 50,
       minWidthPercent: 25,
       maxWidthPercent: 70,
       direction: "left"
     });
+    const {
+      width: leftToolsWidth,
+      startResizing: startResizingLeftTools
+    } = useResizable({
+      initialWidthPercent: 25,
+      minWidthPercent: 15,
+      maxWidthPercent: 40,
+      direction: "right"
+    });
+    const allSettled = tasks.length === 0 || areAllTasksSettled(tasks);
+    const allToolDefinitions = useMemo4(() => {
+      const builtIn = [
+        { id: "history", icon: /* @__PURE__ */ React73.createElement(HistoryIcon, null), label: "History", group: "top-left" },
+        { id: "artifacts", icon: /* @__PURE__ */ React73.createElement(MediaIcon, null), label: "Artifacts", group: "top-right" },
+        {
+          id: "todos",
+          icon: allSettled ? /* @__PURE__ */ React73.createElement(CheckSquareIcon, null) : /* @__PURE__ */ React73.createElement(SquareLoaderIcon, null),
+          label: "Tasks",
+          group: "bottom-right"
+        }
+      ];
+      const external = externalTools.map(({ content: _content, ...def }) => def);
+      return [...builtIn, ...external];
+    }, [allSettled, externalTools]);
     const toggleTool = useCallback18((toolId) => {
-      const toolDef = TOOL_DEFINITIONS.find((t) => t.id === toolId);
+      const toolDef = allToolDefinitions.find((t) => t.id === toolId);
       if (!toolDef) return;
       const group = toolDef.group;
       if (toolId === "artifacts" && isPanelControlled) {
-        const isCurrentlyOpen = activeTools.top === "artifacts";
+        const isCurrentlyOpen = activeTools["top-right"] === "artifacts";
         if (isCurrentlyOpen) {
           dismissedToolsRef.current.add("artifacts");
         } else {
@@ -6509,7 +6539,7 @@ var ChatInterface = React73.forwardRef(
           [group]: isCurrentlyOpen ? null : toolId
         };
       });
-    }, [isPanelControlled, activeTools.top, onArtifactsPanelOpenChange]);
+    }, [allToolDefinitions, isPanelControlled, activeTools, onArtifactsPanelOpenChange]);
     const isTreeMode = !!conversationTree;
     const effectiveMessages = useMemo4(() => {
       if (isTreeMode && conversationTree) {
@@ -6534,7 +6564,7 @@ var ChatInterface = React73.forwardRef(
       const prevNodes = prevArtifactNodesRef.current;
       const hasNewOrChangedNode = nodes.length !== prevNodes.length || nodes.some((n, i) => n.id !== prevNodes[i]?.id);
       if (!isPanelControlled && hasNewOrChangedNode && nodes.length > 0 && !dismissedToolsRef.current.has("artifacts")) {
-        setInternalTools((prev) => ({ ...prev, top: "artifacts" }));
+        setInternalTools((prev) => ({ ...prev, "top-right": "artifacts" }));
       }
       const hasNewOrUpdatedTask = (curr, prev) => {
         return curr.some((c) => {
@@ -6546,7 +6576,7 @@ var ChatInterface = React73.forwardRef(
         });
       };
       if (hasNewOrUpdatedTask(tasks, prevTasksRef.current) && !dismissedToolsRef.current.has("todos")) {
-        setInternalTools((prev) => ({ ...prev, bottom: "todos" }));
+        setInternalTools((prev) => ({ ...prev, "bottom-right": "todos" }));
       }
       prevArtifactNodesRef.current = nodes;
       prevTasksRef.current = tasks;
@@ -6599,24 +6629,35 @@ var ChatInterface = React73.forwardRef(
       setSidebarCollapsed((prev) => !prev);
     }, []);
     const isEmpty = effectiveMessages.length === 0;
-    const allSettled = tasks.length === 0 || areAllTasksSettled(tasks);
-    const toolDefinitions = useMemo4(() => [
-      {
-        id: "artifacts",
-        icon: /* @__PURE__ */ React73.createElement(MediaIcon, null),
-        label: "Artifacts",
-        group: "top"
-      },
-      {
-        id: "todos",
-        icon: allSettled ? /* @__PURE__ */ React73.createElement(CheckSquareIcon, null) : /* @__PURE__ */ React73.createElement(SquareLoaderIcon, null),
-        label: "Tasks",
-        group: "bottom"
-      }
-    ], [allSettled]);
+    const leftToolDefs = useMemo4(
+      () => allToolDefinitions.filter((t) => t.group === "top-left" || t.group === "bottom-left"),
+      [allToolDefinitions]
+    );
+    const rightToolDefs = useMemo4(
+      () => allToolDefinitions.filter((t) => t.group === "top-right" || t.group === "bottom-right"),
+      [allToolDefinitions]
+    );
+    const hasLeftTools = leftToolDefs.length > 0;
+    const hasRightTools = rightToolDefs.length > 0;
     const renderToolContent = (toolId) => {
       if (!toolId) return null;
       switch (toolId) {
+        case "history":
+          return /* @__PURE__ */ React73.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ React73.createElement("div", { className: "flex items-center p-4 border-b border-ash/40 shrink-0" }, /* @__PURE__ */ React73.createElement("h3", { className: "text-xs font-medium text-white" }, "History")), /* @__PURE__ */ React73.createElement("div", { className: "flex-1 overflow-y-auto py-2" }, conversations.length === 0 ? /* @__PURE__ */ React73.createElement("p", { className: "px-4 py-2 text-xs text-silver/60" }, "No conversations yet") : /* @__PURE__ */ React73.createElement("div", { className: "space-y-1 px-2" }, conversations.map((conversation) => /* @__PURE__ */ React73.createElement(
+            "button",
+            {
+              key: conversation.id,
+              onClick: () => onSelectConversation?.(conversation.id),
+              className: cx(
+                "w-full px-3 py-2 text-left",
+                "transition-colors duration-150",
+                conversation.isActive ? "bg-ash/40 text-white" : "text-silver hover:bg-ash/20 hover:text-white"
+              )
+            },
+            /* @__PURE__ */ React73.createElement("p", { className: "text-sm font-medium truncate" }, conversation.title),
+            conversation.preview && /* @__PURE__ */ React73.createElement("p", { className: "text-xs text-silver/60 truncate mt-0.5" }, conversation.preview),
+            conversation.timestamp && /* @__PURE__ */ React73.createElement("p", { className: "text-xs text-silver/40 mt-1" }, conversation.timestamp)
+          )))));
         case "artifacts":
           return /* @__PURE__ */ React73.createElement(
             ArtifactsPanel,
@@ -6627,8 +6668,10 @@ var ChatInterface = React73.forwardRef(
           );
         case "todos":
           return tasks.length > 0 ? /* @__PURE__ */ React73.createElement(TodosList, { tasks, title: tasksTitle, className: "h-full" }) : /* @__PURE__ */ React73.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ React73.createElement("div", { className: "flex items-center p-4 border-b border-ash/40 shrink-0" }, /* @__PURE__ */ React73.createElement("h3", { className: "text-xs font-medium text-white" }, "Tasks")), /* @__PURE__ */ React73.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ React73.createElement("p", { className: "text-xs text-silver/60" }, "No tasks")));
-        default:
-          return null;
+        default: {
+          const externalTool = externalTools.find((t) => t.id === toolId);
+          return externalTool?.content ?? null;
+        }
       }
     };
     return /* @__PURE__ */ React73.createElement(
@@ -6650,6 +6693,25 @@ var ChatInterface = React73.forwardRef(
           onResizeStart: startResizingSidebar
         }
       ),
+      hasLeftTools && /* @__PURE__ */ React73.createElement(
+        ToolSidebar,
+        {
+          tools: leftToolDefs,
+          activeTools,
+          onToggleTool: toggleTool,
+          side: "left"
+        }
+      ),
+      isLeftPanelOpen && /* @__PURE__ */ React73.createElement(
+        ToolPanelContainer,
+        {
+          topContent: renderToolContent(activeTools["top-left"]),
+          bottomContent: renderToolContent(activeTools["bottom-left"]),
+          width: leftToolsWidth,
+          onResizeStart: startResizingLeftTools,
+          side: "left"
+        }
+      ),
       /* @__PURE__ */ React73.createElement("div", { className: "flex-1 flex flex-col min-w-0 relative" }, /* @__PURE__ */ React73.createElement("div", { className: cx(
         "flex-1 flex flex-col min-h-0 relative",
         isEmpty ? "justify-center" : "justify-start"
@@ -6689,31 +6751,29 @@ var ChatInterface = React73.forwardRef(
         "transition-all duration-500 ease-in-out",
         isEmpty ? "flex-1" : "flex-zero"
       ) }))),
-      isAnyToolOpen && /* @__PURE__ */ React73.createElement(
+      isRightPanelOpen && /* @__PURE__ */ React73.createElement(
         ToolPanelContainer,
         {
-          topContent: renderToolContent(activeTools.top),
-          bottomContent: renderToolContent(activeTools.bottom),
-          width: toolsWidth,
-          onResizeStart: startResizingTools
+          topContent: renderToolContent(activeTools["top-right"]),
+          bottomContent: renderToolContent(activeTools["bottom-right"]),
+          width: rightToolsWidth,
+          onResizeStart: startResizingRightTools,
+          side: "right"
         }
       ),
-      /* @__PURE__ */ React73.createElement(
+      hasRightTools && /* @__PURE__ */ React73.createElement(
         ToolSidebar,
         {
-          tools: toolDefinitions,
+          tools: rightToolDefs,
           activeTools,
-          onToggleTool: toggleTool
+          onToggleTool: toggleTool,
+          side: "right"
         }
       )
     );
   }
 );
 ChatInterface.displayName = "ChatInterface";
-var TOOL_DEFINITIONS = [
-  { id: "artifacts", icon: null, label: "Artifacts", group: "top" },
-  { id: "todos", icon: null, label: "Tasks", group: "bottom" }
-];
 
 // src/components/chat/MessageActions.tsx
 import React74, { useCallback as useCallback19, useState as useState20 } from "react";