rasa-pro 3.12.0.dev1__py3-none-any.whl

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

@@ -0,0 +1,127 @@
+import { SelectedStack, Stack, Event } from "../types";
+import { immutableJSONPatch} from 'immutable-json-patch'
+
+export const shouldShowTooltip = (text: string) => {
+  const textLength = text.length;
+
+  if (textLength > 10 && textLength < 89) {
+    return true;
+  }
+
+  return false;
+};
+
+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
+
+  // reset previously active stack frame, if it was not user selected
+  if(!previous?.isUserSelected){
+    previous = undefined
+  }
+
+  const activeFrame = updatedStack.find(
+    (stackFrame) => stackFrame.frame_id === previous?.stack.frame_id
+  );
+  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;
+  }
+};

rasa/core/channels/inspector/src/main.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { App } from "./App.tsx";
+import { ChakraProvider } from "@chakra-ui/react";
+import { theme } from "./theme";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <ChakraProvider theme={theme}>
+      <App />
+    </ChakraProvider>
+  </React.StrictMode>
+);

rasa/core/channels/inspector/src/theme/Button/Button.ts

@@ -0,0 +1,29 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme";
+import { mode } from "@chakra-ui/theme-tools";
+
+export const Button: ComponentStyleConfig = {
+  defaultProps: {
+    variant: "solidRasa",
+  },
+  baseStyle: () => ({
+    letterSpacing: "wide",
+  }),
+  sizes: {
+    md: ({ theme }) => ({
+      fontSize: theme.rasaFontSizes.md,
+      borderRadius: theme.rasaRadii.normal,
+    }),
+  },
+  variants: {
+    solidRasa: (props) => {
+      const { theme } = props;
+      return {
+        ...theme.components.Button.variants.solid(props),
+        backgroundColor: mode(
+          theme.colors.rasaPurple[800],
+          theme.colors.rasaPurple[800]
+        )(props),
+      };
+    },
+  },
+};

rasa/core/channels/inspector/src/theme/Heading/Heading.ts

@@ -0,0 +1,31 @@
+import { StyleConfig } from "@chakra-ui/theme-tools";
+
+export const Heading: StyleConfig = {
+  baseStyle: {
+    fontWeight: "bold",
+    letterSpacing: "wide",
+  },
+  sizes: {
+    sm: ({ theme }) => ({
+      fontSize: theme.rasaFontSizes.sm,
+      lineHeight: "short",
+      margin: 0,
+    }),
+    md: ({ theme }) => ({
+      fontSize: theme.rasaFontSizes.md,
+      margin: 0,
+    }),
+    lg: ({ theme }) => ({
+      fontSize: theme.rasaFontSizes.lg,
+      margin: 0,
+    }),
+    xl: ({ theme }) => ({
+      fontSize: theme.rasaFontSizes.xl,
+      lineHeight: "100%",
+      margin: 0,
+    }),
+  },
+  defaultProps: {
+    size: "md",
+  },
+};

rasa/core/channels/inspector/src/theme/Input/Input.ts

@@ -0,0 +1,27 @@
+import { StyleConfig } from "@chakra-ui/theme-tools";
+import { mode } from "@chakra-ui/theme-tools";
+
+export const Input: StyleConfig = {
+  baseStyle: (props) => ({
+    field: {
+      "::-webkit-calendar-picker-indicator": {
+        display: "none",
+      },
+      ":disabled": {
+        cursor: "not-allowed",
+        opacity: "1 !important",
+        backgroundColor: mode(
+          props.theme.colors.neutral[300],
+          props.theme.colors.neutral[300]
+        )(props),
+      },
+    },
+  }),
+  sizes: {
+    md: ({ theme }) => ({
+      field: {
+        fontSize: theme.rasaFontSizes.md,
+      },
+    }),
+  },
+};

rasa/core/channels/inspector/src/theme/Link/Link.ts

@@ -0,0 +1,10 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme";
+import { mode } from "@chakra-ui/theme-tools";
+
+export const Link: ComponentStyleConfig = {
+  baseStyle: (props) => ({
+    color: mode("rasaPurple.700", "rasaPurple.700")(props),
+    fontWeight: "bold",
+    textDecoration: "underline",
+  }),
+};

