rasa-pro 3.10.16__py3-none-any.whl → 3.11.0__py3-none-any.whl

rasa/core/channels/inspector/src/components/LoadingSpinner.tsx

@@ -1,9 +1,11 @@
-import { Center, Spinner, Text, useColorModeValue } from "@chakra-ui/react";
+import { Center, Spinner, Text, Button, useColorModeValue } from "@chakra-ui/react";
 import { useOurTheme } from "../theme";
+import {createAudioConnection} from "../helpers/audiostream.ts";
 
 export const LoadingSpinner = () => {
   const { rasaSpace } = useOurTheme();
-
+  const isVoice = window.location.href.includes("browser_audio");
+  const text = isVoice ? "Start a new conversation" : "Waiting for a new conversation"
   return (
     <Center height={"100vh"} flexDirection="column">
       <Spinner
@@ -13,7 +15,8 @@ export const LoadingSpinner = () => {
         size="lg"
         mb={rasaSpace[1]}
       />
-      <Text>Loading</Text>
+      <Text fontSize="lg">{text}</Text>
+        {isVoice ? <Button onClick={createAudioConnection}>Go</Button> : null}
     </Center>
   );
 };

rasa/core/channels/inspector/src/helpers/audiostream.ts

@@ -0,0 +1,165 @@
+const bufferSize = 4096
+const sampleRate = 8000
+const audioOptions = {
+  audio: {
+    echoCancellation: true,
+    noiseSuppression: true,
+    autoGainControl: true
+  }
+}
+
+const arrayBufferToBase64 = ( buffer: ArrayBuffer ): string => {
+    let binary = '';
+    const bytes = new Uint8Array( buffer );
+    const len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode( bytes[ i ] );
+    }
+    return window.btoa( binary );
+}
+
+const base64ToArrayBuffer = ( s: string ): ArrayBuffer => {
+    const binary_string =  window.atob(s);
+    const len = binary_string.length;
+    const bytes = new Uint8Array( len );
+    for (let i = 0; i < len; i++)        {
+        bytes[i] = binary_string.charCodeAt(i);
+    }
+    return bytes.buffer;
+}
+
+const floatToIntArray = (arr: Float32Array): Int32Array => {
+  // Convert Float Array [-1, 1] to full range int array
+  return Int32Array.from(arr, x => x * 0x7fffffff)
+}
+
+const intToFloatArray = (arr: Int32Array): Float32Array => {
+  return Float32Array.from(arr, x => (x / 0x7fffffff))
+}
+
+interface Mark {
+    id: string
+    bytesToGo: number
+}
+
+interface AudioQueue {
+  buffer: Float32Array;
+  marks: Array<Mark>
+  socket: WebSocket,
+  write: (newAudio: Float32Array) => void;
+  read: (nSamples: number) => Float32Array;
+  length: () => number;
+  addMarker: (id: string) => void;
+  reduceMarkers: (bytesRead: number) => void;
+  popMarkers: () => void;
+}
+
+
+const createAudioQueue = (socket: WebSocket) : AudioQueue => {
+  return {
+    buffer: new Float32Array(0),
+    marks: new Array<Mark>(),
+    socket,
+
+    write: function(newAudio: Float32Array) {
+      const currentQLength = this.buffer.length;
+      const newBuffer = new Float32Array(currentQLength + newAudio.length);
+      newBuffer.set(this.buffer, 0);
+      newBuffer.set(newAudio, currentQLength);
+      this.buffer = newBuffer;
+    },
+
+    read: function(nSamples: number) {
+      const samplesToPlay = this.buffer.subarray(0, nSamples);
+      this.buffer = this.buffer.subarray(nSamples, this.buffer.length);
+      this.reduceMarkers(samplesToPlay.length)
+      this.popMarkers()
+      return samplesToPlay;
+    },
+
+    length: function() {
+      return this.buffer.length;
+    },
+
+    addMarker: function(id: string) {
+        this.marks.push({id, bytesToGo: this.length()})
+    },
+
+    reduceMarkers: function(bytesRead: number) {
+        this.marks = this.marks.map((m) => {
+            return {id: m.id, bytesToGo: m.bytesToGo - bytesRead}
+        })
+    },
+
+    popMarkers: function() {
+        // marks are ordered
+        let popUpTo = 0;
+        while (popUpTo < this.marks.length) {
+            if (this.marks[popUpTo].bytesToGo <= 0) {
+                popUpTo += 1
+            } else {
+                break
+            }
+        }
+        const marksToPop = this.marks.slice(0, popUpTo)
+        this.marks = this.marks.slice(popUpTo, this.marks.length)
+        marksToPop.forEach((m) => {
+            this.socket.send(JSON.stringify({marker: m.id}))
+        })
+    }
+
+  };
+}
+
+const streamMicrophoneToServer = async (socket: WebSocket) => {
+  let audioStream = null;
+  const audioContext = new AudioContext({sampleRate});
+
+  try {
+    audioStream = await navigator.mediaDevices.getUserMedia(audioOptions);
+    const audioInput = audioContext.createMediaStreamSource(audioStream)
+    const sender = audioContext.createScriptProcessor(bufferSize, 1, 1)
+    sender.onaudioprocess = function(event) {
+      const message = JSON.stringify({
+        "audio": arrayBufferToBase64(floatToIntArray(event.inputBuffer.getChannelData(0)).buffer)
+      })
+      socket.send(message)
+    }
+    audioInput.connect(sender)
+    sender.connect(audioContext.destination)
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+const setupAudioPlayback = (socket: WebSocket): AudioQueue => {
+  const audioQueue = createAudioQueue(socket)
+  const silence = new Float32Array(bufferSize)
+  const audioOutputContext = new AudioContext({sampleRate})
+  const scriptNode = audioOutputContext.createScriptProcessor(bufferSize, 1, 1);
+  scriptNode.onaudioprocess = function(e) {
+    const audioData = audioQueue.length() ? audioQueue.read(bufferSize) : silence
+    e.outputBuffer.getChannelData(0).set(audioData);
+  }
+  scriptNode.connect(audioOutputContext.destination)
+  return audioQueue
+}
+
+const addDataToAudioQueue = (audioQueue: AudioQueue) => (message: MessageEvent<any>) => {
+    const data = JSON.parse(message.data.toString())
+    if (data["audio"]) {
+      const audioBytes = base64ToArrayBuffer(data["audio"])
+      const audioData = intToFloatArray(new Int32Array(audioBytes))
+      audioQueue.write(audioData);
+    } else if (data["marker"]) {
+        audioQueue.addMarker(data["marker"])
+    }
+}
+
+export async function createAudioConnection() {
+  const websocketURL  = "ws://localhost:5005/webhooks/browser_audio/websocket"
+  const socket = new WebSocket(websocketURL)
+  socket.onopen = async () => { await streamMicrophoneToServer(socket)}
+  const audioQueue = setupAudioPlayback(socket)
+  socket.onmessage = addDataToAudioQueue(audioQueue)
+}

rasa/core/channels/inspector/src/helpers/formatters.test.ts

@@ -75,6 +75,7 @@ describe("helpers", () => {
         {
           event: "user",
           text: "book a restaurant",
+          timestamp: "123",
         },
         {
           event: "bot",
@@ -82,18 +83,22 @@ describe("helpers", () => {
             utter_action: "utter_ask_book_restaurant_name_of_restaurant",
           },
           text: "What's the name of the restaurant you are interested in?",
+          timestamp: "124",
         },
         {
           event: "user",
           text: "simsim",
+          timestamp: "125",
         },
         {
           event: "bot",
           text: "How many people are we talking?",
+          timestamp: "126",
         },
         {
           event: "user",
           text: "100",
+          timestamp: "127",
         },
         {
           event: "bot",
@@ -101,6 +106,7 @@ describe("helpers", () => {
             utter_action: "utter_ask_book_restaurant_date",
           },
           text: "For which day do you want to book?",
+          timestamp: "128",
         },
       ];
       const result = formatTestCases(events, sessionId);
@@ -287,6 +293,7 @@ describe("helpers", () => {
           flow_id: "flow_id",
           step_id: "step_id",
           collect: fieldValue,
+          ended: false,
         })
       ).toEqual(fieldValue);
     });
@@ -299,6 +306,7 @@ describe("helpers", () => {
           frame_id: "frame_id",
           flow_id: "flow_id",
           step_id: "step_id",
+          ended: false,
         })
       ).toEqual(fieldValue);
     });
