@dxos/plugin-script 0.8.3 → 0.8.4-main.1068cf700f

package/dist/lib/browser/chunk-LYMPME7J.mjs

@@ -0,0 +1,609 @@
+import {
+  getAccessCredential,
+  useDeployState,
+  useToolbarState
+} from "./chunk-WWCDIB6Z.mjs";
+import {
+  meta
+} from "./chunk-WYR4QHPE.mjs";
+
+// src/components/Settings/ScriptObjectSettings.tsx
+import { Octokit } from "@octokit/core";
+import React, { useCallback, useState } from "react";
+import { ToolId } from "@dxos/ai";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { SettingsOperation } from "@dxos/app-toolkit";
+import { Blueprint, Template } from "@dxos/blueprints";
+import { Filter, Obj, Ref } from "@dxos/echo";
+import { Function, getUserFunctionIdInMetadata } from "@dxos/functions";
+import { getInvocationUrl } from "@dxos/functions-runtime";
+import { log } from "@dxos/log";
+import { useClient } from "@dxos/react-client";
+import { useQuery } from "@dxos/react-client/echo";
+import { Button, Clipboard, Input, useAsyncEffect, useControlledState, useTranslation } from "@dxos/react-ui";
+import { AccessToken } from "@dxos/types";
+import { kebabize } from "@dxos/util";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-script/src/components/Settings/ScriptObjectSettings.tsx";
+var ScriptObjectSettings = ({ object }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Binding, {
+    object
+  }), /* @__PURE__ */ React.createElement(BlueprintEditor, {
+    object
+  }), /* @__PURE__ */ React.createElement(Publishing, {
+    object
+  }));
+};
+var ScriptProperties = ({ object }) => {
+  const { t } = useTranslation(meta.id);
+  return /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, null, t("description label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
+    placeholder: t("description placeholder"),
+    value: object.description ?? "",
+    onChange: (event) => {
+      Obj.change(object, (o) => {
+        o.description = event.target.value;
+      });
+    }
+  }));
+};
+var BlueprintEditor = ({ object }) => {
+  const { t } = useTranslation(meta.id);
+  const db = Obj.getDatabase(object);
+  const [fn] = useQuery(db, Filter.type(Function.Function, {
+    source: Ref.make(object)
+  }));
+  const blueprints = useQuery(db, Filter.type(Blueprint.Blueprint));
+  const [creating, setCreating] = useState(false);
+  const [instructions, setInstructions] = useState(`You can run the script "${object.name ?? "script"}".`);
+  const blueprintKey = `dxos.org/blueprint/${kebabize(object.name ?? "script")}`;
+  const existingBlueprint = blueprints.find((bp) => bp.key === blueprintKey);
+  useAsyncEffect(async () => {
+    if (!existingBlueprint) {
+      return;
+    }
+    const source = await existingBlueprint.instructions.source.load();
+    setInstructions(source.content ?? "");
+  }, [
+    existingBlueprint
+  ]);
+  const handleSave = useCallback(async () => {
+    if (!db) {
+      return;
+    }
+    setCreating(true);
+    try {
+      if (existingBlueprint) {
+        const text = await existingBlueprint.instructions.source.load();
+        Obj.change(text, (t2) => {
+          t2.content = instructions;
+        });
+        if (fn?.key) {
+          const toolId = ToolId.make(fn.key);
+          if (!existingBlueprint.tools?.includes(toolId)) {
+            Obj.change(existingBlueprint, (b) => {
+              b.tools = [
+                ...b.tools ?? [],
+                toolId
+              ];
+            });
+          }
+        }
+      } else if (fn?.key) {
+        db.add(Blueprint.make({
+          key: blueprintKey,
+          name: object.name ?? "Script",
+          instructions: Template.make({
+            source: instructions
+          }),
+          tools: [
+            ToolId.make(fn.key)
+          ]
+        }));
+      }
+      await db.flush();
+    } finally {
+      setCreating(false);
+    }
+  }, [
+    db,
+    existingBlueprint,
+    fn,
+    blueprintKey,
+    object.name,
+    instructions
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col gap-4 mlb-cardSpacingBlock"
+  }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h2", null, t("blueprint editor label", {
+    default: "Blueprint"
+  })), /* @__PURE__ */ React.createElement("p", {
+    className: "text-description text-sm"
+  }, t("blueprint editor description", {
+    default: "Create a blueprint that exposes this script as a tool."
+  }))), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "flex flex-col gap-1"
+  }, /* @__PURE__ */ React.createElement(Input.Label, null, t("blueprint instructions label", {
+    default: "Instructions"
+  })), /* @__PURE__ */ React.createElement(Input.TextArea, {
+    placeholder: t("blueprint instructions placeholder", {
+      default: "Describe how this tool should be used."
+    }),
+    rows: 6,
+    value: instructions,
+    onChange: (event) => setInstructions(event.target.value),
+    classNames: "resize-y"
+  }))), /* @__PURE__ */ React.createElement("div", {
+    className: "flex justify-end gap-2"
+  }, /* @__PURE__ */ React.createElement(Button, {
+    disabled: !existingBlueprint && !fn?.key || creating,
+    onClick: handleSave
+  }, t(creating ? "creating label" : "create blueprint label", {
+    default: creating ? "Creating\u2026" : "Create blueprint"
+  }))));
+};
+var Binding = ({ object }) => {
+  const { t } = useTranslation(meta.id);
+  const client = useClient();
+  const db = Obj.getDatabase(object);
+  const [fn] = useQuery(db, Filter.type(Function.Function, {
+    source: Ref.make(object)
+  }));
+  const functionId = fn && getUserFunctionIdInMetadata(Obj.getMeta(fn));
+  const functionUrl = functionId && getInvocationUrl(functionId, client.config.values.runtime?.services?.edge?.url ?? "", {
+    spaceId: db?.spaceId
+  });
+  const [binding, setBinding] = useControlledState(fn?.binding ?? "");
+  const handleBindingChange = useCallback((event) => {
+    setBinding(event.target.value);
+  }, [
+    setBinding
+  ]);
+  const handleBindingBlur = useCallback(() => {
+    Obj.change(fn, (f) => {
+      f.binding = binding;
+    });
+  }, [
+    fn,
+    binding
+  ]);
+  if (!fn || !functionUrl) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "form",
+    className: "flex flex-col gap-2 mlb-cardSpacingBlock"
+  }, /* @__PURE__ */ React.createElement("h2", null, t("remote function settings heading")), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "flex flex-col gap-1"
+  }, /* @__PURE__ */ React.createElement(Input.Label, null, t("function url label")), /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "flex gap-1"
+  }, /* @__PURE__ */ React.createElement(Input.TextInput, {
+    disabled: true,
+    value: functionUrl,
+    onChange: (event) => {
+      Obj.change(fn, (f) => {
+        f.name = event.target.value;
+      });
+    }
+  }), /* @__PURE__ */ React.createElement(Clipboard.IconButton, {
+    value: functionUrl
+  })))), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "flex flex-col gap-1"
+  }, /* @__PURE__ */ React.createElement(Input.Label, null, t("function binding label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
+    placeholder: t("function binding placeholder"),
+    value: binding,
+    onChange: handleBindingChange,
+    onBlur: handleBindingBlur
+  }))));
+};
+var Publishing = ({ object }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const db = Obj.getDatabase(object);
+  const [githubToken] = useQuery(db, Filter.type(AccessToken.AccessToken, {
+    source: "github.com"
+  }));
+  const gistKey = Obj.getMeta(object).keys.find(({ source }) => source === "github.com");
+  const [gistUrl, setGistUrl] = useState();
+  useAsyncEffect(async () => {
+    const token = githubToken?.token;
+    const gistId = gistKey?.id;
+    if (!token || !gistId) {
+      setGistUrl(void 0);
+      return;
+    }
+    try {
+      const octokit = new Octokit({
+        auth: githubToken.token
+      });
+      const response = await octokit.request("GET /gists/{gist_id}", {
+        gist_id: gistId
+      });
+      setGistUrl(response.data.html_url);
+    } catch (err) {
+      log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 239,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      setGistUrl(void 0);
+    }
+  }, [
+    githubToken,
+    gistKey
+  ]);
+  const handleOpenTokenManager = useCallback(() => invokePromise(SettingsOperation.Open, {
+    plugin: "dxos.org/plugin/token-manager"
+  }), [
+    invokePromise
+  ]);
+  const [publishing, setPublishing] = useState(false);
+  const handlePublish = useCallback(async () => {
+    setPublishing(true);
+    const octokit = new Octokit({
+      auth: githubToken.token
+    });
+    const source = await object.source.load();
+    const filename = object.name ? kebabize(object.name) : "composer-script";
+    const files = {
+      [`${filename}.ts`]: {
+        content: source.content
+      }
+    };
+    try {
+      const meta2 = Obj.getMeta(object);
+      const githubKey = meta2.keys.find(({ source: source2 }) => source2 === "github.com");
+      const gistId = githubKey?.id;
+      if (gistId) {
+        await octokit.request("PATCH /gists/{gist_id}", {
+          gist_id: gistId,
+          files
+        });
+      } else {
+        const response = await octokit.request("POST /gists", {
+          public: true,
+          files
+        });
+        const gistId2 = response.data.id;
+        if (gistId2) {
+          Obj.change(object, (obj) => {
+            Obj.getMeta(obj).keys.push({
+              source: "github.com",
+              id: gistId2
+            });
+          });
+        }
+      }
+    } finally {
+      setPublishing(false);
+    }
+  }, [
+    object,
+    githubToken
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col gap-4 mlb-cardSpacingBlock"
+  }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h2", null, t("script publish settings label")), /* @__PURE__ */ React.createElement("p", {
+    className: "text-description text-sm"
+  }, t("script publish settings description"))), !githubToken && /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col gap-2"
+  }, /* @__PURE__ */ React.createElement("span", null, t("no github token label")), /* @__PURE__ */ React.createElement(Button, {
+    onClick: handleOpenTokenManager
+  }, t("open token manager label"))), githubToken && /* @__PURE__ */ React.createElement("div", {
+    className: "flex justify-end gap-2"
+  }, gistUrl && /* @__PURE__ */ React.createElement(Clipboard.IconButton, {
+    value: gistUrl
+  }), /* @__PURE__ */ React.createElement(Button, {
+    disabled: publishing,
+    onClick: handlePublish
+  }, t(publishing ? "publishing label" : "publish label"))));
+};
+
+// src/components/Settings/ScriptPluginSettings.tsx
+import React2 from "react";
+import { useClient as useClient2 } from "@dxos/react-client";
+import { Button as Button2, Select, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Settings } from "@dxos/react-ui-form";
+import { EditorInputModes } from "@dxos/ui-editor";
+var ScriptPluginSettings = ({ settings, onSettingsChange }) => {
+  const { t } = useTranslation2(meta.id);
+  const client = useClient2();
+  const handleAuthenticate = async () => {
+    const { identityKey } = client.halo.identity.get();
+    await client.halo.writeCredentials([
+      getAccessCredential(identityKey)
+    ]);
+  };
+  return /* @__PURE__ */ React2.createElement(Settings.Root, null, /* @__PURE__ */ React2.createElement(Settings.Section, {
+    title: t("settings title", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React2.createElement(Settings.Group, null, /* @__PURE__ */ React2.createElement(Settings.ItemInput, {
+    title: t("authenticate action label")
+  }, /* @__PURE__ */ React2.createElement(Button2, {
+    onClick: handleAuthenticate
+  }, t("authenticate button label"))), /* @__PURE__ */ React2.createElement(Settings.ItemInput, {
+    title: t("editor input mode label")
+  }, /* @__PURE__ */ React2.createElement(Select.Root, {
+    value: settings.editorInputMode ?? "default",
+    onValueChange: (value) => {
+      onSettingsChange((s) => ({
+        ...s,
+        editorInputMode: value
+      }));
+    }
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
+    placeholder: t("select editor input mode placeholder")
+  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, EditorInputModes.map((mode) => /* @__PURE__ */ React2.createElement(Select.Option, {
+    key: mode,
+    value: mode
+  }, t(`settings editor input mode ${mode} label`)))), /* @__PURE__ */ React2.createElement(Select.Arrow, null))))))));
+};
+
+// src/components/TestPanel/TestPanel.tsx
+import React3, { forwardRef, useEffect, useRef, useState as useState2 } from "react";
+import { log as log2 } from "@dxos/log";
+import { Avatar, Icon, Input as Input2, ScrollArea, Toolbar, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
+import { errorText, mx } from "@dxos/ui-theme";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-script/src/components/TestPanel/TestPanel.tsx";
+var TestPanel = ({ classNames, functionUrl }) => {
+  const { t } = useTranslation3(meta.id);
+  const inputRef = useRef(null);
+  const [input, setInput] = useState2("");
+  const [result, setResult] = useState2("");
+  const [state, setState] = useState2(null);
+  const [history, setHistory] = useState2([]);
+  const scrollerRef = useRef(null);
+  const handleScroll = () => {
+    if (scrollerRef.current) {
+      scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
+    }
+  };
+  const controller = useRef(null);
+  useEffect(() => {
+    return () => {
+      handleStop();
+    };
+  }, []);
+  const handleStop = () => {
+    controller.current?.abort("stop");
+    controller.current = null;
+  };
+  const handleClear = () => {
+    handleStop();
+    setInput("");
+    setResult("");
+    setHistory([]);
+    inputRef.current?.focus();
+  };
+  const handleResponse = ({ text, data, error } = {}) => {
+    controller.current = null;
+    setHistory((history2) => [
+      ...history2,
+      {
+        type: "response",
+        text,
+        data,
+        error
+      }
+    ]);
+    setResult("");
+    setState(null);
+    handleScroll();
+  };
+  const handleRequest = async (input2) => {
+    try {
+      setState("pending");
+      let data = null;
+      if (input2.charAt(0) === "{") {
+        try {
+          const validJsonString = input2.replace(/'/g, '"').replace(/([{,]\s*)([a-zA-Z0-9_]+)(\s*:)/g, '$1"$2"$3');
+          data = JSON.parse(validJsonString);
+          input2 = JSON.stringify(data, null, 2);
+        } catch (err) {
+          inputRef.current?.focus();
+          return;
+        }
+      }
+      setInput("");
+      setResult("");
+      setHistory((history2) => [
+        ...history2,
+        {
+          type: "request",
+          text: input2
+        }
+      ]);
+      setTimeout(() => {
+        handleScroll();
+      });
+      controller.current = new AbortController();
+      const response = await fetch(functionUrl, {
+        signal: controller.current.signal,
+        method: "POST",
+        body: input2,
+        headers: {
+          "Content-Type": data ? "application/json" : "text/plain"
+        }
+      });
+      if (!response.ok) {
+        const text2 = await response.text();
+        handleResponse({
+          error: new Error(text2 || response.statusText || String(response.status))
+        });
+        return;
+      }
+      const contentType = response.headers.get("content-type");
+      if (contentType === "application/json") {
+        const data2 = await response.json();
+        handleResponse({
+          data: data2
+        });
+        return;
+      }
+      setState("responding");
+      let text = "";
+      const reader = response.body.getReader();
+      const pump = async ({ done, value }) => {
+        text = text + new TextDecoder().decode(value);
+        if (!controller.current || done) {
+          handleResponse({
+            text
+          });
+          return;
+        }
+        setResult(text);
+        setTimeout(() => {
+          handleScroll();
+        });
+        return reader.read().then(pump);
+      };
+      void reader.read().then(pump).catch((err) => {
+        if (err.name !== "AbortError") {
+          log2.catch(err, void 0, {
+            F: __dxlog_file2,
+            L: 162,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+        }
+      });
+    } catch (err) {
+      if (err !== "stop") {
+        const error = err instanceof Error ? err : new Error(err);
+        handleResponse({
+          error
+        });
+        log2.catch(err, void 0, {
+          F: __dxlog_file2,
+          L: 169,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+      } else {
+        handleResponse();
+      }
+    }
+  };
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: mx("flex flex-col bs-full overflow-hidden", classNames)
+  }, /* @__PURE__ */ React3.createElement(MessageThread, {
+    ref: scrollerRef,
+    state,
+    result,
+    history
+  }), /* @__PURE__ */ React3.createElement(Toolbar.Root, null, /* @__PURE__ */ React3.createElement(Input2.Root, null, /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+    ref: inputRef,
+    autoFocus: true,
+    placeholder: t("function request placeholder"),
+    value: input,
+    onChange: (ev) => setInput(ev.target.value),
+    onKeyDown: (ev) => ev.key === "Enter" && handleRequest(input)
+  })), /* @__PURE__ */ React3.createElement(Toolbar.IconButton, {
+    icon: "ph--play--regular",
+    size: 4,
+    label: "Execute",
+    iconOnly: true,
+    onClick: () => handleRequest(input)
+  }), /* @__PURE__ */ React3.createElement(Toolbar.IconButton, {
+    icon: state ? "ph--stop--regular" : "ph--trash--regular",
+    size: 4,
+    label: state ? "Stop" : "Clear",
+    iconOnly: true,
+    onClick: () => state ? handleStop() : handleClear()
+  })));
+};
+var MessageThread = /* @__PURE__ */ forwardRef(({ state, history, result }, forwardedRef) => {
+  return /* @__PURE__ */ React3.createElement(ScrollArea.Root, {
+    orientation: "vertical",
+    classNames: "bs-full",
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement(ScrollArea.Viewport, {
+    classNames: "gap-6 p-2"
+  }, history.map((message, i) => /* @__PURE__ */ React3.createElement("div", {
+    key: i,
+    className: "grid grid-cols-[2rem_1fr_2rem]"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "p-1"
+  }, message.type === "response" && /* @__PURE__ */ React3.createElement(RobotAvatar, null)), /* @__PURE__ */ React3.createElement("div", {
+    className: "overflow-auto"
+  }, /* @__PURE__ */ React3.createElement(MessageItem, {
+    message
+  })))), result?.length > 0 && /* @__PURE__ */ React3.createElement("div", {
+    className: "grid grid-cols-[2rem_1fr_2rem]"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "p-1"
+  }, state === "pending" && /* @__PURE__ */ React3.createElement(Icon, {
+    icon: "ph--spinner--regular",
+    size: 6,
+    classNames: "animate-spin"
+  }) || /* @__PURE__ */ React3.createElement(Icon, {
+    icon: "ph--robot--regular",
+    size: 6,
+    classNames: "animate-[pulse_1s_ease-in-out_infinite]"
+  })), /* @__PURE__ */ React3.createElement("div", {
+    className: "overflow-auto"
+  }, /* @__PURE__ */ React3.createElement(MessageItem, {
+    message: {
+      type: "response",
+      text: result
+    }
+  })))));
+});
+var MessageItem = ({ classNames, message }) => {
+  const { type, text, data, error } = message;
+  const wrapper = "p-1 pli-2 rounded-md bg-hoverSurface overflow-auto";
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: mx("flex", type === "request" ? "ml-[1rem] justify-end" : "mr-[1rem]", classNames)
+  }, error && /* @__PURE__ */ React3.createElement("div", {
+    className: mx(wrapper, "whitespace-pre", errorText)
+  }, String(error)), text !== void 0 && /* @__PURE__ */ React3.createElement("div", {
+    className: mx(wrapper, type === "request" && "bg-primary-400 dark:bg-primary-600")
+  }, text || "\xD8"), data && /* @__PURE__ */ React3.createElement(SyntaxHighlighter, {
+    language: "json",
+    className: mx(wrapper, "text-xs")
+  }, JSON.stringify(data, null, 2)));
+};
+var RobotAvatar = () => /* @__PURE__ */ React3.createElement(Avatar.Root, null, /* @__PURE__ */ React3.createElement(Avatar.Content, {
+  size: 6,
+  variant: "circle",
+  icon: "ph--robot--regular"
+}));
+
+// src/components/TestPanel/TestContainer.tsx
+import React4 from "react";
+import { Layout } from "@dxos/react-ui";
+var TestContainer = ({ role, script }) => {
+  const state = useToolbarState();
+  useDeployState({
+    state,
+    script
+  });
+  return /* @__PURE__ */ React4.createElement(Layout.Main, {
+    role
+  }, /* @__PURE__ */ React4.createElement(TestPanel, {
+    functionUrl: state.value.functionUrl
+  }));
+};
+
+// src/components/index.ts
+import { lazy } from "react";
+var ScriptContainer = lazy(() => import("./ScriptContainer-NB76645V.mjs"));
+var DeploymentDialog = lazy(() => import("./DeploymentDialog-XUAFCNI7.mjs"));
+var NotebookContainer = lazy(() => import("./NotebookContainer-UQ4I24R6.mjs"));
+
+export {
+  ScriptObjectSettings,
+  ScriptProperties,
+  ScriptPluginSettings,
+  TestPanel,
+  TestContainer,
+  ScriptContainer,
+  DeploymentDialog,
+  NotebookContainer
+};
+//# sourceMappingURL=chunk-LYMPME7J.mjs.map