rasa/core/channels/inspector/src/theme/Modal/Modal.ts

@@ -0,0 +1,47 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme";
+import { mode } from "@chakra-ui/theme-tools";
+
+export const Modal: ComponentStyleConfig = {
+  baseStyle: (props) => {
+    const { theme } = props;
+
+    return {
+      dialog: {
+        borderRadius: theme.rasaRadii.large,
+        fontSize: theme.rasaFontSizes.md,
+        width: "75%",
+        height: "85%",
+        margin: "auto",
+      },
+      dialogContainer: {
+        zIndex: theme.zIndices.modal,
+        "> section": {
+          maxW: "100%",
+        },
+      },
+      overlay: {
+        zIndex: theme.zIndices.modalOverlay,
+      },
+      header: {
+        borderBottom: "1px solid",
+        borderColor: mode("neutral.300", "neutral.300")(props),
+        px: theme.rasaSpace[2],
+        pt: theme.rasaSpace[2],
+        pb: theme.rasaSpace[1.5],
+        // make sure the header does not overlap with the close button
+        pr: theme.rasaSpace[3],
+        lineHeight: 1,
+        fontSize: theme.rasaFontSizes.lg,
+      },
+      body: {
+        px: theme.rasaSpace[2],
+        py: theme.rasaSpace[1.5],
+        overflow: "auto",
+      },
+      closeButton: {
+        right: theme.rasaSpace[1],
+        top: theme.rasaSpace[1],
+      },
+    };
+  },
+};

rasa/core/channels/inspector/src/theme/Table/Table.tsx

@@ -0,0 +1,38 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import type { ComponentStyleConfig } from "@chakra-ui/theme";
+
+export const Table: ComponentStyleConfig = {
+  baseStyle: (props: StyleFunctionProps) => ({
+    table: {
+      thead: {
+        bgColor: mode("neutral.50", "neutral.50")(props),
+        position: "sticky",
+        top: 0,
+        zIndex: props.theme.zIndices.docked,
+      },
+      th: {
+        color: mode("neutral.900", "neutral.900")(props),
+        fontSize: props.theme.rasaFontSizes.md,
+        py: props.theme.rasaSpace[0.5],
+        pl: 0,
+        pr: props.theme.rasaSpace[0.5],
+        border: "none",
+        textTransform: "none",
+      },
+      tr: {
+        td: {
+          borderColor: props.theme.colors.neutral[400],
+        },
+        _last: {
+          td: { borderBottom: "none" },
+        },
+      },
+      td: {
+        py: props.theme.rasaSpace[0.5],
+        pl: 0,
+        pr: props.theme.rasaSpace[0.5],
+        bgColor: mode("neutral.50", "neutral.50")(props),
+      },
+    },
+  }),
+};

rasa/core/channels/inspector/src/theme/Tooltip/Tooltip.ts

@@ -0,0 +1,12 @@
+import { StyleConfig } from "@chakra-ui/theme-tools";
+
+export const Tooltip: StyleConfig = {
+  baseStyle: ({ theme }) => ({
+    letterSpacing: "wide",
+    borderRadius: theme.rasaRadii.normal,
+    padding: theme.rasaSpace[0.5],
+    textAlign: "center",
+    bgColor: theme.colors.neutral[800],
+    "--tooltip-bg": theme.colors.neutral[800],
+  }),
+};

rasa/core/channels/inspector/src/theme/base/breakpoints.ts

@@ -0,0 +1,8 @@
+export const breakpoints = {
+  sm: "30em",
+  md: "48em",
+  lg: "62em",
+  xl: "80em",
+  "2xl": "102em",
+};
+export type Breakpoints = typeof breakpoints;

rasa/core/channels/inspector/src/theme/base/colors.ts

