@dxos/plugin-automation 0.7.4-staging.f7e8224 → 0.7.5-labs.5f04cf6

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

@@ -0,0 +1,118 @@
+import {
+  AUTOMATION_PLUGIN
+} from "./chunk-HKX3D3ZP.mjs";
+
+// packages/plugins/experimental/plugin-automation/src/components/TriggerEditor/TriggerEditor.tsx
+import React, { useState } from "react";
+import { ComputeGraph } from "@dxos/conductor";
+import { FunctionType, FunctionTriggerSchema, ScriptType, TriggerKind } from "@dxos/functions";
+import { Filter, useQuery } from "@dxos/react-client/echo";
+import { IconButton, Input, useTranslation } from "@dxos/react-ui";
+import { Form, SelectInput, TextInput } from "@dxos/react-ui-form";
+var TriggerEditor = ({ space, trigger, onSave, onCancel }) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const functions = useQuery(space, Filter.schema(FunctionType));
+  const workflows = useQuery(space, Filter.schema(ComputeGraph));
+  const scripts = useQuery(space, Filter.schema(ScriptType));
+  const handleSave = (values) => {
+    onSave?.(values);
+  };
+  return /* @__PURE__ */ React.createElement(Form, {
+    schema: FunctionTriggerSchema,
+    values: trigger,
+    onSave: handleSave,
+    onCancel,
+    Custom: {
+      ["function"]: (props) => /* @__PURE__ */ React.createElement(SelectInput, {
+        ...props,
+        options: getWorkflowOptions(workflows).concat(getFunctionOptions(scripts, functions))
+      }),
+      ["spec.type"]: (props) => /* @__PURE__ */ React.createElement(SelectInput, {
+        ...props,
+        options: Object.values(TriggerKind).map((kind) => ({
+          value: kind,
+          label: t(`trigger type ${kind}`)
+        }))
+      }),
+      ["meta"]: (props) => {
+        const meta = props.getValue();
+        const [newMetaFieldName, setNewMetaFieldName] = useState("");
+        React.useEffect(() => props.onValueChange("object", {
+          ...meta
+        }), []);
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", null, props.label), [
+          ...Object.keys(meta)
+        ].map((key) => {
+          const compositeKey = `meta.${key}`;
+          return /* @__PURE__ */ React.createElement("div", {
+            key: compositeKey,
+            role: "none",
+            className: "flex items-center mt-2 gap-1"
+          }, /* @__PURE__ */ React.createElement("div", {
+            role: "none",
+            className: "flex-1"
+          }, /* @__PURE__ */ React.createElement(TextInput, {
+            ...props,
+            type: "string",
+            label: key
+          })), /* @__PURE__ */ React.createElement(IconButton, {
+            icon: "ph--trash--regular",
+            iconOnly: true,
+            classNames: "mt-6",
+            label: t("trigger meta remove"),
+            onClick: () => {
+              const newValues = {
+                ...props.getValue()
+              };
+              delete newValues[key];
+              props.onValueChange("object", newValues);
+            }
+          }));
+        }), /* @__PURE__ */ React.createElement("div", {
+          role: "none",
+          className: "flex items-center mt-2 gap-1 plb-1"
+        }, /* @__PURE__ */ React.createElement("div", {
+          role: "none",
+          className: "flex-1"
+        }, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.TextInput, {
+          placeholder: t("trigger meta prop name placeholder"),
+          value: newMetaFieldName,
+          onChange: (event) => setNewMetaFieldName(event.target.value)
+        }))), /* @__PURE__ */ React.createElement(IconButton, {
+          icon: "ph--plus--regular",
+          iconOnly: true,
+          label: t("trigger meta add"),
+          onClick: () => {
+            if (newMetaFieldName.length) {
+              const meta2 = props.getValue() ?? {};
+              const metaWithNewProp = {
+                ...meta2,
+                [newMetaFieldName]: ""
+              };
+              setNewMetaFieldName("");
+              props.onValueChange("object", metaWithNewProp);
+            }
+          }
+        })));
+      }
+    }
+  });
+};
+var getWorkflowOptions = (graphs) => {
+  return graphs.map((graph) => ({
+    label: `compute-${graph.id}`,
+    value: `dxn:echo:@:${graph.id}`
+  }));
+};
+var getFunctionOptions = (scripts, functions) => {
+  const getLabel = (fn) => scripts.find((s) => fn.source?.target?.id === s.id)?.name ?? fn.name;
+  return functions.map((fn) => ({
+    label: getLabel(fn),
+    value: `dxn:worker:${fn.name}`
+  }));
+};
+
+export {
+  TriggerEditor
+};
+//# sourceMappingURL=chunk-KPSDH6XZ.mjs.map