@@ -312,6 +320,7 @@ describe("helpers", () => {
           flow_id: "flow_id",
           step_id: "step_id",
           collect: fieldValue,
+          ended: false,
         })
       ).toEqual(`${fieldValue} is not null`);
     });
@@ -325,6 +334,7 @@ describe("helpers", () => {
           flow_id: "flow_id",
           step_id: "step_id",
           collect: fieldValue,
+          ended: false,
         })
       ).toEqual(`not ${fieldValue}`);
     });

rasa/core/channels/inspector/src/helpers/formatters.ts

@@ -48,19 +48,20 @@ ${steps.join("\n")}`;
 
 function hashCode(str: string) {
   var hash = 0,
-    i, chr;
+    i,
+    chr;
   if (str.length === 0) return hash;
   for (i = 0; i < str.length; i++) {
     chr = str.charCodeAt(i);
-    hash = ((hash << 5) - hash) + chr;
+    hash = (hash << 5) - hash + chr;
     hash |= 0; // Convert to 32bit integer
   }
   return hash;
-};
+}
 
 function mermaidIdForTitle(title: string) {
-  return `id${hashCode(title)}`
-};
+  return `id${hashCode(title)}`;
+}
 
 const encodeDoubleQuotes = (str: string) =>
   /**
@@ -68,13 +69,14 @@ const encodeDoubleQuotes = (str: string) =>
    */
   str.replace(/"/g, `#34;`);
 
