@ash-cloud/ash-ui 0.0.1 → 0.0.3

package/dist/index.cjs

@@ -1930,6 +1930,203 @@ function TodoPanel({
     }
   );
 }
+function EnvVarsPanel({
+  envVars,
+  onChange,
+  defaultCollapsed = true,
+  className,
+  label = "Environment Variables",
+  helperText = "These environment variables will be available in the sandbox for new sessions."
+}) {
+  const [expanded, setExpanded] = react.useState(!defaultCollapsed);
+  const [newEnvKey, setNewEnvKey] = react.useState("");
+  const [newEnvValue, setNewEnvValue] = react.useState("");
+  const hasEnvVars = Object.keys(envVars).length > 0;
+  const handleAddEnvVar = react.useCallback(() => {
+    const key = newEnvKey.trim();
+    const val = newEnvValue.trim();
+    if (key) {
+      onChange({ ...envVars, [key]: val });
+      setNewEnvKey("");
+      setNewEnvValue("");
+    }
+  }, [envVars, newEnvKey, newEnvValue, onChange]);
+  const handleRemoveEnvVar = react.useCallback(
+    (key) => {
+      const newEnvVars = { ...envVars };
+      delete newEnvVars[key];
+      onChange(newEnvVars);
+    },
+    [envVars, onChange]
+  );
+  const handleEnvKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleAddEnvVar();
+      }
+    },
+    [handleAddEnvVar]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("ash-env-vars-panel", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(!expanded),
+        className: "ash-env-vars-header",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              className: cn("ash-env-vars-chevron", expanded && "ash-env-vars-chevron-expanded"),
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-label", children: label }),
+          hasEnvVars && !expanded && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-badge", children: Object.keys(envVars).length })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-env-vars-content", children: [
+      Object.entries(envVars).map(([key, val]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-env-vars-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-key", children: key }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-equals", children: "=" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-value", children: val || "(empty)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleRemoveEnvVar(key),
+            className: "ash-env-vars-remove",
+            title: "Remove variable",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "w-4 h-4",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] }, key)),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-env-vars-add", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: newEnvKey,
+            onChange: (e) => setNewEnvKey(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "")),
+            onKeyDown: handleEnvKeyDown,
+            placeholder: "KEY",
+            className: "ash-env-vars-input ash-env-vars-input-key"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-equals", children: "=" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: newEnvValue,
+            onChange: (e) => setNewEnvValue(e.target.value),
+            onKeyDown: handleEnvKeyDown,
+            placeholder: "value",
+            className: "ash-env-vars-input ash-env-vars-input-value"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleAddEnvVar,
+            disabled: !newEnvKey.trim(),
+            className: "ash-env-vars-add-button",
+            children: "Add"
+          }
+        )
+      ] }),
+      helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ash-env-vars-helper", children: helperText })
+    ] })
+  ] });
+}
+function DisplayModeToggle({
+  className,
+  showLabel = true,
+  labels = { inline: "Inline", compact: "Compact" }
+}) {
+  const { config, toggleMode } = useDisplayMode();
+  const isInline = config.mode === "inline";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggleMode,
+      className: cn("ash-display-mode-toggle", className),
+      title: isInline ? "Switch to compact mode" : "Switch to inline mode",
+      children: isInline ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "ash-display-mode-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+              }
+            )
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-display-mode-label", children: labels.inline })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "ash-display-mode-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"
+              }
+            )
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-display-mode-label", children: labels.compact })
+      ] })
+    }
+  );
+}
 var DEFAULT_WORDS = [
   "Thinking",
   "Reasoning",
@@ -2318,6 +2515,225 @@ var inlineStyles = {
     borderRadius: borderRadius.lg
   }
 };