package/dist/lib/browser/chunk-KPSDH6XZ.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/TriggerEditor/TriggerEditor.tsx"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useState } from 'react';\n\nimport { ComputeGraph } from '@dxos/conductor';\nimport {\n  FunctionType,\n  FunctionTriggerSchema,\n  type FunctionTriggerType,\n  type FunctionTrigger,\n  ScriptType,\n  TriggerKind,\n} from '@dxos/functions';\nimport { Filter, useQuery, type Space } from '@dxos/react-client/echo';\nimport { IconButton, Input, useTranslation } from '@dxos/react-ui';\nimport { Form, SelectInput, TextInput } from '@dxos/react-ui-form';\n\nimport { AUTOMATION_PLUGIN } from '../../meta';\n\nexport type TriggerEditorProps = {\n  space: Space;\n  trigger: FunctionTriggerType;\n  onSave?: (trigger: Omit<FunctionTrigger, 'id'>) => void;\n  onCancel?: () => void;\n};\n\nexport const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEditorProps) => {\n  const { t } = useTranslation(AUTOMATION_PLUGIN);\n\n  const functions = useQuery(space, Filter.schema(FunctionType));\n  const workflows = useQuery(space, Filter.schema(ComputeGraph));\n  const scripts = useQuery(space, Filter.schema(ScriptType));\n\n  const handleSave = (values: FunctionTriggerType) => {\n    onSave?.(values);\n  };\n\n  return (\n    <Form<FunctionTriggerType>\n      schema={FunctionTriggerSchema}\n      values={trigger}\n      onSave={handleSave}\n      onCancel={onCancel}\n      Custom={{\n        ['function' satisfies keyof FunctionTriggerType]: (props) => (\n          <SelectInput\n            {...props}\n            options={getWorkflowOptions(workflows).concat(getFunctionOptions(scripts, functions))}\n          />\n        ),\n        ['spec.type' as const]: (props) => (\n          <SelectInput\n            {...props}\n            options={Object.values(TriggerKind).map((kind) => ({\n              value: kind,\n              label: t(`trigger type ${kind}`),\n            }))}\n          />\n        ),\n        ['meta' as const]: (props) => {\n          const meta = props.getValue()!;\n\n          const [newMetaFieldName, setNewMetaFieldName] = useState('');\n\n          React.useEffect(() => props.onValueChange('object', { ...meta }), []);\n\n          return (\n            <>\n              <div>{props.label}</div>\n              {[...Object.keys(meta)].map((key) => {\n                const compositeKey: any = `meta.${key}`;\n                return (\n                  <div key={compositeKey} role='none' className='flex items-center mt-2 gap-1'>\n                    <div role='none' className='flex-1'>\n                      <TextInput {...props} type={'string'} label={key} />\n                    </div>\n                    <IconButton\n                      icon='ph--trash--regular'\n                      iconOnly\n                      classNames={'mt-6'}\n                      label={t('trigger meta remove')}\n                      onClick={() => {\n                        const newValues: any = { ...props.getValue() };\n                        delete newValues[key];\n                        props.onValueChange('object', newValues);\n                      }}\n                    />\n                  </div>\n                );\n              })}\n              <div role='none' className='flex items-center mt-2 gap-1 plb-1'>\n                <div role='none' className='flex-1'>\n                  <Input.Root>\n                    <Input.TextInput\n                      placeholder={t('trigger meta prop name placeholder')}\n                      value={newMetaFieldName}\n                      onChange={(event) => setNewMetaFieldName(event.target.value)}\n                    />\n                  </Input.Root>\n                </div>\n                <IconButton\n                  icon='ph--plus--regular'\n                  iconOnly\n                  label={t('trigger meta add')}\n                  onClick={() => {\n                    if (newMetaFieldName.length) {\n                      const meta = props.getValue() ?? {};\n                      const metaWithNewProp = { ...meta, [newMetaFieldName]: '' };\n                      setNewMetaFieldName('');\n                      props.onValueChange('object', metaWithNewProp);\n                    }\n                  }}\n                />\n              </div>\n            </>\n          );\n        },\n      }}\n    />\n  );\n};\n\nconst getWorkflowOptions = (graphs: ComputeGraph[]) => {\n  return graphs.map((graph) => ({ label: `compute-${graph.id}`, value: `dxn:echo:@:${graph.id}` }));\n};\n\nconst getFunctionOptions = (scripts: ScriptType[], functions: FunctionType[]) => {\n  const getLabel = (fn: FunctionType) => scripts.find((s) => fn.source?.target?.id === s.id)?.name ?? fn.name;\n  return functions.map((fn) => ({ label: getLabel(fn), value: `dxn:worker:${fn.name}` }));\n};\n"],
+  "mappings": "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",
+  "names": ["React", "useState", "ComputeGraph", "FunctionType", "FunctionTriggerSchema", "ScriptType", "TriggerKind", "Filter", "useQuery", "IconButton", "Input", "useTranslation", "Form", "SelectInput", "TextInput", "TriggerEditor", "space", "trigger", "onSave", "onCancel", "t", "useTranslation", "AUTOMATION_PLUGIN", "functions", "useQuery", "Filter", "schema", "FunctionType", "workflows", "ComputeGraph", "scripts", "ScriptType", "handleSave", "values", "Form", "FunctionTriggerSchema", "Custom", "props", "SelectInput", "options", "getWorkflowOptions", "concat", "getFunctionOptions", "Object", "TriggerKind", "map", "kind", "value", "label", "meta", "getValue", "newMetaFieldName", "setNewMetaFieldName", "useState", "React", "useEffect", "onValueChange", "div", "keys", "key", "compositeKey", "role", "className", "TextInput", "type", "IconButton", "icon", "iconOnly", "classNames", "onClick", "newValues", "Input", "Root", "placeholder", "onChange", "event", "target", "length", "metaWithNewProp", "graphs", "graph", "id", "getLabel", "fn", "find", "s", "source", "name"]
+}

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

