@invana/ui 0.0.13 → 0.0.15

package/dist/index.cjs

@@ -1665,19 +1665,7 @@ var Progress = React23__namespace.forwardRef(({ className, value, ...props }, re
   }
 ));
 Progress.displayName = ProgressPrimitive__namespace.Root.displayName;
-var ResizablePanelGroup = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  reactResizablePanels.Group,
-  {
-    className: cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    ),
-    ...props
-  }
-);
+var ResizablePanelGroup = (props) => /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Group, { ...props });
 var ResizablePanel = reactResizablePanels.Panel;
 var ResizableHandle = ({
   withHandle,
@@ -1687,16 +1675,18 @@ var ResizableHandle = ({
   reactResizablePanels.Separator,
   {
     className: cn(
-      "relative flex items-center justify-center transition-colors",
-      "data-[panel-group-direction=vertical]:h-2 data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:cursor-row-resize",
-      "data-[panel-group-direction=horizontal]:w-2 data-[panel-group-direction=horizontal]:h-full data-[panel-group-direction=horizontal]:cursor-col-resize",
-      "hover:bg-ring/30 focus:bg-ring/30",
-      "focus-visible:outline-none       focus-visible:ring-ring       focus-visible:ring-offset-3",
-      "[&[data-panel-group-direction=vertical]>div]:rotate-90",
+      // A themed gap between panels. The separator has no intrinsic size, so give
+      // it an explicit one on the main axis or it collapses to 0.
+      "relative flex items-center justify-center bg-background transition-colors",
+      "aria-[orientation=vertical]:w-1 aria-[orientation=vertical]:cursor-col-resize",
+      "aria-[orientation=horizontal]:h-1 aria-[orientation=horizontal]:cursor-row-resize",
+      "data-[separator=hover]:bg-accent data-[separator=active]:bg-accent",
+      "[&[aria-orientation=horizontal]>div]:rotate-90",
       className
     ),
     ...props,
-    children: withHandle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10 flex h-3 w-4 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripHorizontal, {}) })
+    children: withHandle && // A subtle pill grip centered in the gutter; rotate handles orientation.
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10 h-6 w-[3px] rounded-full bg-muted-foreground/40" })
   }
 );
 var ScrollArea = React23__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2665,87 +2655,125 @@ function ButtonWithTooltip(props) {
     /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: props.tooltip })
   ] }) });
 }
-var ErrorBoundary = class extends React23.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError(_) {
-    return { hasError: true };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("ErrorBoundary caught an error", error, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-full w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Frown, { className: "mr-1 h-4" }),
-        "Oops ! something went wrong."
-      ] }) });
-    }
-    return this.props.children;
-  }
-};
-var MenuItem = ({
-  label,
-  icon: Icon,
-  shortcut,
+function ChatSession({
   children,
+  footer,
+  emptyState,
+  autoScrollKey,
+  followThreshold = 80,
   className,
-  level = 0,
-  href,
-  onClick
-}) => {
-  const hasChildren = children && children.length > 0;
-  const ButtonOrLink = href ? "a" : "button";
-  const clickTrigger = href ? { href } : { onClick };
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative group/item", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      ButtonOrLink,
+  bodyClassName
+}) {
+  const rootRef = React23__namespace.useRef(null);
+  const contentRef = React23__namespace.useRef(null);
+  const pinnedRef = React23__namespace.useRef(true);
+  const getViewport = React23__namespace.useCallback(
+    () => rootRef.current?.querySelector(
+      "[data-radix-scroll-area-viewport]"
+    ) ?? null,
+    []
+  );
+  const scrollToBottom = React23__namespace.useCallback(() => {
+    const viewport = getViewport();
+    if (viewport) viewport.scrollTop = viewport.scrollHeight;
+  }, [getViewport]);
+  React23__namespace.useEffect(() => {
+    const viewport = getViewport();
+    if (!viewport) return;
+    const handleScroll = () => {
+      const distance = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+      pinnedRef.current = distance <= followThreshold;
+    };
+    viewport.addEventListener("scroll", handleScroll, { passive: true });
+    return () => viewport.removeEventListener("scroll", handleScroll);
+  }, [getViewport, followThreshold]);
+  React23__namespace.useEffect(() => {
+    const content = contentRef.current;
+    if (!content || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (pinnedRef.current) scrollToBottom();
+    });
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, [scrollToBottom]);
+  React23__namespace.useEffect(() => {
+    pinnedRef.current = true;
+    scrollToBottom();
+  }, [autoScrollKey, scrollToBottom]);
+  const isEmpty = React23__namespace.Children.count(children) === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full min-h-0", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { ref: rootRef, className: "flex-1 min-h-0", children: isEmpty && emptyState ? emptyState : /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        ...clickTrigger,
-        className: cn(
-          "flex w-full items-center justify-between  px-4 py-2 ",
-          "hover:bg-accent hover:text-accent-foreground",
-          "focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:outline-none",
-          className,
-          level === 0 ? "font-medium" : "font-normal"
-          // "group-hover/item:bg-accent/50"
-        ),
-        role: hasChildren ? "menuitem" : void 0,
-        "aria-haspopup": hasChildren ? "true" : void 0,
-        "aria-expanded": hasChildren ? "true" : void 0,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
-            Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
-            shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100", children: shortcut }),
-            hasChildren && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
-          ] })
-        ]
+        ref: contentRef,
+        className: cn("flex flex-col gap-4 p-3", bodyClassName),
+        children
       }