+function useMessageQueue({
+  onProcessMessage,
+  canProcess = true
+}) {
+  const [queue, setQueue] = react.useState([]);
+  const [isProcessing, setIsProcessing] = react.useState(false);
+  const isProcessingRef = react.useRef(false);
+  const onProcessMessageRef = react.useRef(onProcessMessage);
+  react.useEffect(() => {
+    onProcessMessageRef.current = onProcessMessage;
+  }, [onProcessMessage]);
+  const processQueue = react.useCallback(async () => {
+    if (isProcessingRef.current || !canProcess) return;
+    isProcessingRef.current = true;
+    setIsProcessing(true);
+    while (true) {
+      let nextMessage;
+      setQueue((prev) => {
+        if (prev.length === 0) return prev;
+        nextMessage = prev[0];
+        return prev.slice(1);
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      if (!nextMessage) break;
+      try {
+        await onProcessMessageRef.current(nextMessage);
+      } catch (error) {
+        console.error("Error processing queued message:", error);
+      }
+    }
+    isProcessingRef.current = false;
+    setIsProcessing(false);
+  }, [canProcess]);
+  react.useEffect(() => {
+    if (queue.length > 0 && !isProcessingRef.current && canProcess) {
+      processQueue();
+    }
+  }, [queue, processQueue, canProcess]);
+  const enqueue = react.useCallback((text, files) => {
+    const message = {
+      id: `queue-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+      text,
+      files,
+      queuedAt: Date.now()
+    };
+    setQueue((prev) => [...prev, message]);
+  }, []);
+  const cancel = react.useCallback((id) => {
+    setQueue((prev) => prev.filter((m) => m.id !== id));
+  }, []);
+  const clearQueue = react.useCallback(() => {
+    setQueue([]);
+  }, []);
+  return {
+    queue,
+    isProcessing,
+    enqueue,
+    cancel,
+    clearQueue,
+    queueLength: queue.length
+  };
+}
+function useStopExecution({
+  onServerStop
+} = {}) {
+  const [canStop, setCanStop] = react.useState(false);
+  const abortControllerRef = react.useRef(null);
+  const sessionIdRef = react.useRef(null);
+  const onServerStopRef = react.useRef(onServerStop);
+  onServerStopRef.current = onServerStop;
+  const startExecution = react.useCallback(() => {
+    abortControllerRef.current = new AbortController();
+    setCanStop(true);
+  }, []);
+  const endExecution = react.useCallback(() => {
+    abortControllerRef.current = null;
+    sessionIdRef.current = null;
+    setCanStop(false);
+  }, []);
+  const setSessionId = react.useCallback((sessionId) => {
+    sessionIdRef.current = sessionId;
+  }, []);
+  const stop = react.useCallback(async (explicitSessionId) => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    const sessionId = explicitSessionId || sessionIdRef.current;
+    if (sessionId && onServerStopRef.current) {
+      try {
+        await onServerStopRef.current(sessionId);
+      } catch (err) {
+        console.warn("Server stop failed:", err);
+      }
+    }
+    setCanStop(false);
+  }, []);
+  return {
+    canStop,
+    signal: abortControllerRef.current?.signal,
+    startExecution,
+    endExecution,
+    stop,
+    setSessionId
+  };
+}
+function formatFileSize2(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+async function readFileAsBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      const base64 = result.split(",")[1];
+      resolve(base64 || "");
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+function useFileUpload({
+  maxFileSize = 100 * 1024 * 1024,
+  // 100MB
+  maxFiles = 10,
+  onValidationError
+} = {}) {
+  const [files, setFiles] = react.useState([]);
+  const [isDragOver, setIsDragOver] = react.useState(false);
+  const fileInputRef = react.useRef(null);
+  const addFiles = react.useCallback(
+    async (fileList) => {
+      if (!fileList) return;
+      const newFiles = [];
+      const currentCount = files.length;
+      for (let i = 0; i < fileList.length && currentCount + newFiles.length < maxFiles; i++) {
+        const file = fileList.item(i);
+        if (!file) continue;
+        if (file.size > maxFileSize) {
+          onValidationError?.(
+            file.name,
+            `Exceeds maximum size of ${formatFileSize2(maxFileSize)}`
+          );
+          continue;
+        }
+        try {
+          const content = await readFileAsBase64(file);
+          newFiles.push({
+            filename: file.name,
+            content,
+            mimeType: file.type || "application/octet-stream",
+            size: file.size
+          });
+        } catch (error) {
+          console.error(`Failed to read file ${file.name}:`, error);
+          onValidationError?.(file.name, "Failed to read file");
+        }
+      }
+      if (fileList.length > maxFiles - currentCount && currentCount + newFiles.length >= maxFiles) {
+        onValidationError?.("", `Maximum ${maxFiles} files allowed`);
+      }
+      if (newFiles.length > 0) {
+        setFiles((prev) => [...prev, ...newFiles]);
+      }
+    },
+    [files.length, maxFiles, maxFileSize, onValidationError]
+  );
+  const removeFile = react.useCallback((index) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+  const clearFiles = react.useCallback(() => {
+    setFiles([]);
+  }, []);
+  const handleDragOver = react.useCallback((e) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = react.useCallback((e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  }, []);
+  const handleDrop = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      addFiles(e.dataTransfer.files);
+    },
+    [addFiles]
+  );
+  const handleFileInputChange = react.useCallback(
+    (e) => {
+      addFiles(e.target.files);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    [addFiles]
+  );
+  const openFilePicker = react.useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+  return {
+    files,
+    isDragOver,
+    addFiles,
+    removeFile,
+    clearFiles,
+    canAddMore: files.length < maxFiles,
+    dropZoneProps: {
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
+    },
+    handleFileInputChange,
+    fileInputRef,
+    openFilePicker
+  };
+}
 
 exports.ActionIcon = ActionIcon;
 exports.AlertCircleIcon = AlertCircleIcon;
@@ -2340,7 +2756,9 @@ exports.CompactToolStatusLine = CompactToolStatusLine;
 exports.CopyIcon = CopyIcon;
 exports.DEFAULT_DISPLAY_CONFIG = DEFAULT_DISPLAY_CONFIG;
 exports.DisplayModeProvider = DisplayModeProvider;
+exports.DisplayModeToggle = DisplayModeToggle;
 exports.EditIcon = EditIcon;
+exports.EnvVarsPanel = EnvVarsPanel;
 exports.ErrorMessage = ErrorMessage;
 exports.FileIcon = FileIcon;
 exports.FilePlusIcon = FilePlusIcon;
@@ -2423,6 +2841,9 @@ exports.typography = typography;
 exports.updateToolCallWithResult = updateToolCallWithResult;
 exports.useDisplayConfig = useDisplayConfig;
 exports.useDisplayMode = useDisplayMode;
+exports.useFileUpload = useFileUpload;
+exports.useMessageQueue = useMessageQueue;
+exports.useStopExecution = useStopExecution;
 exports.useTheme = useTheme;
 exports.widget = widget;
 exports.zIndex = zIndex;