@@ -0,0 +1,139 @@
+// packages/plugins/experimental/plugin-automation/src/components/Thread/Thread.tsx
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Icon, Input, useThemeContext } from "@dxos/react-ui";
+import { createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, useTextEditor } from "@dxos/react-ui-editor";
+import { Ball } from "@dxos/react-ui-sfx";
+import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
+import { mx } from "@dxos/react-ui-theme";
+var Thread = ({ messages, streaming, onSubmit }) => {
+  const scrollRef = useRef(null);
+  const scroll = () => scrollRef.current?.scrollTo({
+    top: scrollRef.current.scrollHeight,
+    behavior: "smooth"
+  });
+  const [text, setText] = useState("");
+  useEffect(() => scroll(), [
+    messages
+  ]);
+  const handleKeyDown = useCallback((ev) => {
+    switch (ev.key) {
+      case "Escape": {
+        setText("");
+        break;
+      }
+      case "Enter": {
+        const value = text.trim();
+        if (value.length > 0) {
+          onSubmit(value);
+          setText("");
+          scroll();
+        }
+        break;
+      }
+    }
+  }, [
+    text
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col grow overflow-hidden"
+  }, /* @__PURE__ */ React.createElement("div", {
+    ref: scrollRef,
+    className: "flex flex-col grow overflow-x-hidden overflow-y-scroll scrollbar-thin divide-y divide-separator"
+  }, messages.map((message, i) => /* @__PURE__ */ React.createElement(ThreadMessage, {
+    key: i,
+    classNames: "px-4 py-2",
+    message
+  }))), /* @__PURE__ */ React.createElement("div", {
+    className: "flex p-4 gap-3 items-center"
+  }, /* @__PURE__ */ React.createElement(Ball, {
+    active: streaming
+  }), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.TextInput, {
+    autoFocus: true,
+    classNames: "px-2 bg-base rounded",
+    placeholder: "Ask a question...",
+    value: text,
+    onChange: (ev) => setText(ev.target.value),
+    onKeyDown: handleKeyDown
+  })), /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--spinner-gap--regular",
+    classNames: mx("animate-spin opacity-0 transition duration-500", streaming && "opacity-100"),
+    size: 6
+  })));
+};
+var ThreadMessage = ({ classNames, message }) => {
+  if (typeof message !== "object") {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: mx(classNames)
+    }, message);
+  }
+  const { role, content = [] } = message;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mx("flex", classNames, role === "user" && "justify-end")
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: mx("block rounded-md p-1 px-2 bg-base overflow-hidden divide-y divid-separator", role === "user" ? "dark:bg-blue-800" : "whitespace-pre-wrap")
+  }, content.map((item, idx) => {
+    switch (item.type) {
+      case "text":
+        return /* @__PURE__ */ React.createElement(Markdown, {
+          key: idx,
+          text: item.text.trim()
+        });
+      case "json":
+        return /* @__PURE__ */ React.createElement(Json, {
+          key: idx,
+          data: item.json
+        });
+      default:
+        return /* @__PURE__ */ React.createElement(Json, {
+          key: idx,
+          data: item
+        });
+    }
+  })));
+};
+var Markdown = ({ text, classNames }) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef, view } = useTextEditor(() => ({
+    initialValue: text,
+    extensions: [
+      // TOOD(burdon): Optional line wrapping.
+      createBasicExtensions({
+        lineWrapping: true,
+        readonly: true
+      }),
+      createMarkdownExtensions(),
+      createThemeExtensions({
+        themeMode
+      }),
+      decorateMarkdown()
+    ]
+  }));
+  useEffect(() => {
+    view?.dispatch({
+      // TODO(burdon): Append?
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert: text
+      }
+    });
+  }, [
+    text
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: parentRef,
+    className: mx("w-full overflow-hidden", classNames)
+  });
+};
+var Json = ({ data, classNames }) => {
+  return /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
+    language: "json",
+    classNames: "w-full overflow-hidden text-sm"
+  }, JSON.stringify(data, null, 2));
+};
+
+export {
+  Thread,
+  ThreadMessage
+};
+//# sourceMappingURL=chunk-YZF3SDZL.mjs.map

