@motiadev/workbench 0.7.1-beta.132 → 0.7.2-beta.133

package/dist/middleware.d.ts

@@ -1,2 +1,2 @@
 import type { Express } from 'express';
-export declare const applyMiddleware: (app: Express, port: number) => Promise<void>;
+export declare const applyMiddleware: (app: Express, port: number, workbenchBase?: string) => Promise<void>;

package/dist/middleware.js

@@ -35,10 +35,11 @@ const reoPlugin = () => {
         },
     };
 };
-const applyMiddleware = async (app, port) => {
+const applyMiddleware = async (app, port, workbenchBase = '') => {
     const vite = await (0, vite_1.createServer)({
         appType: 'spa',
         root: __dirname,
+        base: workbenchBase,
         server: {
             middlewareMode: true,
             allowedHosts: true,
@@ -54,14 +55,17 @@ const applyMiddleware = async (app, port) => {
             },
         },
         resolve: {
-            alias: { '@': path_1.default.resolve(__dirname, './src') },
+            alias: {
+                '@': path_1.default.resolve(__dirname, './src'),
+                '@/assets': path_1.default.resolve(__dirname, './src/assets'),
+            },
         },
         plugins: [(0, plugin_react_1.default)(), processCwdPlugin(), reoPlugin()],
+        assetsInclude: ['**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.gif', '**/*.svg', '**/*.ico', '**/*.webp', '**/*.avif'],
     });
-    app.use(vite.middlewares);
-    app.use('*', async (req, res, next) => {
+    app.use(workbenchBase, vite.middlewares);
+    app.use(`${workbenchBase}/*`, async (req, res, next) => {
         const url = req.originalUrl;
-        console.log('[UI] Request', { url });
         try {
             const index = fs_1.default.readFileSync(path_1.default.resolve(__dirname, 'index.html'), 'utf-8');
             const html = await vite.transformIndexHtml(url, index);

package/dist/src/App.js

@@ -12,7 +12,6 @@ import { LogsPage } from './components/logs/logs-page';
 import { TracesPage } from './components/observability/traces-page';
 import { APP_SIDEBAR_CONTAINER_ID } from './components/sidebar/sidebar';
 import { StatesPage } from './components/states/states-page';
-import { Tutorial } from './components/tutorial/tutorial';
 import { useTabsStore } from './stores/use-tabs-store';
 var TabLocation;
 (function (TabLocation) {
@@ -53,5 +52,5 @@ export const App = () => {
                             },
                         ] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
     }
-    return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen", children: [_jsx("div", { className: "col-span-2", children: _jsx(Header, {}) }), _jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsxs(CollapsiblePanelGroup, { autoSaveId: "app-panel", direction: "vertical", className: "gap-1 h-full", "aria-label": "Workbench panels", children: [_jsxs(CollapsiblePanel, { id: "top-panel", variant: 'tabs', defaultTab: tab.top, onTabChange: onTabChange(TabLocation.TOP), header: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "flow", "data-testid": "flows-link", children: _jsx(FlowTabMenuItem, {}) }), _jsxs(TabsTrigger, { value: "endpoint", "data-testid": "endpoints-link", className: "cursor-pointer", children: [_jsx(Link2, {}), "Endpoint"] })] }), children: [_jsx(TabsContent, { value: "flow", className: "h-full", asChild: true, children: _jsx(ReactFlowProvider, { children: _jsx(FlowPage, {}) }) }), _jsx(TabsContent, { value: "endpoint", asChild: true, children: _jsx(EndpointsPage, {}) })] }), _jsxs(CollapsiblePanel, { id: "bottom-panel", variant: 'tabs', defaultTab: tab.bottom, onTabChange: onTabChange(TabLocation.BOTTOM), header: _jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "tracing", "data-testid": "traces-link", className: "cursor-pointer", children: [_jsx(GanttChart, {}), " Tracing"] }), _jsxs(TabsTrigger, { value: "logs", "data-testid": "logs-link", className: "cursor-pointer", children: [_jsx(LogsIcon, {}), "Logs"] }), _jsxs(TabsTrigger, { value: "states", "data-testid": "states-link", className: "cursor-pointer", children: [_jsx(File, {}), "States"] })] }), children: [_jsx(TabsContent, { value: "tracing", className: "max-h-fit", asChild: true, children: _jsx(TracesPage, {}) }), _jsx(TabsContent, { value: "logs", asChild: true, children: _jsx(LogsPage, {}) }), _jsx(TabsContent, { value: "states", asChild: true, children: _jsx(StatesPage, {}) })] })] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID }), _jsx(Tutorial, {})] }));
+    return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen", children: [_jsx("div", { className: "col-span-2", children: _jsx(Header, {}) }), _jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsxs(CollapsiblePanelGroup, { autoSaveId: "app-panel", direction: "vertical", className: "gap-1 h-full", "aria-label": "Workbench panels", children: [_jsxs(CollapsiblePanel, { id: "top-panel", variant: 'tabs', defaultTab: tab.top, onTabChange: onTabChange(TabLocation.TOP), header: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "flow", "data-testid": "flows-link", children: _jsx(FlowTabMenuItem, {}) }), _jsxs(TabsTrigger, { value: "endpoint", "data-testid": "endpoints-link", className: "cursor-pointer", children: [_jsx(Link2, {}), "Endpoint"] })] }), children: [_jsx(TabsContent, { value: "flow", className: "h-full", asChild: true, children: _jsx(ReactFlowProvider, { children: _jsx(FlowPage, {}) }) }), _jsx(TabsContent, { value: "endpoint", asChild: true, children: _jsx(EndpointsPage, {}) })] }), _jsxs(CollapsiblePanel, { id: "bottom-panel", variant: 'tabs', defaultTab: tab.bottom, onTabChange: onTabChange(TabLocation.BOTTOM), header: _jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "tracing", "data-testid": "traces-link", className: "cursor-pointer", children: [_jsx(GanttChart, {}), " Tracing"] }), _jsxs(TabsTrigger, { value: "logs", "data-testid": "logs-link", className: "cursor-pointer", children: [_jsx(LogsIcon, {}), "Logs"] }), _jsxs(TabsTrigger, { value: "states", "data-testid": "states-link", className: "cursor-pointer", children: [_jsx(File, {}), "States"] })] }), children: [_jsx(TabsContent, { value: "tracing", className: "max-h-fit", asChild: true, children: _jsx(TracesPage, {}) }), _jsx(TabsContent, { value: "logs", asChild: true, children: _jsx(LogsPage, {}) }), _jsx(TabsContent, { value: "states", asChild: true, children: _jsx(StatesPage, {}) })] })] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
 };

package/dist/src/components/endpoints/hooks/use-state-stream.d.ts

@@ -1,6 +1,6 @@
 export declare const useStateStream: (object: Record<string, any> | undefined) => {
     data: {};
-    originalData: {
+    originalData: any[] | {
         [x: string]: any;
     };
     isStreamed: boolean;

package/dist/src/components/endpoints/hooks/use-state-stream.js

@@ -2,7 +2,7 @@ import { useStreamItem } from '@motiadev/stream-client-react';
 export const useStateStream = (object) => {
     const { __motia, ...rest } = object || {};
     const { data } = useStreamItem(__motia);
-    const originalData = rest || object;
+    const originalData = Array.isArray(object) ? object : rest || object;
     return {
         data: data || originalData,
         originalData,

package/dist/src/components/flow/hooks/use-get-flow-state.js

@@ -32,7 +32,6 @@ async function importFlow(flow, flowConfig) {
             return;
         }
         try {
-            console.log(path);
             const module = await import(/* @vite-ignore */ `/@fs/${path}`);
             const component = module.Node ?? module.default;
             nodeComponentCache.set(path, component);
@@ -113,7 +112,6 @@ export const useGetFlowState = (flow, flowConfig) => {
                 return acc;
             }, {});
             if (!isEqual(steps, lastSavedConfigRef.current)) {
-                console.log('steps', steps, lastSavedConfigRef.current);
                 lastSavedConfigRef.current = steps;
                 const newConfig = { id: flowIdRef.current, config: steps };
                 try {

package/dist/src/components/header/header.js

@@ -1,17 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import motiaLogoDark from '@/assets/motia-dark.png';
+import motiaLogoLight from '@/assets/motia-light.png';
 import { useThemeStore } from '@/stores/use-theme-store';
-import { ThemeToggle } from '../ui/theme-toggle';
+import { useEffect, useState } from 'react';
+import { Tutorial } from '../tutorial/tutorial';
 import { TutorialButton } from '../tutorial/tutorial-button';
+import { ThemeToggle } from '../ui/theme-toggle';
 import { DeployButton } from './deploy-button';
 export const Header = () => {
     const [isDevMode, setIsDevMode] = useState(false);
+    const [isTutorialDisabled, setIsTutorialDisabled] = useState(true);
     const theme = useThemeStore((state) => state.theme);
+    const logo = theme === 'light' ? motiaLogoLight : motiaLogoDark;
     useEffect(() => {
         fetch('/__motia')
             .then((res) => res.json())
-            .then((data) => setIsDevMode(data.isDev))
+            .then((data) => {
+            setIsDevMode(data.isDev);
+            setIsTutorialDisabled(data.isTutorialDisabled);
+        })
             .catch((err) => console.error(err));
     }, []);
-    return (_jsxs("header", { className: "min-h-16 px-4 gap-4 flex items-center bg-default text-default-foreground border-b", children: [_jsx("img", { src: `/motia-${theme}.png`, className: "h-5", id: "logo-icon", "data-testid": "logo-icon" }), _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {}), isDevMode && _jsx(TutorialButton, {}), isDevMode && _jsx(DeployButton, {})] }));
+    return (_jsxs("header", { className: "min-h-16 px-4 gap-4 flex items-center bg-default text-default-foreground border-b", children: [_jsx("img", { src: logo, className: "h-5", id: "logo-icon", "data-testid": "logo-icon" }), _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {}), isDevMode && !isTutorialDisabled && _jsx(TutorialButton, {}), isDevMode && _jsx(DeployButton, {}), !isTutorialDisabled && _jsx(Tutorial, {})] }));
 };

package/dist/src/components/states/hooks/states-hooks.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 export const useGetStateItems = () => {
     const [items, setItems] = useState([]);
     useEffect(() => {
-        fetch('/motia/state')
+        fetch('/__motia/state')
             .then(async (res) => {
             if (res.ok) {
                 return res.json();

package/dist/src/components/states/state-editor.js

@@ -24,7 +24,7 @@ export const StateEditor = ({ state }) => {
         try {
             setIsRequestLoading(true);
             setSaveStatus('idle');
-            const response = await fetch('/motia/state', {
+            const response = await fetch('/__motia/state', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',

package/dist/src/publicComponents/base-node/base-node.js

@@ -12,7 +12,7 @@ export const BaseNode = ({ title, variant, children, disableSourceHandle, disabl
     const [content, setContent] = useState(null);
     const [features, setFeatures] = useState([]);
     const fetchContent = useCallback(async () => {
-        const response = await fetch(`/step/${data.id}`);
+        const response = await fetch(`/__motia/step/${data.id}`);
         const responseData = await response.json();
         setContent(responseData.content);
         setFeatures(responseData.features);

package/dist/tailwind.config.js

@@ -4,6 +4,6 @@ module.exports = {
   content: [
     path.resolve(__dirname, './index.html'),
     path.resolve(__dirname, './src/**/*.{ts,tsx,js,jsx}'),
-    path.resolve(process.cwd(), './steps/**/*.tsx'),
+    path.resolve(process.cwd(), './steps/**/*.{tsx,jsx}'),
   ],
 }