@@ -0,0 +1,88 @@
+export const rasaColors = {
+  rasaPurple: {
+    900: "#4A3DD4",
+    800: "#574AE2",
+    700: "#6C5EF9",
+    600: "#7F73F9",
+    500: "#9288F8",
+    400: "#A59DF8",
+    300: "#B7B2F7",
+    200: "#CAC7F7",
+    100: "#DDDCF6",
+    50: "#F2F2F9",
+  },
+  success: {
+    900: "#258652",
+    800: "#2B8F5A",
+    700: "#329861",
+    600: "#38A169",
+    500: "#63B764",
+    400: "#8FCC60",
+    300: "#BAE25B",
+    200: "#258652",
+    100: "#DDF1AD",
+    50: "#EEF8D6",
+  },
+  warning: {
+    900: "#806908",
+    200: "#FEF1DE",
+    50: "#FFF8E0",
+  },
+  alert: {
+    900: "#972422",
+    800: "#A72E2C",
+    700: "#B63835",
+    600: "#C6423F",
+    500: "#D14946",
+    400: "#DD4F4C",
+    300: "#E85653",
+    200: "#ED7B79",
+    100: "#F3A19F",
+    50: "#F8C6C5",
+  },
+  neutral: {
+    900: "#252D40",
+    800: "#2C3951",
+    700: "#6B7694",
+    600: "#9DA6BE",
+    500: "#CED5E7",
+    400: "#DDE2EF",
+    300: "#ECEFF7",
+    200: "#F2F4FA",
+    100: "#F6F7FB",
+    50: "#FFFFFF",
+  },
+  rasaCyan: {
+    800: "#2C9793",
+  },
+  rasaGreen: {
+    800: "#2B8F5A",
+  },
+  rasaBlue: {
+    900: "#294BA0",
+  },
+  rasaOrange: {
+    900: "#B05600",
+    600: "#EB7D15",
+    400: "#F8941A",
+  },
+  rasaPink: {
+    900: "#DA6BE0",
+  },
+  tokenHighlight: {
+    0: { background: "#EEF8D6", underline: "#BAE25B" },
+    1: { background: "#FEEDFF", underline: "#FBB6FF" },
+    2: { background: "#DEFBFA", underline: "#87E5E2" },
+    3: { background: "#FFF8E0", underline: "#FFD121" },
+    4: { background: "#FEF1DE", underline: "#FF9F1C" },
+    5: { background: "#D9E9FF", underline: "#446FF8" },
+    6: { background: "#F8C6C5", underline: "#D14946" },
+    7: { background: "#DDDCF6", underline: "#574AE2" },
+    8: { background: "#DEFBDF", underline: "#89E587" },
+    9: { background: "#EFE0FF", underline: "#B168FF" },
+    10: { background: "#DFF4FF", underline: "#56C5FF" },
+    11: { background: "#F4F5C3", underline: "#BCBF3C" },
+  },
+};
+
+export type RasaColors = typeof rasaColors;

rasa/core/channels/inspector/src/theme/base/fonts/fontFaces.css

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: "Lato";
+  src: url("./lato-v14-latin/lato-v14-latin-regular.woff2"),
+    url("./lato-v14-latin/lato-v14-latin-regular.woff"),
+    url("./lato-v14-latin/lato-v14-latin-regular.ttf"),
+    url("./lato-v14-latin/lato-v14-latin-regular.svg");
+  font-style: "normal";
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Lato";
+  src: url("./lato-v14-latin/lato-v14-latin-700.woff2"),
+    url("./lato-v14-latin/lato-v14-latin-700.woff"),
+    url("./lato-v14-latin/lato-v14-latin-700.ttf"),
+    url("./lato-v14-latin/lato-v14-latin-700.svg");
+  font-style: "normal";
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  src: url("./ibm-plex-mono-v4-latin/ibm-plex-mono-v4-latin-regular.woff2"),
+    url("./ibm-plex-mono-v4-latin/ibm-plex-mono-v4-latin-regular.woff"),
+    url("./ibm-plex-mono-v4-latin/ibm-plex-mono-v4-latin-regular.ttf"),
+    url("./ibm-plex-mono-v4-latin/ibm-plex-mono-v4-latin-regular.svg");
+  font-style: "normal";
+  font-weight: 400;
+}