Feat: files field support for profile cloud #1541

functions/src/publicCloudQueries.ts

@@ -7,6 +7,24 @@ const intechstudioApiKey = defineSecret("X_INTECHSTUDIO_KEY");
 admin.initializeApp();
 const db = admin.firestore();
 
+const publicProfileFields = [
+  "id",
+  "modifiedAt",
+  "createdAt",
+  "name",
+  "description",
+  "type",
+  "version",
+  "configType",
+  "configs",
+  "owner",
+  "virtualPath",
+  "temporaryGraphPath",
+  "displayName",
+  "access",
+  "public",
+] as const;
+
 // Helper function to validate API key
 function validateApiKey(
   req: Request,
@@ -40,6 +58,7 @@ export const readAllProfiles = onRequest(
     }
 
     db.collection("configs")
+      .select(...publicProfileFields)
       .where("public", "==", true)
       .get()
       .then((snapshot) => {
@@ -66,6 +85,7 @@ export const readUserProfiles = onRequest(
     }
 
     db.collection("configs")
+      .select(...publicProfileFields)
       .where("owner", "==", userId)
       .where("public", "==", true)
       .get()
@@ -91,6 +111,7 @@ export const readSingleProfile = onRequest(
     console.log(profileId);
 
     db.collection("configs")
+      .select(...publicProfileFields)
       .where("id", "==", profileId)
       .where("public", "==", true)
       .get()

package.json

@@ -37,7 +37,7 @@
   "type": "module",
   "dependencies": {
     "@intechstudio/grid-protocol": "1.20250305.1735",
-    "@intechstudio/grid-uikit": "^1.20260206.1447",
+    "@intechstudio/grid-uikit": "^1.20260626.1305",
     "@melt-ui/svelte": "^0.86.6",
     "firebase": "^12.2.1",
     "marked": "^12.0.2",

src/lib/schemas.ts

@@ -2,6 +2,14 @@ import { ElementType, ModuleType } from "@intechstudio/grid-protocol";
 import { Timestamp } from "firebase/firestore";
 import { z } from "zod";
 
+export const ConfigFileSchema = z.object({
+  name: z.string(),
+  content: z.string(),
+  mimeType: z.string().optional(),
+});
+
+export type ConfigFile = z.infer<typeof ConfigFileSchema>;
+
 export const BaseConfigSchema = z.object({
   id: z.string(),
   modifiedAt: z.coerce.date().default(new Date()),
@@ -27,6 +35,7 @@ export const BaseConfigSchema = z.object({
   virtualPath: z.string().optional(),
   temporaryGraphPath: z.string().optional(),
   displayName: z.string().optional(),
+  files: z.array(ConfigFileSchema).optional(),
 });
 
 export type BaseConfig = z.infer<typeof BaseConfigSchema>;

src/routes/ConfigCardDisplay.svelte

@@ -165,7 +165,6 @@
           });
         }}
       />
-
       <BlockRow>
         <span>Folder:</span>
         <DataInput
@@ -181,6 +180,38 @@
           }}
         />
       </BlockRow>
+      {#if data.files && data.files.length > 0}
+        <div class="files-scroll">
+          <table class="files-table">
+            <thead>
+              <tr>
+                <th>Page files for File Manager</th>
+                <th style="text-align: right;">Size</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each data.files as file}
+                <tr>
+                  <td>
+                    <div class="accessibility-actions">
+                      <SvgIcon
+                        fill="var(--foreground-muted)"
+                        iconPath="file"
+                        width={14}
+                        height={14}
+                      />
+                      <span>{file.name}</span>
+                    </div>
+                  </td>
+                  <td class="size-cell">
+                    {new TextEncoder().encode(file.content).length}b
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {/if}
     </BlockColumn>
     <div style="color: var(--foreground-muted)" class="description-container">
       <ConfigDescription
@@ -264,4 +295,39 @@
     align-items: center;
     justify-content: center;
   }
+
+  .files-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: inherit;
+  }
+
+  .files-scroll {
+    max-height: calc(4 * 2rem + 2rem); /* header + 4 rows before scrolling */
+    overflow-y: auto;
+  }
+
+  .files-table th {
+    text-align: left;
+    padding: 0.25rem 0.5rem;
+    color: var(--foreground-muted);
+    font-weight: normal;
+    position: sticky;
+    top: 0;
+    background: var(--background);
+  }
+
+  .files-table td {
+    padding: 0.25rem 0.5rem;
+  }
+
+  .files-table thead tr {
+    border-bottom: 1px solid gray;
+  }
+
+  .size-cell {
+    text-align: right;
+    white-space: nowrap;
+    color: var(--foreground-muted);
+  }
 </style>

src/routes/EditorLayout.svelte

@@ -154,6 +154,11 @@
       });
       configResponse.data.name = name;
 
+      console.log(
+        "[WCPC] This is what we got from editor",
+        configResponse.data,
+      );
+
       const config = BaseConfigSchema.parse(configResponse.data);
       config.createdAt = new Date();
       const cm = get(config_manager);
@@ -207,6 +212,7 @@
         type: editorConfig.type,
         version: editorConfig.version,
         configType: editorConfig.configType,
+        files: editorConfig?.files,
       };
 
       if (newConfig.type !== config.type) {

vite.postbuild.ts

@@ -6,6 +6,7 @@ export function notifyEditorAfterBuildPlugin(): PluginOption {
     name: "postbuild-notify-editor",
     closeBundle: () =>
       new Promise<void>((resolve) => {
+        console.log("notify start");
         if (
           process.env.WEB_COMPONENT_NAME &&
           process.env.WEB_COMPONENT_NAME != "profile-cloud-dev"
@@ -19,6 +20,7 @@ export function notifyEditorAfterBuildPlugin(): PluginOption {
         }, 3000);
         let ws = new WebSocket("ws://localhost:9000");
         ws.on("open", () => {
+          console.log("Websocket message sent!");
           ws.send(
             JSON.stringify({
               type: "developer-package",