package/dist/lib/browser/chunk-YZF3SDZL.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Thread/Thread.tsx"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type Message } from '@dxos/artifact';\nimport { Icon, Input, useThemeContext, type ThemedClassName } from '@dxos/react-ui';\nimport {\n  createBasicExtensions,\n  createMarkdownExtensions,\n  createThemeExtensions,\n  decorateMarkdown,\n  useTextEditor,\n} from '@dxos/react-ui-editor';\nimport { Ball } from '@dxos/react-ui-sfx';\nimport { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type ThreadProps = {\n  messages: Message[];\n  streaming?: boolean;\n  onSubmit: (message: string) => void;\n};\n\nexport const Thread = ({ messages, streaming, onSubmit }: ThreadProps) => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const scroll = () => scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });\n  const [text, setText] = useState('');\n  useEffect(() => scroll(), [messages]);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n    (ev) => {\n      switch (ev.key) {\n        case 'Escape': {\n          setText('');\n          break;\n        }\n        case 'Enter': {\n          const value = text.trim();\n          if (value.length > 0) {\n            onSubmit(value);\n            setText('');\n            scroll();\n          }\n          break;\n        }\n      }\n    },\n    [text],\n  );\n\n  return (\n    <div className='flex flex-col grow overflow-hidden'>\n      <div\n        ref={scrollRef}\n        className='flex flex-col grow overflow-x-hidden overflow-y-scroll scrollbar-thin divide-y divide-separator'\n      >\n        {messages.map((message, i) => (\n          <ThreadMessage key={i} classNames='px-4 py-2' message={message} />\n        ))}\n      </div>\n\n      <div className='flex p-4 gap-3 items-center'>\n        <Ball active={streaming} />\n        <Input.Root>\n          <Input.TextInput\n            autoFocus\n            classNames='px-2 bg-base rounded'\n            placeholder='Ask a question...'\n            value={text}\n            onChange={(ev) => setText(ev.target.value)}\n            onKeyDown={handleKeyDown}\n          />\n        </Input.Root>\n        <Icon\n          icon={'ph--spinner-gap--regular'}\n          classNames={mx('animate-spin opacity-0 transition duration-500', streaming && 'opacity-100')}\n          size={6}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport type ThreadMessageProps = ThemedClassName<{\n  message: Message;\n}>;\n\nexport const ThreadMessage = ({ classNames, message }: ThreadMessageProps) => {\n  if (typeof message !== 'object') {\n    return <div className={mx(classNames)}>{message}</div>;\n  }\n\n  const { role, content = [] } = message;\n  return (\n    <div className={mx('flex', classNames, role === 'user' && 'justify-end')}>\n      <div\n        className={mx(\n          'block rounded-md p-1 px-2 bg-base overflow-hidden divide-y divid-separator',\n          role === 'user' ? 'dark:bg-blue-800' : 'whitespace-pre-wrap',\n        )}\n      >\n        {/* TODO(burdon): Use message ID for stable rendering. */}\n        {content.map((item, idx) => {\n          switch (item.type) {\n            case 'text':\n              return <Markdown key={idx} text={item.text.trim()} />;\n            case 'json':\n              return <Json key={idx} data={item.json} />;\n            default:\n              return <Json key={idx} data={item} />;\n          }\n        })}\n      </div>\n    </div>\n  );\n};\n\nconst Markdown = ({ text, classNames }: ThemedClassName<{ text: string }>) => {\n  const { themeMode } = useThemeContext();\n  const { parentRef, view } = useTextEditor(() => ({\n    initialValue: text,\n    extensions: [\n      // TOOD(burdon): Optional line wrapping.\n      createBasicExtensions({ lineWrapping: true, readonly: true }),\n      createMarkdownExtensions(),\n      createThemeExtensions({ themeMode }),\n      decorateMarkdown(),\n    ],\n  }));\n\n  useEffect(() => {\n    view?.dispatch({\n      // TODO(burdon): Append?\n      changes: { from: 0, to: view.state.doc.length, insert: text },\n    });\n  }, [text]);\n\n  return <div ref={parentRef} className={mx('w-full overflow-hidden', classNames)} />;\n};\n\nconst Json = ({ data, classNames }: ThemedClassName<{ data: any }>) => {\n  return (\n    <SyntaxHighlighter language='json' classNames='w-full overflow-hidden text-sm'>\n      {JSON.stringify(data, null, 2)}\n    </SyntaxHighlighter>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React", "useCallback", "useEffect", "useRef", "useState", "Icon", "Input", "useThemeContext", "createBasicExtensions", "createMarkdownExtensions", "createThemeExtensions", "decorateMarkdown", "useTextEditor", "Ball", "SyntaxHighlighter", "mx", "Thread", "messages", "streaming", "onSubmit", "scrollRef", "useRef", "scroll", "current", "scrollTo", "top", "scrollHeight", "behavior", "text", "setText", "useState", "useEffect", "handleKeyDown", "useCallback", "ev", "key", "value", "trim", "length", "div", "className", "ref", "map", "message", "i", "ThreadMessage", "classNames", "Ball", "active", "Input", "Root", "TextInput", "autoFocus", "placeholder", "onChange", "target", "onKeyDown", "Icon", "icon", "mx", "size", "role", "content", "item", "idx", "type", "Markdown", "Json", "data", "json", "themeMode", "useThemeContext", "parentRef", "view", "useTextEditor", "initialValue", "extensions", "createBasicExtensions", "lineWrapping", "readonly", "createMarkdownExtensions", "createThemeExtensions", "decorateMarkdown", "dispatch", "changes", "from", "to", "state", "doc", "insert", "SyntaxHighlighter", "language", "JSON", "stringify"]
+}