-    ),
-    hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
-      "ul",
+    ) }),
+    footer
+  ] });
+}
+function RunningDots() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-0.5", "aria-label": "Running", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1 h-1 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1 h-1 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1 h-1 rounded-full bg-current animate-bounce" })
+  ] });
+}
+function ChatSessionMessage({
+  role,
+  children,
+  status = "idle",
+  icon,
+  meta,
+  actions,
+  footer,
+  className
+}) {
+  if (role === "user") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-end", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
         className: cn(
-          "absolute min-w-[240px] border p-1  bg-card text-card-foreground  shadow-md",
-          "invisible opacity-0 translate-x-2",
-          "group-hover/item:visible group-hover/item:opacity-100 group-hover/item:translate-x-0",
-          "transition-all duration-150 ease-in-out",
-          level === 0 ? "left-full top-0" : "left-full top-0"
+          "max-w-[85%] rounded-2xl rounded-br-sm bg-secondary px-3 py-2 text-secondary-foreground whitespace-pre-wrap break-words",
+          icon && "flex items-center gap-1.5"
         ),
-        style: {
-          zIndex: 50 + level
-        },
-        role: "menu",
-        children: children.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { ...item, level: level + 1 }, item.id))
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 opacity-70", children: icon }),
+          icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 break-words", children }) : children
+        ]
       }
-    )
+    ) });
+  }
+  if (status === "running") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 text-muted-foreground", className), children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+      /* @__PURE__ */ jsxRuntime.jsx(RunningDots, {})
+    ] });
+  }
+  if (status === "stopped") {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground italic", className), children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 shrink-0", children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "min-w-0 flex-1 whitespace-pre-wrap break-words",
+            status === "error" ? "text-destructive" : "text-foreground"
+          ),
+          children
+        }
+      )
+    ] }),
+    actions,
+    meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: meta }),
+    footer
   ] });
