wao 0.41.3 → 0.41.5

package/app/components/editor/Editor.js

@@ -0,0 +1,322 @@
+import Monaco from "@monaco-editor/react"
+import lf from "localforage"
+import { getPreview, filterFiles } from "/lib/utils"
+import use from "/lib/use"
+import { useRef, useEffect, useState } from "react"
+import MonacoEditor from "/components/editor/MonacoEditor"
+import FilePath from "/components/editor/FilePath"
+import { Box, Flex, Icon } from "@chakra-ui/react"
+import EditorScrollbarStyle from "/components/styles/EditorScrollbarStyle"
+import g from "/lib/global"
+import { filter, map, includes } from "ramda"
+import { FaX } from "react-icons/fa6"
+import { generateId } from "/lib/utils"
+import { bfiles } from "/lib/guide"
+
+export default function Editor({}) {
+  const [tab, setTab] = use("tab")
+  const [init, setInit] = use("init")
+  const [previewContent, setPreviewContent] = use("previewContent")
+  const [file, setFile] = use("file")
+  const [projects, setProjects] = use("projects")
+  const [preview, setPreview] = use("preview")
+  const [openFiles, setOpenFiles] = use("openFiles")
+  const [proc, setProc] = use("proc")
+  const [files, setFiles] = use("files")
+  const [tests, setTests] = use("tests")
+  const [test, setTest] = use("test")
+  const [modal8, setModal8] = use("modal8")
+  const [renameFileName, setRenameFileName] = use("renameFikeName")
+  const [renameFileExt, setRenameFileExt] = use("renameFikeExt")
+
+  const EditorBtns = () => (
+    <Flex
+      shrink="0"
+      align="center"
+      h="100%"
+      overflowX="scroll"
+      overflowY="hidden"
+      className="editor-tabs"
+      fontSize="11px"
+    >
+      {file?.ext !== "md" || file?.nodel ? null : (
+        <Flex
+          py={1}
+          px={6}
+          color="#5137C5"
+          css={{
+            borderRadius: "5px",
+            cursor: "pointer",
+            _hover: { opacity: 0.75 },
+          }}
+          onClick={async () => {
+            if (!preview) {
+              const txt = g.editorRef.current.getValue()
+              setPreviewContent(await getPreview(txt))
+            }
+            setPreview(!preview)
+          }}
+        >
+          {preview ? "Edit" : "Preview"}
+        </Flex>
+      )}
+      {file?.local ? (
+        <Flex
+          py={1}
+          px={6}
+          color="#5137C5"
+          css={{
+            borderRadius: "5px",
+            cursor: "pointer",
+            _hover: { opacity: 0.75 },
+          }}
+          onClick={async () => {
+            const content = g.editorRef.current.getValue()
+            g.hub1.socket.send(
+              JSON.stringify({ type: "save", content, path: file.filename })
+            )
+          }}
+        >
+          Save
+        </Flex>
+      ) : file?.nodel ? null : (
+        <>
+          <Flex
+            py={1}
+            px={4}
+            color="#5137C5"
+            css={{
+              borderRadius: "5px",
+              cursor: "pointer",
+              _hover: { opacity: 0.75 },
+            }}
+            onClick={async () => {
+              setModal8(true)
+            }}
+          >
+            Rename
+          </Flex>
+          <Flex
+            py={1}
+            px={4}
+            color="#5137C5"
+            css={{
+              borderRadius: "5px",
+              cursor: "pointer",
+              _hover: { opacity: 0.75 },
+            }}
+            onClick={async () => {
+              if (confirm("Would you like to delete the file?")) {
+                g.editorRef.current.setValue("")
+                await lf.removeItem(`file-${file.id}`)
+                const _files = filter(v => file.id !== v.id)(files)
+                const _openFiles = filter(v => file.id !== v.id)(openFiles)
+                await lf.setItem(`files`, filterFiles(_files))
+                setFiles(_files)
+                setOpenFiles(_openFiles)
+                let exists = false
+                for (let v of _openFiles) {
+                  exists = true
+                  setFile(v)
+                  g.setType(v.ext)
+                  g.editorRef.current.setValue(
+                    (await lf.getItem(`file-${v.id}`)) ?? ""
+                  )
+                  break
+                }
+                if (!exists) {
+                  setFile(bfiles[0])
+                  setOpenFiles([bfiles[0]])
+                  g.setType(bfiles[0].ext)
+                  fetch("/docs/README.md")
+                    .then(r => r.text())
+                    .then(txt => {
+                      g.editorRef.current.setValue(txt)
+                      setPreview(true)
+                      getPreview(txt).then(setPreviewContent)
+                    })
+                }
+              }
+            }}
+          >
+            Delete
+          </Flex>
+        </>
+      )}
+    </Flex>
+  )
+
+  const EditorTabs = () => (
+    <Flex
+      flex={1}
+      h="100%"
+      overflowX="scroll"
+      overflowY="hidden"
+      className="editor-tabs"
+    >
+      <EditorScrollbarStyle />
+      {map(v => {
+        const open = v.id === file?.id
+        return (
+          <Flex
+            fontSize="11px"
+            w="140px"
+            h="30px"
+            bg={open ? "#1e1e1e" : "#444"}
+            px={3}
+            color="#c6c6c6"
+            align="center"
+            onClick={async () => {
+              const txt = (await lf.getItem(`file-${v.id}`)) ?? ""
+              setFile(v)
+              g.setType(v.ext)
+              // todo: handle this better
+              if (v.ext === "md" && v.nodel) setPreview(true)
+              if (v.ext === "md") setPreviewContent(await getPreview(txt))
+              setTimeout(() => g.editorRef.current.setValue(txt), 100)
+            }}
+            css={{
+              cursor: open ? "default" : "pointer",
+              _hover: { opacity: open ? 1 : 0.75 },
+            }}
+          >
+            <Flex
+              color={
+                v.ext === "lua"
+                  ? "#7FDBFF"
+                  : v.ext === "md"
+                    ? "#39CCCC"
+                    : includes(v.ext, ["js", "ts"])
+                      ? "#FFDC00"
+                      : "#3d9977"
+              }
+              mr={2}
+              fontWeight="bold"
+            >
+              {v.ext === "lua"
+                ? "Lua"
+                : v.ext == "md"
+                  ? "MD"
+                  : v.ext == "js"
+                    ? "JS"
+                    : v.ext === "ts"
+                      ? "TS"
+                      : "{ }"}
+            </Flex>
+            <Box
+              fontSize="11px"
+              title={v.name}
+              w="70px"
+              css={{
+                overflow: "hidden",
+                whiteSpace: "nowrap",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {v.name}
+            </Box>
+            <Box flex={1} />
+            <Box>
+              <Icon
+                boxSize="10px"
+                css={{
+                  cursor: "pointer",
+                  _hover: { opacity: 0.75, color: "#FFDC00" },
+                }}
+                onClick={async e => {
+                  e.stopPropagation()
+                  let opens = filter(v2 => v2.id !== v.id)(openFiles)
+                  setOpenFiles(opens)
+                  if (open) {
+                    let exists = false
+                    for (let v of opens) {
+                      exists = true
+                      setFile(v)
+                      let txt = ""
+                      if (v.fetch) {
+                        txt = await fetch(v.fetch).then(r => r.text())
+                      } else {
+                        txt = (await lf.getItem(`file-${v.id}`)) ?? ""
+                      }
+                      g.setType(v.ext)
+                      g.editorRef.current.setValue(txt)
+                      if (v.ext === "md" && v.nodel) setPreview(true)
+                      if (v.ext === "md" && (preview || v.nodel)) {
+                        setPreviewContent(await getPreview(txt))
+                      }
+
+                      break
+                    }
+                    if (!exists) {
+                      setFile(bfiles[0])
+                      setOpenFiles([bfiles[0]])
+                      g.setType(bfiles[0].ext)
+                      fetch("/docs/README.md")
+                        .then(r => r.text())
+                        .then(txt => {
+                          g.editorRef.current.setValue(txt)
+                          setPreview(true)
+                          getPreview(txt).then(setPreviewContent)
+                        })
+                    }
+                  }
+                }}
+              >
+                <FaX />
+              </Icon>
+            </Box>
+          </Flex>
+        )
+      })(openFiles)}
+    </Flex>
+  )
+
+  const isPreview = preview && file?.ext === "md"
+  return !init ? null : (
+    <Flex
+      direction="column"
+      w="100%"
+      css={{ borderLeft: "1px solid #eee" }}
+      h="100%"
+    >
+      <Flex align="center" color="#5137C5" w="100%">
+        <EditorTabs />
+        <EditorBtns />
+      </Flex>
+      <Flex
+        bg="#1e1e1e"
+        px={3}
+        fontSize="10px"
+        w="100%"
+        h="20px"
+        pb="5px"
+        color="#999"
+        align="center"
+      >
+        <FilePath {...{ file, projects }} />
+      </Flex>
+      <Flex w="100%" flex={1} css={{ overflowY: "auto" }}>
+        {isPreview ? (
+          <Flex justify="center" flex={1} h="100%" css={{ overflowY: "auto" }}>
+            <Box w="100%">
+              <Box
+                p={6}
+                w="100%"
+                className="markdown-body"
+                dangerouslySetInnerHTML={{ __html: previewContent }}
+              />
+            </Box>
+          </Flex>
+        ) : null}
+        <Box
+          display={isPreview ? "none" : "block"}
+          w="100%"
+          bg="#1E1E1E"
+          h="100%"
+        >
+          <MonacoEditor />
+        </Box>
+      </Flex>
+    </Flex>
+  )
+}

package/app/components/editor/FilePath.js

@@ -0,0 +1,42 @@
+import { Box, Flex, Icon } from "@chakra-ui/react"
+import { FaAngleRight } from "react-icons/fa6"
+import { indexBy, prop } from "ramda"
+import use from "/lib/use"
+
+export default function FilePath({}) {
+  const [file] = use("file")
+  const [localFS, setLocalFS] = use("localFS")
+  const [localFSOpen, setLocalFSOpen] = use("localFSOpen")
+  const [projects] = use("projects")
+  if (!file) return null
+  const _projects = [
+    ...(localFS.length > 0
+      ? [{ id: "2", name: "Local Computer", open: localFSOpen }]
+      : []),
+    ...projects,
+  ]
+
+  const pmap = indexBy(prop("id"))(_projects)
+  let html = []
+  html.push(<Box>{pmap[file.pid].name}</Box>)
+  for (let v of file.path.split("/")) {
+    if (v === "") continue
+    html.push(
+      <>
+        <Icon boxSize="11px" mx={2}>
+          <FaAngleRight />
+        </Icon>
+        <Box>{v}</Box>
+      </>
+    )
+  }
+  return (
+    <>
+      {html}
+      <Icon boxSize="11px" mx={2}>
+        <FaAngleRight />
+      </Icon>
+      <Box>{file?.name}</Box>
+    </>
+  )
+}

package/app/components/editor/MonacoEditor.js

@@ -0,0 +1,44 @@
+import Monaco from "@monaco-editor/react"
+import lf from "localforage"
+import { getPreview } from "/lib/utils"
+import use from "/lib/use"
+import { useRef, useEffect, useState } from "react"
+import global from "/lib/global"
+
+export default function MonacoEditor({}) {
+  const [monaco, setMonaco] = useState(null)
+  const [file] = use("file")
+  const [tab] = use("tab")
+  const [_, setPreviewContent] = use("previewContent")
+  global.monacoRef = useRef(null)
+  useEffect(() => {
+    global.monacoRef.current = monaco
+  }, [monaco])
+
+  function handleEditorDidMount(editor, monaco) {
+    global.editorRef.current = editor
+    setMonaco(monaco)
+    fetch("/docs/README.md")
+      .then(r => r.text())
+      .then(txt => {
+        global.editorRef.current.setValue(txt)
+        getPreview(txt).then(setPreviewContent)
+      })
+  }
+
+  return (
+    <Monaco
+      height={tab !== "Projects" ? "100%" : "calc(100vh - 120px)"}
+      width="100%"
+      theme="vs-dark"
+      defaultLanguage={file?.ext === "js" ? "js" : file?.ext ? file.ext : "lua"}
+      onMount={handleEditorDidMount}
+      onChange={async () => {
+        if (file) {
+          const body = global.editorRef.current.getValue()
+          await lf.setItem(`file-${file.id}`, body)
+        }
+      }}
+    />
+  )
+}

package/app/components/left/LeftMessages.js

@@ -0,0 +1,85 @@
+import use from "/lib/use"
+import { Box, Flex } from "@chakra-ui/react"
+import { DataItem } from "arbundles"
+import g from "/lib/global"
+import { clone, map } from "ramda"
+import { tags } from "/lib/utils"
+
+export default function Left() {
+  const [message, setMessage] = use("message")
+  const [tab, setTab] = use("tab")
+  const [messages, setMessages] = use("messages")
+  const buttons = (
+    <Flex
+      h="50px"
+      align="center"
+      p={4}
+      fontSize="12px"
+      css={{ borderBottom: "1px solid #ddd" }}
+    >
+      {null}
+    </Flex>
+  )
+
+  return (
+    <Box
+      fontSize="12px"
+      w="315px"
+      h="100%"
+      css={{ borderRight: "1px solid #ddd", overflowY: "auto" }}
+    >
+      {buttons}
+      {map(v => {
+        if (!v.http_msg?.tags && v.http_msg?.item) {
+          v.http_msg.tags = new DataItem(v.http_msg.item.binary).tags
+        }
+        const t = tags(v.http_msg?.tags ?? [])
+        return (
+          <Flex
+            h="50px"
+            bg={v.id === message?.id ? "#5137C5" : "white"}
+            fontSize="12px"
+            p={4}
+            direction="column"
+            justify="center"
+            onClick={() => {
+              let _msg = clone(g.ao.mem.msgs[v.id])
+              _msg.id = v.id
+              if (_msg.http_msg) setMessage(_msg)
+              else {
+                if (!_msg.tags) {
+                  _msg.tags = new DataItem(_msg.item.binary).tags
+                }
+                setMessage({
+                  item: v.item,
+                  res: _msg.res,
+                  http_msg: _msg,
+                  id: _msg.id,
+                  slot: v.slot,
+                })
+              }
+            }}
+            css={{
+              borderBottom: "1px solid #ddd",
+              cursor: "pointer",
+              _hover: { opacity: 0.75 },
+            }}
+          >
+            <Flex
+              fontWeight="bold"
+              color={v.id !== message?.id ? "#5137C5" : "#ddd"}
+            >
+              <Flex w="20px" mr={2}>
+                [{v.slot}]
+              </Flex>
+              <Box>{t.Type === "Process" ? "Process" : t.Action}</Box>
+            </Flex>
+            <Box color={v.id !== message?.id ? "#222" : "#ddd"} fontSize="10px">
+              {v.id}
+            </Box>
+          </Flex>
+        )
+      })(messages)}
+    </Box>
+  )
+}

package/app/components/left/LeftModules.js

@@ -0,0 +1,86 @@
+import use from "/lib/use"
+import { Box, Flex } from "@chakra-ui/react"
+import g from "/lib/global"
+import { clone, map, addIndex, append } from "ramda"
+
+export default function Left() {
+  const [modules, setModules] = use("modules")
+  const [message, setMessage] = use("message")
+  const [tab, setTab] = use("tab")
+  const [mod, setModule] = use("module")
+  const [proc, setProc] = use("proc")
+  const [messages, setMessages] = use("messages")
+  const [procs, setProcs] = use("procs")
+
+  const buttons = (
+    <Flex
+      h="50px"
+      align="center"
+      p={4}
+      fontSize="12px"
+      css={{ borderBottom: "1px solid #ddd" }}
+    >
+      <>
+        <Flex
+          py={1}
+          px={3}
+          fontSize="10px"
+          color="#ddd"
+          bg="#5137C5"
+          css={{
+            borderRadius: "5px",
+            cursor: "pointer",
+            _hover: { opacity: 0.75 },
+          }}
+          onClick={async () => {
+            const jwk = await g.getWallet()
+            const { pid, p } = await g.ao.deploy({ module: mod.id, jwk })
+            g.logSpawn(pid)
+            g._setModule(mod.id)
+            g._setProcess(pid)
+            setTab("Processes")
+          }}
+        >
+          Spawn
+        </Flex>
+        <Box flex={1} />
+      </>
+    </Flex>
+  )
+  return (
+    <Box
+      fontSize="12px"
+      w="315px"
+      h="100%"
+      css={{ borderRight: "1px solid #ddd", overflowY: "auto" }}
+    >
+      {buttons}
+      {map(v => (
+        <Flex
+          h="50px"
+          bg={v.txid === mod?.id ? "#5137C5" : "white"}
+          fontSize="12px"
+          p={4}
+          direction="column"
+          justify="center"
+          onClick={() => g._setModule(v.txid)}
+          css={{
+            borderBottom: "1px solid #ddd",
+            cursor: "pointer",
+            _hover: { opacity: 0.75 },
+          }}
+        >
+          <Box
+            fontWeight="bold"
+            color={v.txid !== mod?.id ? "#5137C5" : "#ddd"}
+          >
+            {v.name}
+          </Box>
+          <Box fontSize="10px" color={v.txid !== mod?.id ? "#222" : "#ddd"}>
+            {v.txid}
+          </Box>
+        </Flex>
+      ))(modules)}
+    </Box>
+  )
+}