gigaclaw 1.4.0

package/lib/chat/components/ui/dropdown-menu.js

@@ -0,0 +1,194 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, useRef } from "react";
+import { cn } from "../../utils.js";
+const DropdownContext = createContext({ open: false, onOpenChange: () => {
+} });
+function DropdownMenu({ children, open: controlledOpen, onOpenChange: controlledOnOpenChange }) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+  const onOpenChange = controlledOnOpenChange || setInternalOpen;
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: { open, onOpenChange }, children: /* @__PURE__ */ jsx("div", { className: "relative inline-block", children }) });
+}
+function DropdownMenuTrigger({ children, asChild, ...props }) {
+  const { open, onOpenChange } = useContext(DropdownContext);
+  const handleClick = (e) => {
+    e.stopPropagation();
+    onOpenChange(!open);
+  };
+  const child = Array.isArray(children) ? children[0] : children;
+  const childIsInteractive = child && typeof child === "object" && "type" in child && (child.type === "button" || child.type === "a");
+  if ((asChild || childIsInteractive) && child && typeof child === "object" && "props" in child) {
+    return /* @__PURE__ */ jsx(
+      child.type,
+      {
+        ...child.props,
+        onClick: (e) => {
+          child.props.onClick?.(e);
+          handleClick(e);
+        },
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") handleClick(e);
+      },
+      "aria-expanded": open,
+      "data-state": open ? "open" : "closed",
+      ...props,
+      children
+    }
+  );
+}
+function DropdownMenuContent({ children, className, align = "start", side = "bottom", sideOffset = 4, ...props }) {
+  const { open, onOpenChange } = useContext(DropdownContext);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onOpenChange(false);
+      }
+    };
+    const handleEsc = (e) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    setTimeout(() => document.addEventListener("click", handleClickOutside), 0);
+    document.addEventListener("keydown", handleEsc);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleEsc);
+    };
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background/80 backdrop-blur-sm p-1 text-foreground shadow-lg",
+        side === "bottom" && `top-full mt-1`,
+        side === "top" && `bottom-full mb-1`,
+        align === "end" && "right-0",
+        align === "start" && "left-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function DropdownMenuItem({ children, className, onClick, asChild, ...props }) {
+  const { onOpenChange } = useContext(DropdownContext);
+  const handleClick = (e) => {
+    onClick?.(e);
+    onOpenChange(false);
+  };
+  if (asChild && children) {
+    const child = Array.isArray(children) ? children[0] : children;
+    if (child && typeof child === "object" && "props" in child) {
+      return /* @__PURE__ */ jsx(
+        child.type,
+        {
+          ...child.props,
+          className: cn(
+            "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-background focus:bg-background",
+            child.props.className,
+            className
+          ),
+          onClick: (e) => {
+            child.props.onClick?.(e);
+            handleClick(e);
+          },
+          role: "menuitem"
+        }
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "menuitem",
+      className: cn(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-background focus:bg-background",
+        className
+      ),
+      onClick: handleClick,
+      ...props,
+      children
+    }
+  );
+}
+function DropdownMenuSeparator({ className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("-mx-1 my-1 h-px bg-border", className) });
+}
+function DropdownMenuLabel({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-2 py-1.5 text-sm font-semibold", className), children });
+}
+function DropdownMenuGroup({ children }) {
+  return /* @__PURE__ */ jsx("div", { children });
+}
+const SubContext = createContext({ open: false, setOpen: () => {
+} });
+function DropdownMenuSub({ children }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsx(SubContext.Provider, { value: { open, setOpen }, children: /* @__PURE__ */ jsx("div", { className: "relative", children }) });
+}
+function DropdownMenuSubTrigger({ children, className }) {
+  const { open, setOpen } = useContext(SubContext);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "menuitem",
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-background focus:bg-background justify-between",
+        className
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        setOpen((v) => !v);
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children }),
+        /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({ children, className }) {
+  const { open } = useContext(SubContext);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "menu",
+      className: cn(
+        "absolute left-full top-0 z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background/80 backdrop-blur-sm p-1 text-foreground shadow-lg ml-1",
+        className
+      ),
+      children
+    }
+  );
+}
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+};

package/lib/chat/components/ui/dropdown-menu.jsx