-};
+}
 var NavItems = ({
   items,
   orientation = "horizontal",
@@ -2757,14 +2785,15 @@ var NavItems = ({
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item) => {
     const isActive = activeItem === item.name;
     const padding = item.label ? "px-3 py-1.5" : "px-2 py-2";
+    const isInteractive = Boolean(item.href || item.onClick);
     const itemClass = `inline-flex border-0 items-center justify-center gap-2
-          whitespace-nowrap rounded-md cursor-pointer transition-colors
+          whitespace-nowrap rounded-md transition-colors
           ring-1 ring-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
           ${padding}
-          hover:bg-primary/10 hover:text-primary hover:ring-primary/25
+          ${isInteractive ? "cursor-pointer hover:bg-primary/10 hover:text-primary hover:ring-primary/25" : ""}
           ${isActive ? `bg-primary/15 text-primary ring-primary/25 ${item.activeClass || ""}` : ""}
           ${item.className || ""}`;
-    const icon = /* @__PURE__ */ jsxRuntime.jsx(
+    const icon = item.icon && /* @__PURE__ */ jsxRuntime.jsx(
       item.icon,
       {
         strokeWidth: item.iconStroke || 2,
@@ -2867,6 +2896,189 @@ var NavHorizontal = ({
     }
   );
 };
+function ChatSessionMessageOptions({
+  actions,
+  className
+}) {
+  const start = actions.filter((a) => (a.align ?? "start") === "start");
+  const end = actions.filter((a) => a.align === "end");
+  const renderAction = (action, i) => /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: cn(
+          "h-6 w-7 text-muted-foreground",
+          action.active && (action.activeClassName ?? "text-foreground"),
+          action.className
+        ),
+        onClick: action.onClick,
+        disabled: action.disabled,
+        "aria-label": action.label,
+        children: action.icon
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: action.label })
+  ] }, `${action.label}-${i}`);
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.jsx(
+    NavHorizontal,
+    {
+      className: cn("text-muted-foreground", className),
+      left: start.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: start.map(renderAction) }) : void 0,
+      right: end.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: end.map(renderAction) }) : void 0
+    }
+  ) });
+}
+function ChatSessionComposer({
+  value,
+  onChange,
+  onSend,
+  onStop,
+  isRunning = false,
+  disabled = false,
+  placeholder = "Ask anything\u2026",
+  toolbarStart,
+  toolbarEnd,
+  attachments,
+  sendIcon,
+  stopIcon,
+  sendDisabled,
+  className,
+  textareaClassName
+}) {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      if (!isRunning && !disabled) onSend();
+    }
+  };
+  const isSendDisabled = sendDisabled ?? (disabled || value.trim().length === 0);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-3", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border bg-card shadow-sm overflow-hidden focus-within:border-ring transition-colors", children: [
+    attachments && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 border-b border-border max-h-24 overflow-y-auto flex items-start gap-1 flex-wrap", children: attachments }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        disabled,
+        placeholder,
+        className: cn(
+          "block w-full min-h-16 h-24 max-h-64 bg-transparent p-2 text-foreground outline-none resize-y placeholder:text-muted-foreground",
+          textareaClassName
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-1.5 border-t border-border flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 flex items-center gap-1.5", children: toolbarStart }),
+      toolbarEnd,
+      isRunning ? /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "icon",
+          className: "h-7 w-7 shrink-0 rounded-full",
+          onClick: onStop,
+          title: "Stop",
+          "aria-label": "Stop",
+          children: stopIcon
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "icon",
+          className: "h-7 w-7 shrink-0 rounded-full",
+          onClick: onSend,
+          disabled: isSendDisabled,
+          title: "Send",
+          "aria-label": "Send",
+          children: sendIcon
+        }
+      )
+    ] })
+  ] }) });
+}
+var ErrorBoundary = class extends React23.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(_) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("ErrorBoundary caught an error", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-full w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Frown, { className: "mr-1 h-4" }),
+        "Oops ! something went wrong."
+      ] }) });
+    }
+    return this.props.children;
+  }
+};
+var MenuItem = ({
+  label,
+  icon: Icon,
+  shortcut,
+  children,
+  className,
+  level = 0,
+  href,
+  onClick
+}) => {
+  const hasChildren = children && children.length > 0;
+  const ButtonOrLink = href ? "a" : "button";
+  const clickTrigger = href ? { href } : { onClick };
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative group/item", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ButtonOrLink,
+      {
+        ...clickTrigger,
+        className: cn(
+          "flex w-full items-center justify-between  px-4 py-2 ",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:outline-none",
+          className,
+          level === 0 ? "font-medium" : "font-normal"
+          // "group-hover/item:bg-accent/50"
+        ),
+        role: hasChildren ? "menuitem" : void 0,
+        "aria-haspopup": hasChildren ? "true" : void 0,
+        "aria-expanded": hasChildren ? "true" : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+            Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+            shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100", children: shortcut }),
+            hasChildren && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+          ] })
+        ]
+      }
+    ),
+    hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        className: cn(
+          "absolute min-w-[240px] border p-1  bg-card text-card-foreground  shadow-md",
+          "invisible opacity-0 translate-x-2",
+          "group-hover/item:visible group-hover/item:opacity-100 group-hover/item:translate-x-0",
+          "transition-all duration-150 ease-in-out",
+          level === 0 ? "left-full top-0" : "left-full top-0"
+        ),
+        style: {
+          zIndex: 50 + level
+        },
+        role: "menu",
+        children: children.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { ...item, level: level + 1 }, item.id))
+      }
+    )
+  ] });
+};
 var NavVerticalItems = ({ items }) => /* @__PURE__ */ jsxRuntime.jsx(NavItems, { items, orientation: "vertical" });
 var NavVertical = ({
   className = "",
@@ -3088,7 +3300,7 @@ function TabbedPanel({
     }
     onTabChange?.(value);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(Tabs, { value: currentTab, onValueChange: handleTabChange, className: `h-full ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "h-full border rounded-none", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(Tabs, { value: currentTab, onValueChange: handleTabChange, className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("h-full border rounded-none", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: `flex flex-row items-center justify-between py-0 border-b h-[30px] px-0 space-y-0 ${headerClassName || ""}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "h-full bg-transparent p-0 gap-0 rounded-none", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
         TabsTrigger,
@@ -3771,6 +3983,10 @@ exports.CarouselContent = CarouselContent;
 exports.CarouselItem = CarouselItem;
 exports.CarouselNext = CarouselNext;
 exports.CarouselPrevious = CarouselPrevious;
+exports.ChatSession = ChatSession;
+exports.ChatSessionComposer = ChatSessionComposer;
+exports.ChatSessionMessage = ChatSessionMessage;
+exports.ChatSessionMessageOptions = ChatSessionMessageOptions;
 exports.Command = Command;
 exports.CommandDialog = CommandDialog;
 exports.CommandEmpty = CommandEmpty;