feat: implement more fs APIs

reasonify-headless/api/fs.py

@@ -5,8 +5,9 @@
 
 from bridge import with_toast
 from js import window
-from pyodide.ffi import create_once_callable, create_proxy
-from utils.fs import NativeFS, mount
+from pyodide.ffi import JsBuffer, create_once_callable, create_proxy
+from utils.fs import NativeFS, mount, unmount
+from utils.to_js import to_js
 
 
 @cache
@@ -22,14 +23,15 @@ async def install_slugify():
 
 
 mounted: dict[str, NativeFS] = {}
+single_files = set[str]()
 
 
 @create_proxy
 async def mount_native_fs():
     install_promise = _install_slugify()
 
     handle = await window.showDirectoryPicker()
-    while await handle.requestPermission({"mode": "readwrite"}) != "granted":
+    while await handle.requestPermission(to_js({"mode": "readwrite"})) != "granted":
         pass
 
     await install_promise
@@ -45,6 +47,38 @@ async def mount_native_fs():
     return name
 
 
+async def add_single_files():
+    handles = await window.showOpenFilePicker(to_js({"multiple": True}))
+
+    names = []
+
+    for handle in handles:
+        path = root / handle.name
+        buffer: JsBuffer = await (await handle.getFile()).arrayBuffer()
+        with path.open("w") as f:
+            buffer.to_file(f)
+        single_files.add(str(path))
+        names.append(handle.name)
+
+    return to_js([handle.name for handle in handles])
+
+
+async def sync_all():
+    for name, fs in mounted.items():
+        await with_toast(f"syncing {Path(name).name}")(fs.syncfs)()
+
+
+def reset():
+    for path in single_files:
+        Path(path).unlink()
+    single_files.clear()
+
+    for path in mounted:
+        unmount(path)
+        Path(path).rmdir()
+    mounted.clear()
+
+
 root = Path("/workspace/mnt")
 root.mkdir(parents=True, exist_ok=True)
 chdir(root)

reasonify-headless/utils/to_js.py

@@ -0,0 +1,10 @@
+from typing import TYPE_CHECKING
+
+if TYPE_CHECKING:
+
+    def to_js[T](x: T) -> T: ...
+
+else:
+    from pyodide.ffi import to_js
+
+__all__ = ["to_js"]

src/lib/components/Chat.svelte

@@ -3,11 +3,11 @@
   import type { PythonError } from "pyodide/ffi";
 
   import { type Chain, initChain } from "../py";
-  import { clearApiCache } from "../py/api";
+  import { clearApiCache, getApi } from "../py/api";
   import Highlight from "./Highlight.svelte";
   import Markdown from "./Markdown.svelte";
   import { dev } from "$app/environment";
-  import { mount } from "$lib/py/fs";
+  import { addFiles, mount } from "$lib/py/fs";
   import { pyodideReady, reasonifyReady, startIconAnimation, stopIconAnimation } from "$lib/stores";
   import { toast } from "svelte-sonner";
 
@@ -101,18 +101,33 @@
       <div class="i-lucide-plane-takeoff" />
     </button>
     <button disabled={!$pyodideReady} on:click={async () => {
-      const name = await mount();
-      context.messages = [...messages, { role: "system", name: "info", content: `user mounted a directory: ./${name}` }];
+      const names = await addFiles();
+      context.messages = [...messages, { role: "system", name: "info", content: `user added ${names.length} files: ${(names.map(name => `./${name}`)).join(", ")}` }];
     }}>
       <div class="i-lucide-file-symlink" />
     </button>
+    {#if "showDirectoryPicker" in window}
+      <button disabled={!$pyodideReady} on:click={async () => {
+        const name = await mount();
+        context.messages = [...messages, { role: "system", name: "info", content: `user mounted a directory: ./${name}` }];
+      }}>
+        <div class="i-lucide-folder-symlink" />
+      </button>
+      <button disabled={!$pyodideReady} on:click={async () => {
+        const syncAll = getApi("api.fs.sync_all");
+        await syncAll();
+      }}>
+        <div class="i-lucide-hard-drive-download" />
+      </button>
+    {/if}
     {#if dev}
       <button disabled={refreshing} on:click={refresh}>
         <div class="i-lucide-refresh-cw" />
       </button>
     {/if}
     <button disabled={!messages.length || running} on:click={() => {
       context = { query: content };
+      getApi("api.fs.reset")();
     }}>
       <div class="i-lucide-circle-fading-plus" />
     </button>

src/lib/py/api.ts

@@ -2,7 +2,7 @@ import { py } from "./load";
 
 const cache = new Map<string, any>();
 
-export function getApi<T>(slug: string): T {
+export function getApi<T = () => any>(slug: string): T {
   if (cache.has(slug)) {
     return cache.get(slug) as T;
   } else {

src/lib/py/fs.ts

@@ -5,3 +5,8 @@ export async function mount(): Promise<string> {
   const mount = getApi<() => Promise<string>>("api.fs.mount_native_fs");
   return withToast("selecting a directory to mount", (name) => (`mounted ${name}`))(mount)();
 }
+
+export async function addFiles(): Promise<string[]> {
+  const mount = getApi<() => Promise<string[]>>("api.fs.add_single_files");
+  return withToast("selecting files to add to workspace", (names: string[]) => (names.length === 1 ? `added ${names[0]}` : `added ${names.length} files`))(mount)();
+}