@@ -0,0 +1,215 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect, useRef } from 'react';
+import { cn } from '../../utils.js';
+
+const DropdownContext = createContext({ open: false, onOpenChange: () => {} });
+
+export function DropdownMenu({ children, open: controlledOpen, onOpenChange: controlledOnOpenChange }) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const onOpenChange = controlledOnOpenChange || setInternalOpen;
+
+  return (
+    <DropdownContext.Provider value={{ open, onOpenChange }}>
+      <div className="relative inline-block">{children}</div>
+    </DropdownContext.Provider>
+  );
+}
+
+export function DropdownMenuTrigger({ children, asChild, ...props }) {
+  const { open, onOpenChange } = useContext(DropdownContext);
+  const handleClick = (e) => {
+    e.stopPropagation();
+    onOpenChange(!open);
+  };
+
+  // Slot pattern: when asChild=true (or when the child is already a button/a),
+  // clone the child and merge in our handler instead of wrapping in another element.
+  // This prevents <button><button> nesting which causes React hydration errors.
+  const child = Array.isArray(children) ? children[0] : children;
+  const childIsInteractive =
+    child && typeof child === 'object' && 'type' in child &&
+    (child.type === 'button' || child.type === 'a');
+
+  if ((asChild || childIsInteractive) && child && typeof child === 'object' && 'props' in child) {
+    return (
+      <child.type
+        {...child.props}
+        onClick={(e) => {
+          child.props.onClick?.(e);
+          handleClick(e);
+        }}
+        aria-expanded={open}
+        data-state={open ? 'open' : 'closed'}
+      />
+    );
+  }
+
+  // Default: render a semantically neutral <span> (not <button>) so callers
+  // that pass <button> children never produce invalid <button><button> nesting.
+  return (
+    <span
+      role="button"
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClick(e); }}
+      aria-expanded={open}
+      data-state={open ? 'open' : 'closed'}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function DropdownMenuContent({ children, className, align = 'start', side = 'bottom', sideOffset = 4, ...props }) {
+  const { open, onOpenChange } = useContext(DropdownContext);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onOpenChange(false);
+      }
+    };
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') onOpenChange(false);
+    };
+    setTimeout(() => document.addEventListener('click', handleClickOutside), 0);
+    document.addEventListener('keydown', handleEsc);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener('keydown', handleEsc);
+    };
+  }, [open, onOpenChange]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'absolute z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background/80 backdrop-blur-sm p-1 text-foreground shadow-lg',
+        side === 'bottom' && `top-full mt-1`,
+        side === 'top' && `bottom-full mb-1`,
+        align === 'end' && 'right-0',
+        align === 'start' && 'left-0',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DropdownMenuItem({ children, className, onClick, asChild, ...props }) {
+  const { onOpenChange } = useContext(DropdownContext);
+  const handleClick = (e) => {
+    onClick?.(e);
+    onOpenChange(false);
+  };
+
+  // When asChild=true, clone the single child element and merge in our
+  // click handler + className instead of wrapping in a <div>.
+  // This prevents React from seeing `asChild` as an unknown DOM attribute.
+  if (asChild && children) {
+    const child = Array.isArray(children) ? children[0] : children;
+    if (child && typeof child === 'object' && 'props' in child) {
+      return (
+        <child.type
+          {...child.props}
+          className={cn(
+            'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-background focus:bg-background',
+            child.props.className,
+            className
+          )}
+          onClick={(e) => {
+            child.props.onClick?.(e);
+            handleClick(e);
+          }}
+          role="menuitem"
+        />
+      );
+    }
+  }
+
+  return (
+    <div
+      role="menuitem"
+      className={cn(
+        'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-background focus:bg-background',
+        className
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DropdownMenuSeparator({ className }) {
+  return <div className={cn('-mx-1 my-1 h-px bg-border', className)} />;
+}
+
+export function DropdownMenuLabel({ children, className }) {
+  return (
+    <div className={cn('px-2 py-1.5 text-sm font-semibold', className)}>
+      {children}
+    </div>
+  );
+}
+
+export function DropdownMenuGroup({ children }) {
+  return <div>{children}</div>;
+}
+
+// ─── Submenu ─────────────────────────────────────────────────────────────────
+const SubContext = createContext({ open: false, setOpen: () => {} });
+
+export function DropdownMenuSub({ children }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <SubContext.Provider value={{ open, setOpen }}>
+      <div className="relative">{children}</div>
+    </SubContext.Provider>
+  );
+}
+
+export function DropdownMenuSubTrigger({ children, className }) {
+  const { open, setOpen } = useContext(SubContext);
+  return (
+    <div
+      role="menuitem"
+      aria-haspopup="menu"
+      aria-expanded={open}
+      className={cn(
+        'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-background focus:bg-background justify-between',
+        className
+      )}
+      onClick={(e) => { e.stopPropagation(); setOpen((v) => !v); }}
+    >
+      <span className="flex items-center gap-2">{children}</span>
+      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
+    </div>
+  );
+}
+
+export function DropdownMenuSubContent({ children, className }) {
+  const { open } = useContext(SubContext);
+  if (!open) return null;
+  return (
+    <div
+      role="menu"
+      className={cn(
+        'absolute left-full top-0 z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background/80 backdrop-blur-sm p-1 text-foreground shadow-lg ml-1',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/lib/chat/components/ui/rename-dialog.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+function RenameDialog({ open, onSave, onCancel, title = "Rename chat", currentValue = "" }) {
+  const [value, setValue] = useState(currentValue);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (open) {
+      setValue(currentValue);
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+          inputRef.current.select();
+        }
+      }, 0);
+    }
+  }, [open, currentValue]);
+  useEffect(() => {
+    if (!open) return;
+    const handleEsc = (e) => {
+      if (e.key === "Escape") onCancel();
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [open, onCancel]);
+  const handleSave = () => {
+    const trimmed = value.trim();
+    if (trimmed && trimmed !== currentValue) {
+      onSave(trimmed);
+    }
+    onCancel();
+  };
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/50", onClick: onCancel }),
+      /* @__PURE__ */ jsxs("div", { className: "relative z-50 w-full max-w-sm rounded-lg border border-border bg-background p-6 shadow-lg", onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value,
+            onChange: (e) => setValue(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handleSave();
+            },
+            className: "mt-3 w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onCancel,
+              className: "rounded-md px-3 py-1.5 text-sm font-medium border border-input bg-background hover:bg-muted",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleSave,
+              className: "rounded-md px-3 py-1.5 text-sm font-medium text-white bg-foreground hover:bg-foreground/90",
+              children: "Save"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    document.body
+  );
+}
+export {
+  RenameDialog
+};

package/lib/chat/components/ui/rename-dialog.jsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+export function RenameDialog({ open, onSave, onCancel, title = 'Rename chat', currentValue = '' }) {
+  const [value, setValue] = useState(currentValue);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (open) {
+      setValue(currentValue);
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+          inputRef.current.select();
+        }
+      }, 0);
+    }
+  }, [open, currentValue]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') onCancel();
+    };
+    document.addEventListener('keydown', handleEsc);
+    return () => document.removeEventListener('keydown', handleEsc);
+  }, [open, onCancel]);
+
+  const handleSave = () => {
+    const trimmed = value.trim();
+    if (trimmed && trimmed !== currentValue) {
+      onSave(trimmed);
+    }
+    onCancel();
+  };
+
+  if (!open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/50" onClick={onCancel} />
+      <div className="relative z-50 w-full max-w-sm rounded-lg border border-border bg-background p-6 shadow-lg" onClick={(e) => e.stopPropagation()}>
+        <h3 className="text-lg font-semibold">{title}</h3>
+        <input
+          ref={inputRef}
+          type="text"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') handleSave();
+          }}
+          className="mt-3 w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+        />
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            onClick={onCancel}
+            className="rounded-md px-3 py-1.5 text-sm font-medium border border-input bg-background hover:bg-muted"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            className="rounded-md px-3 py-1.5 text-sm font-medium text-white bg-foreground hover:bg-foreground/90"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}

package/lib/chat/components/ui/scroll-area.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function ScrollArea({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-y-auto scrollbar-thin", children }) });
+}
+function ScrollBar() {
+  return null;
+}
+export {
+  ScrollArea,
+  ScrollBar
+};

package/lib/chat/components/ui/scroll-area.jsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { cn } from '../../utils.js';
+
+export function ScrollArea({ children, className, ...props }) {
+  return (
+    <div className={cn('relative overflow-hidden', className)} {...props}>
+      <div className="h-full w-full overflow-y-auto scrollbar-thin">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function ScrollBar() {
+  return null;
+}

package/lib/chat/components/ui/separator.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function Separator({ className, orientation = "horizontal", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Separator
+};

package/lib/chat/components/ui/separator.jsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { cn } from '../../utils.js';
+
+export function Separator({ className, orientation = 'horizontal', ...props }) {
+  return (
+    <div
+      role="separator"
+      aria-orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}