-
 export const formatFlow = (
   slots: Slot[],
   currentStack?: Stack,
   flow?: Flow,
-  activeStep?: string
+  stepTrail?: string[]
 ) => {
+  const activeStep = currentStack?.step_id;
+
   if (!flow) {
     return "";
   }
@@ -86,18 +88,20 @@ classDef action fill:#FBFCFD,stroke:#A0B8CF
 classDef link fill:#f43
 classDef slot fill:#e8f3db,stroke:#c5e1a5
 classDef endstep fill:#ccc,stroke:#444
+classDef previous stroke:${rasaColors.rasaOrange[400]},stroke-width:1px
 classDef active stroke:${rasaColors.rasaOrange[400]},stroke-width:3px,fill:${rasaColors.warning[50]}
 `,
   ];
-
   try {
     const text = renderStepSequence(
       flow.steps,
       slots,
       currentStack,
-      activeStep
+      activeStep,
+      stepTrail
     );
     mermaidText.push(text);
+    mermaidText.push(colorDoubleEdges(mermaidText.join("")));
     return mermaidText.join("");
   } catch (e) {
     return `${mermaidText}\nA["Something went wrong!"]\nB["${e}"]`;
@@ -112,6 +116,30 @@ function truncate(str: string, limit = 35) {
   return str;
 }
 
+function colorDoubleEdges(mermaidText: string) {
+  // go through the lines of mermaid text. keep a counter counting edges
+  // ("-->"" or "==>"). if "==>" is found in a line, add the line number to
+  // a list.
+  const lines = mermaidText.split("\n");
+  const coloredEdges = [];
+  let edgeCounter = 0;
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].includes("-->")) {
+      edgeCounter++;
+    } else if (lines[i].includes("==>")) {
+      coloredEdges.push(edgeCounter);
+      edgeCounter++;
+    }
+  }
+  if(coloredEdges.length > 0) {
+    return `linkStyle ${coloredEdges.join(",")} stroke:${
+      rasaColors.rasaOrange[400]
+    }, ;\n`;
+  } else {
+    return "";
+  }
+}
+
 export function parseFieldUsingStack(name: string, stack?: Stack): string {
   // name might be in the `{{context.field_in_stack}}` format so we're stripping everything except the field in the stack name
   const parsedField = name.split(/{{context\.|}}/);
@@ -122,7 +150,7 @@ export function parseFieldUsingStack(name: string, stack?: Stack): string {
   const stackField = parsedField[1];
 
   // @ts-expect-error `stack[stackField]` doesn't necessary exists this might return `undefined`
-  const stackValue = stack ? stack[stackField]: undefined;
+  const stackValue = stack ? stack[stackField] : undefined;
 
   // name might also be in the `condition {{context.field_in_stack}} condition` format
   // so we want to keep that if there is any
@@ -133,11 +161,18 @@ export function parseFieldUsingStack(name: string, stack?: Stack): string {
   return `${parsedField[0]}${stackValue}`;
 }
 
+function arrowTypeFor(stepId: string, nextId: string, stepTrail?: string[]) {
+  return stepTrail?.includes(stepId) && stepTrail?.includes(nextId)
+    ? "==>"
+    : "-->";
+}
+
 function renderStepSequence(
   steps: Flow["steps"],
   slots: Slot[],
   currentStack?: Stack,
-  activeStep?: string
+  activeStep?: string,
+  stepTrail?: string[]
 ) {
   let hasUsedEndStep = false;
   let mermaidTextFragment = "";
@@ -147,16 +182,19 @@ function renderStepSequence(
 
     if (step.collect) {
       const slot = slots.find((slot) => slot.name === step.collect);
-      const slotValue = slot && typeof slot.value === "string" ? `"${encodeDoubleQuotes(truncate(slot.value))}"` : "💬";
-      mermaidTextFragment += `${mermaidId}["${encodeDoubleQuotes(truncate(
-        parseFieldUsingStack(step.collect, currentStack)
-      ))}\n${slotValue}"]:::collect\n`;
+      const slotValue =
+        slot && typeof slot.value === "string"
+          ? `"${encodeDoubleQuotes(truncate(slot.value))}"`
+          : "💬";
+      mermaidTextFragment += `${mermaidId}["${encodeDoubleQuotes(
+        truncate(parseFieldUsingStack(step.collect, currentStack))
+      )}\n${slotValue}"]:::collect\n`;
     }
 
     if (step.action) {
-      mermaidTextFragment += `${mermaidId}["${encodeDoubleQuotes(truncate(
-        parseFieldUsingStack(step.action, currentStack)
-      ))}"]:::action\n`;
+      mermaidTextFragment += `${mermaidId}["${encodeDoubleQuotes(
+        truncate(parseFieldUsingStack(step.action, currentStack))
+      )}"]:::action\n`;
     }
 
     if (step.link) {
@@ -167,20 +205,27 @@ function renderStepSequence(
     }
 
     if (step.set_slots) {
-      mermaidTextFragment += `${mermaidId}["✍️ ${encodeDoubleQuotes(stepId)}"]:::slot\n`;
+      mermaidTextFragment += `${mermaidId}["✍️ ${encodeDoubleQuotes(
+        stepId
+      )}"]:::slot\n`;
     }
 
     if (activeStep && stepId === activeStep) {
       mermaidTextFragment += `class ${mermaidId} active\n`;
+    } else if (stepTrail?.includes(stepId)) {
+      mermaidTextFragment += `class ${mermaidId} previous\n`;
     }
 
     // if next is an id, then it is a link
     if (step.next && typeof step.next === "string") {
-      mermaidTextFragment += `${mermaidId} --> ${mermaidIdForTitle(parseFieldUsingStack(
-        step.next,
-        currentStack
-      ))}\n`;
-      if(step.next == "END") { 
+      const nextId = parseFieldUsingStack(step.next, currentStack);
+
+      mermaidTextFragment += `${mermaidId} ${arrowTypeFor(
+        stepId,
+        nextId,
+        stepTrail
+      )} ${mermaidIdForTitle(nextId)}\n`;
+      if (step.next == "END") {
         hasUsedEndStep = true;
       }
     }
@@ -189,52 +234,73 @@ function renderStepSequence(
     if (step.next && Array.isArray(step.next)) {
       step.next.forEach((condition) => {
         if (condition.then && typeof condition.then === "string") {
-          mermaidTextFragment += `${mermaidId} -->|"${encodeDoubleQuotes(parseFieldUsingStack(
-            condition.if,
-            currentStack
-          ))}"| ${mermaidIdForTitle(condition.then)}\n`;
-          if(condition.then == "END") { 
+          mermaidTextFragment += `${mermaidId} ${arrowTypeFor(
+            stepId,
+            condition.then,
+            stepTrail
+          )}|"${encodeDoubleQuotes(
+            parseFieldUsingStack(condition.if, currentStack)
+          )}"| ${mermaidIdForTitle(condition.then)}\n`;
+          if (condition.then == "END") {
             hasUsedEndStep = true;
           }
         } else if (condition.then) {
-          mermaidTextFragment += `${mermaidId} -->|"${encodeDoubleQuotes(parseFieldUsingStack(
-            condition.if,
-            currentStack
-          ))}"| ${mermaidIdForTitle(condition.then[0].id)}\n`;
+          mermaidTextFragment += `${mermaidId} ${arrowTypeFor(
+            stepId,
+            condition.then[0].id,
+            stepTrail
+          )}|"${encodeDoubleQuotes(
+            parseFieldUsingStack(condition.if, currentStack)
+          )}"| ${mermaidIdForTitle(condition.then[0].id)}\n`;
           mermaidTextFragment += renderStepSequence(
             // @ts-expect-error Currently the param for renderStepSequence only accepts a Step, for further improvements we need to change the type to know that it can also be a then step
             condition.then,
             slots,
             currentStack,
-            activeStep
+            activeStep,
+            stepTrail
           );
         }
 
         // @ts-expect-error Currently the param for renderStepSequence only accepts a Step, for further improvements we need to change the type to know that it can also be a then step
         if (condition.else && typeof condition.else === "string") {
+          mermaidTextFragment += `${mermaidId} ${arrowTypeFor(
+            stepId,
+            // @ts-expect-error Currently the param for renderStepSequence only accepts a Step, for further improvements we need to change the type to know that it can also be a then step
+            condition.else,
+            stepTrail
+            // @ts-expect-error Currently the param for renderStepSequence only accepts a Step, for further improvements we need to change the type to know that it can also be a then step
+          )}|else| ${mermaidIdForTitle(condition.else)}\n`;
           // @ts-expect-error Currently the param for renderStepSequence only accepts a Step, for further improvements we need to change the type to know that it can also be a then step
-          mermaidTextFragment += `${mermaidId} -->|else| ${mermaidIdForTitle(condition.else)}\n`;
-          // @ts-expect-error Currently the param for renderStepSequence only accepts a Step, for further improvements we need to change the type to know that it can also be a then step
-          if(condition.else == "END") { 
+          if (condition.else == "END") {
             hasUsedEndStep = true;
           }
           // @ts-expect-error Currently the param for renderStepSequence only accepts a Step, for further improvements we need to change the type to know that it can also be a then step
         } else if (condition.else) {
-          // @ts-expect-error Currently the param for renderStepSequence only accepts a Step, for further improvements we need to change the type to know that it can also be a then step
-          mermaidTextFragment += `${mermaidId} -->|else| ${mermaidIdForTitle(condition.else[0].id)}\n`;
+          mermaidTextFragment += `${mermaidId} ${arrowTypeFor(
+            stepId,
+            // @ts-expect-error Currently the param for renderStepSequence only accepts a Step, for further improvements we need to change the type to know that it can also be a then step
+            condition.else[0].id,
+            stepTrail
+            // @ts-expect-error Currently the param for renderStepSequence only accepts a Step, for further improvements we need to change the type to know that it can also be a then step
+          )}|else| ${mermaidIdForTitle(condition.else[0].id)}\n`;
           mermaidTextFragment += renderStepSequence(
             // @ts-expect-error Currently the param for renderStepSequence only accepts a Step, for further improvements we need to change the type to know that it can also be a then step
             condition.else,
             slots,
             currentStack,
-            activeStep
+            activeStep,
+            stepTrail
           );
         }
       });
     }
   });
-  if (hasUsedEndStep){
+  if (hasUsedEndStep) {
     mermaidTextFragment += `${mermaidIdForTitle("END")}["🏁 END"]:::endstep\n`;
+    if (activeStep && "END" === activeStep) {
+      mermaidTextFragment += `class ${mermaidIdForTitle("END")} active\n`;
+    }
   }
   return mermaidTextFragment;
 }

rasa/core/channels/inspector/src/helpers/utils.ts

@@ -1,4 +1,5 @@
-import { SelectedStack, Stack } from "../types";
+import { SelectedStack, Stack, Event } from "../types";
+import { immutableJSONPatch} from 'immutable-json-patch'
 
 export const shouldShowTooltip = (text: string) => {
   const textLength = text.length;
@@ -10,7 +11,76 @@ export const shouldShowTooltip = (text: string) => {
   return false;
 };
 
-export const updatedActiveFrame = (previous: SelectedStack | undefined, updatedStack: Stack[]) => {
+export const createHistoricalStack = (activeStack: Stack [], events: Event[]): Stack[]  => {
+  let stackFrames = activeStack.map((frame) => ({
+    ...frame,
+    ended: false,
+  }));
+  // go through the events looking for flow_completed and append them to the stack
+  let historicalStack: Stack[] = [];
+  let pastStackFrames: Stack[] = [];
+  for (const event of events) {
+    if (event.event === "restart") {
+      historicalStack = [];
+      stackFrames = [];
+    } else if (event.event === "stack") {
+      let stackUpdate = JSON.parse(event.update || "");
+      historicalStack = immutableJSONPatch(historicalStack, stackUpdate)
+      for (const frame of historicalStack) {
+        if(!frame.flow_id){
+          // this is not a stack frame from the flow handler
+          continue;
+        }
+        // if the frame is already in stackFrames, skip it
+        if(stackFrames.find((f) => f.frame_id === frame.frame_id)) {
+          continue;
+        }
+        // if the frame is in pastStackFrames, update the step_id otherwise add it
+        const pastFrame = pastStackFrames.find((f) => f.frame_id === frame.frame_id)
+        if(pastFrame) {
+          pastFrame.step_id = frame.step_id;
+          continue;
+        }
+        pastStackFrames.push({...frame, ended: true});
+      }
+    }
+  }
+  // filter out pattern_collect_information frames
+  pastStackFrames = pastStackFrames.filter((frame) => frame.flow_id !== "pattern_collect_information");
+  return [...pastStackFrames, ...stackFrames];
+}
+
+export const flowStepTrail = (events: Event[]): Record<string, string[]> => {
+  let stack: Stack[] = [];
+  // mapping from flow id to the steps that were active in that flow
+  let activeSteps: { [key: string]: string[] } = {};
+  for (const event of events) {
+    if (event.event === "restart") {
+      stack = [];
+      activeSteps = {};
+    } else if (event.event === "stack") {
+      let stackUpdate = JSON.parse(event.update || "");
+      stack = immutableJSONPatch(stack, stackUpdate)
+      if (stack.length > 0) {
+        let topFrame = stack[stack.length - 1];
+        if (!topFrame.flow_id) {
+          // this is not a stack frame from the flow handler
+          continue;
+        }
+        if (!activeSteps[topFrame.flow_id] || topFrame.step_id === "START") {
+          activeSteps[topFrame.flow_id] = [];
+        }
+        if (!activeSteps[topFrame.flow_id].includes(topFrame.step_id)) {
+          activeSteps[topFrame.flow_id].push(topFrame.step_id)
+        }
+      }
+
+    }
+  }
+  return activeSteps;
+};
+
+export const updatedActiveFrame = (previous: SelectedStack | undefined, updatedStack: Stack[], events: Event[]) => {
   // try to find the currently active frame in the updated stack
   // if it isn't there anymore, we will show the first non-pattern frame
   // instead
@@ -23,20 +93,35 @@ export const updatedActiveFrame = (previous: SelectedStack | undefined, updatedS
   const activeFrame = updatedStack.find(
     (stackFrame) => stackFrame.frame_id === previous?.stack.frame_id
   );
-  if (!activeFrame) {
-    const updatedFrame = updatedStack
-      .slice()
-      .reverse()
-      .find((frame) => !frame.flow_id?.startsWith("pattern_"));
+  if (!activeFrame || activeFrame.ended) {
+    if (!updatedStack){
+      return undefined;
+    }
+    // iterate over the stack. select the first frame where the name does not
+    // contain "pattern" and that has not
+    // ended yet. If there is no such frame, select the topmost frame that has
+    // not ended yet. If there is no such frame, select the topmost frame.
+    const updatedFrame = updatedStack.slice().reverse().find(
+      (frame) =>
+        !frame.flow_id?.startsWith("pattern_") && !frame.ended
+    ) || updatedStack.slice().reverse().find(
+      (frame) => !frame.ended
+    ) || updatedStack[updatedStack.length - 1];
+
     if(updatedFrame !== undefined) {
       return {
         stack: updatedFrame,
         isUserSelected: false,
+        activatedSteps: flowStepTrail(events)[updatedFrame.flow_id] || [],
       };
     } else {
       return undefined;
     }
   } else {
+    if(previous){
+      previous.activatedSteps = flowStepTrail(events)[previous.stack.flow_id] || [];
+      previous.stack = activeFrame;
+    }
     return previous;
   }
 };