feat: start record from a block

src/components/newtab/workflow/editor/EditorLocalCtxMenu.vue

@@ -37,6 +37,7 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  isteam: Boolean,
   packageIo: Boolean,
   isPackage: Boolean,
 });
@@ -45,6 +46,7 @@ const emit = defineEmits([
   'paste',
   'group',
   'ungroup',
+  'recording',
   'saveBlock',
   'duplicate',
   'packageIo',
@@ -109,6 +111,11 @@ const menuItems = {
     event: () => emit('duplicate', ctxData),
     shortcut: getShortcut('editor:duplicate-block').readable,
   },
+  startRecording: {
+    id: 'startRecording',
+    name: 'Record from here',
+    event: () => emit('recording', ctxData),
+  },
   setAsInput: {
     id: 'setAsInput',
     name: 'Set as block input',
@@ -166,19 +173,19 @@ onMounted(() => {
       position: { clientX: event.clientX, clientY: event.clientY },
     };
 
-    if (
-      props.isPackage &&
-      props.packageIo &&
-      event.target.closest('[data-handleid]')
-    ) {
+    if (!props.isTeam && event.target.closest('[data-handleid]')) {
       const { handleid, nodeid } = event.target.dataset;
 
       currCtxData.nodeId = nodeid;
       currCtxData.handleId = handleid;
 
-      items.unshift(
-        event.target.classList.contains('source') ? 'setAsOutput' : 'setAsInput'
-      );
+      const isOutput = event.target.classList.contains('source');
+
+      if (props.isPackage && props.packageIo) {
+        items.unshift(isOutput ? 'setAsOutput' : 'setAsInput');
+      } else if (isOutput) {
+        items.splice(2, 0, 'startRecording');
+      }
     }
 
     showCtxMenu(items, event);

src/newtab/pages/Recording.vue

@@ -202,6 +202,7 @@ async function stopRecording() {
         await workflowStore.insert({
           drawflow,
           name: state.name,
+          description: state.description ?? '',
         });
       }
     }
@@ -220,7 +221,13 @@ async function stopRecording() {
 
     state.isGenerating = false;
 
-    router.push('/');
+    if (state.workflowId) {
+      router.replace(
+        `/workflows/${state.workflowId}?blockId=${state.connectFrom.id}`
+      );
+    } else {
+      router.replace('/');
+    }
   } catch (error) {
     state.isGenerating = false;
     console.error(error);

src/newtab/pages/workflows/[id].vue

@@ -216,14 +216,16 @@
             v-if="editor"
             :editor="editor"
             :is-package="isPackage"
+            :is-team="isTeamWorkflow"
             :package-io="workflow.settings?.asBlock"
             @group="groupBlocks"
             @ungroup="ungroupBlocks"
+            @packageIo="addPackageIO"
+            @recording="startRecording"
             @copy="copySelectedElements"
             @paste="pasteCopiedElements"
             @saveBlock="initBlockFolder"
             @duplicate="duplicateElements"
-            @packageIo="addPackageIO"
           />
         </ui-tab-panel>
         <ui-tab-panel value="logs" class="mt-24 container">
@@ -319,6 +321,7 @@ import dbStorage from '@/db/storage';
 import DroppedNode from '@/utils/editor/DroppedNode';
 import EditorCommands from '@/utils/editor/EditorCommands';
 import convertWorkflowData from '@/utils/convertWorkflowData';
+import startRecordWorkflow from '@/newtab/utils/startRecordWorkflow';
 import extractAutocopmleteData from '@/utils/editor/editorAutocomplete';
 import WorkflowShare from '@/components/newtab/workflow/WorkflowShare.vue';
 import WorkflowEditor from '@/components/newtab/workflow/WorkflowEditor.vue';
@@ -669,6 +672,25 @@ const onEdgesChange = debounce((changes) => {
 
 let nodeTargetHandle = null;
 
+function startRecording({ nodeId, handleId }) {
+  if (state.dataChanged) {
+    alert('Make sure to save the workflow before starting recording');
+    return;
+  }
+
+  const options = {
+    workflowId,
+    name: workflow.value.name,
+    connectFrom: {
+      id: nodeId,
+      output: handleId,
+    },
+  };
+  startRecordWorkflow(options).then(() => {
+    state.dataChanged = false;
+    router.replace('/recording');
+  });
+}
 function onClickEditor({ target }) {
   const targetClass = target.classList;
   const isHandle = targetClass.contains('vue-flow__handle');