@tangle-network/sandbox-ui 0.3.5 → 0.3.7

package/dist/{chat-container-C8eHLw8z.d.ts → chat-container-B34uj-J1.d.ts}

@@ -3,6 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { S as SessionMessage, a as SessionPart } from './parts-CyGkM6Fp.js';
 import { A as AgentBranding } from './branding-DCi5VEik.js';
 import { C as CustomToolRenderer } from './tool-display-Ct9nFAzJ.js';
+import { OpenUIAction } from './openui.js';
 
 /**
  * ChatInput — message input bar with file attach, send/cancel, model selector.
@@ -57,11 +58,15 @@ interface ChatContainerProps {
     onRemoveFile?: (id: string) => void;
     onAttach?: (files: FileList) => void;
     disabled?: boolean;
+    /** Callback when an OpenUI action button is pressed within inline OpenUI blocks. */
+    onOpenUIAction?: (action: OpenUIAction) => void;
+    /** Enable rendering OpenUI schemas inline in the chat timeline. Defaults to true. */
+    enableOpenUI?: boolean;
 }
 /**
  * Full chat container: message list + auto-scroll + input area.
  * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
  */
-declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, onSend, onCancel, branding, placeholder, className, hideInput, renderToolDetail, presentation, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, disabled, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
+declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, onSend, onCancel, branding, placeholder, className, hideInput, renderToolDetail, presentation, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, disabled, onOpenUIAction, enableOpenUI, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
 
 export { ChatContainer as C, type PendingFile as P, ChatInput as a, type ChatInputProps as b, type ChatContainerProps as c };

package/dist/chat.d.ts

@@ -1,4 +1,4 @@
-export { C as ChatContainer, c as ChatContainerProps, a as ChatInput, b as ChatInputProps, P as PendingFile } from './chat-container-C8eHLw8z.js';
+export { C as ChatContainer, c as ChatContainerProps, a as ChatInput, b as ChatInputProps, P as PendingFile } from './chat-container-B34uj-J1.js';
 import * as React from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -7,6 +7,7 @@ import { a as SessionPart, S as SessionMessage } from './parts-CyGkM6Fp.js';
 import { A as AgentBranding } from './branding-DCi5VEik.js';
 import { C as CustomToolRenderer } from './tool-display-Ct9nFAzJ.js';
 import { T as ToolCallData } from './tool-call-feed-D5Ume-Pt.js';
+import './openui.js';
 
 type MessageRole = "user" | "assistant" | "system";
 interface ChatMessageProps {

package/dist/chat.js

@@ -6,13 +6,17 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-4F2GJRGU.js";
+} from "./chunk-PXRPYAMM.js";
 import "./chunk-CNWVHQFY.js";
 import "./chunk-WUR652Y3.js";
 import "./chunk-HRMUF35V.js";
 import "./chunk-CJ2RYVZH.js";
 import "./chunk-BX6AQMUS.js";
+import "./chunk-YDBXQQLC.js";
+import "./chunk-TQN3VR4F.js";
 import "./chunk-LTFK464G.js";
+import "./chunk-MXCSSOGH.js";
+import "./chunk-HWLX5NME.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AgentTimeline,

package/dist/{chunk-TXI4MZAZ.js → chunk-CSIXZEKN.js}

@@ -530,6 +530,155 @@ var TerminalInput = React6.forwardRef(
 );
 TerminalInput.displayName = "TerminalInput";
 
+// src/primitives/drop-zone.tsx
+import { useCallback as useCallback2, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function DropZone({
+  onDrop,
+  accept,
+  disabled,
+  overlay,
+  title = "Drop files to upload",
+  description = "Your files will be securely stored in the workspace.",
+  icon = "cloud_upload",
+  children,
+  className
+}) {
+  const [dragOver, setDragOver] = useState3(false);
+  const counter = useRef2(0);
+  const isAccepted = useCallback2(
+    (file) => {
+      if (!accept) return true;
+      const extensions = accept.split(",").map((ext) => ext.trim().toLowerCase());
+      const fileName = file.name.toLowerCase();
+      return extensions.some((ext) => fileName.endsWith(ext));
+    },
+    [accept]
+  );
+  const handleDragEnter = useCallback2(
+    (e) => {
+      e.preventDefault();
+      if (disabled) return;
+      counter.current++;
+      if (e.dataTransfer?.types.includes("Files")) setDragOver(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback2((e) => {
+    e.preventDefault();
+    counter.current--;
+    if (counter.current === 0) setDragOver(false);
+  }, []);
+  const handleDragOver = useCallback2(
+    (e) => {
+      e.preventDefault();
+      if (!disabled) e.dataTransfer.dropEffect = "copy";
+    },
+    [disabled]
+  );
+  const handleDrop = useCallback2(
+    (e) => {
+      e.preventDefault();
+      counter.current = 0;
+      setDragOver(false);
+      if (disabled) return;
+      const allFiles = Array.from(e.dataTransfer?.files || []);
+      const accepted = accept ? allFiles.filter(isAccepted) : allFiles;
+      if (accepted.length > 0) onDrop(accepted);
+    },
+    [disabled, accept, isAccepted, onDrop]
+  );
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      className: cn("relative", className),
+      children: [
+        dragOver && (overlay || /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none bg-black/20 backdrop-blur-sm", children: /* @__PURE__ */ jsxs5("div", { className: "rounded-3xl border-2 border-dashed border-[hsl(var(--ring))] bg-[hsl(var(--card))] p-16 text-center shadow-2xl max-w-lg mx-auto", children: [
+          /* @__PURE__ */ jsx7("div", { className: "mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-[hsl(var(--primary))]/10", children: typeof icon === "string" ? /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-5xl text-[hsl(var(--primary))]", children: icon }) : icon }),
+          /* @__PURE__ */ jsx7("h2", { className: "text-2xl font-extrabold text-[hsl(var(--foreground))]", children: title }),
+          /* @__PURE__ */ jsx7("p", { className: "mt-2 text-[hsl(var(--muted-foreground))]", children: description })
+        ] }) })),
+        children
+      ]
+    }
+  );
+}
+
+// src/primitives/upload-progress.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+function UploadProgress({ files, onRemove, onRetry, className }) {
+  if (files.length === 0) return null;
+  return /* @__PURE__ */ jsx8("div", { className: cn("space-y-2", className), children: files.map((file) => /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 rounded-lg border px-3 py-2 text-sm",
+        file.status === "error" ? "border-[hsl(var(--destructive))]/20 bg-[hsl(var(--destructive))]/5" : file.status === "complete" ? "border-[hsl(var(--success))]/20 bg-[hsl(var(--success))]/5" : "border-[hsl(var(--border))] bg-[hsl(var(--card))]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx8(
+          "span",
+          {
+            className: cn(
+              "material-symbols-outlined text-base shrink-0",
+              file.status === "complete" && "text-[hsl(var(--success))]",
+              file.status === "error" && "text-[hsl(var(--destructive))]",
+              file.status === "uploading" && "text-[hsl(var(--primary))] animate-pulse",
+              file.status === "pending" && "text-[hsl(var(--muted-foreground))]"
+            ),
+            style: file.status === "complete" ? { fontVariationSettings: "'FILL' 1" } : void 0,
+            children: file.status === "complete" ? "check_circle" : file.status === "error" ? "error" : file.status === "uploading" ? "progress_activity" : "description"
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx8("span", { className: "truncate font-medium text-[hsl(var(--foreground))]", children: file.name }),
+            /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-xs text-[hsl(var(--muted-foreground))]", children: formatSize(file.size) })
+          ] }),
+          file.status === "uploading" && file.progress !== void 0 && /* @__PURE__ */ jsx8("div", { className: "mt-1 h-1 w-full rounded-full bg-[hsl(var(--muted))] overflow-hidden", children: /* @__PURE__ */ jsx8(
+            "div",
+            {
+              className: "h-full rounded-full bg-[hsl(var(--primary))] transition-all",
+              style: { width: `${file.progress}%` }
+            }
+          ) }),
+          file.status === "error" && file.error && /* @__PURE__ */ jsx8("p", { className: "mt-0.5 text-xs text-[hsl(var(--destructive))]", children: file.error })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 shrink-0", children: [
+          file.status === "error" && onRetry && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRetry(file.id),
+              className: "rounded p-1 text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))] transition-colors",
+              children: /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-sm", children: "refresh" })
+            }
+          ),
+          onRemove && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemove(file.id),
+              className: "rounded p-1 text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))] transition-colors",
+              children: /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-sm", children: "close" })
+            }
+          )
+        ] })
+      ]
+    },
+    file.id
+  )) });
+}
+
 export {
   Select,
   SelectGroup,
@@ -550,5 +699,7 @@ export {
   TerminalDisplay,
   TerminalLine,
   TerminalCursor,
-  TerminalInput
+  TerminalInput,
+  DropZone,
+  UploadProgress
 };