rasa-pro 3.9.18__py3-none-any.whl

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

@@ -0,0 +1,240 @@
+import { rasaColors } from "../theme/base/colors";
+import type { Event, Flow, Slot, Stack } from "../types";
+
+export function formatSlots(slots: { [key: string]: unknown }) {
+  if (!slots) {
+    return [];
+  }
+
+  return Object.entries(slots)
+    .filter(
+      (slotDuple) =>
+        slotDuple[0] !== "dialogue_stack" &&
+        slotDuple[0] !== "flow_hashes" &&
+        slotDuple[1] != null
+    )
+    .map((slotDuple) => ({ name: slotDuple[0], value: slotDuple[1] }));
+}
+
+export const formatTestCases = (events: Event[], sessionId: string) => {
+  let testCases = `test_cases:
+  - test_case: ${sessionId}
+    steps:`;
+
+  const steps = events
+    .map((event) => {
+      const escapedText = JSON.stringify(event.text);
+      if (event.event === "user") {
+        return `    - user: ${escapedText}`;
+      } else if (event.event === "bot") {
+        return `${
+          event.metadata?.utter_action
+            ? `    - utter: ${event.metadata.utter_action}`
+            : `    - bot: ${escapedText}`
+        }`;
+      }
+    })
+    .filter(Boolean);
+
+  if (steps.length === 0) {
+    testCases = `${testCases} []`;
+  } else {
+    testCases = `${testCases}
+${steps.join("\n")}`;
+  }
+
+  return testCases;
+};
+
+function hashCode(str: string) {
+  var hash = 0,
+    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 |= 0; // Convert to 32bit integer
+  }
+  return hash;
+};
+
+function mermaidIdForTitle(title: string) {
+  return `id${hashCode(title)}`
+};
+
+const encodeDoubleQuotes = (str: string) =>
+  /**
+   * Transforms all " characters of a string into html codes.
+   */
+  str.replace(/"/g, `#34;`);
+
+
+export const formatFlow = (
+  slots: Slot[],
+  currentStack?: Stack,
+  flow?: Flow,
+  activeStep?: string
+) => {
+  if (!flow) {
+    return "";
+  }
+
+  const mermaidText = [
+    `flowchart TD
+classDef collect stroke-width:1px
+classDef action fill:#FBFCFD,stroke:#A0B8CF
+classDef link fill:#f43
+classDef slot fill:#e8f3db,stroke:#c5e1a5
+classDef endstep fill:#ccc,stroke:#444
+classDef active stroke:${rasaColors.rasaOrange[400]},stroke-width:3px,fill:${rasaColors.warning[50]}
+`,
+  ];
+
+  try {
+    const text = renderStepSequence(
+      flow.steps,
+      slots,
+      currentStack,
+      activeStep
+    );
+    mermaidText.push(text);
+    return mermaidText.join("");
+  } catch (e) {
+    return `${mermaidText}\nA["Something went wrong!"]\nB["${e}"]`;
+  }
+};
+
+function truncate(str: string, limit = 35) {
+  // if a string is too long, use an ellipsis
+  if (str.length > limit) {
+    return str.substring(0, limit) + "...";
+  }
+  return str;
+}
+
+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\.|}}/);
+  if (parsedField.length === 1) {
+    return parsedField[0];
+  }
+
+  const stackField = parsedField[1];
+
+  // @ts-expect-error `stack[stackField]` doesn't necessary exists this might return `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
+  if (parsedField[2] && parsedField[2] !== "") {
+    return `${parsedField[0]}${stackValue}${parsedField[2]}`;
+  }
+
+  return `${parsedField[0]}${stackValue}`;
+}
+
+function renderStepSequence(
+  steps: Flow["steps"],
+  slots: Slot[],
+  currentStack?: Stack,
+  activeStep?: string
+) {
+  let hasUsedEndStep = false;
+  let mermaidTextFragment = "";
+  steps.forEach((step) => {
+    const stepId = parseFieldUsingStack(step.id, currentStack);
+    const mermaidId = mermaidIdForTitle(stepId);
+
+    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`;
+    }
+
+    if (step.action) {
+      mermaidTextFragment += `${mermaidId}["${encodeDoubleQuotes(truncate(
+        parseFieldUsingStack(step.action, currentStack)
+      ))}"]:::action\n`;
+    }
+
+    if (step.link) {
+      mermaidTextFragment += `${mermaidId}["\uD83D\uDD17 ${parseFieldUsingStack(
+        step.link,
+        currentStack
+      )}"]:::link\n`;
+    }
+
+    if (step.set_slots) {
+      mermaidTextFragment += `${mermaidId}["✍️ ${encodeDoubleQuotes(stepId)}"]:::slot\n`;
+    }
+
+    if (activeStep && stepId === activeStep) {
+      mermaidTextFragment += `class ${mermaidId} active\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") { 
+        hasUsedEndStep = true;
+      }
+    }
+
+    // if next is an array, then it is a list of conditions
+    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") { 
+            hasUsedEndStep = true;
+          }
+        } else if (condition.then) {
+          mermaidTextFragment += `${mermaidId} -->|"${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
+          );
+        }
+
+        // @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") {
+          // @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") { 
+            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 += 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
+          );
+        }
+      });
+    }
+  });
+  if (hasUsedEndStep){
+    mermaidTextFragment += `${mermaidIdForTitle("END")}["🏁 END"]:::endstep\n`;
+  }
+  return mermaidTextFragment;
+}

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

@@ -0,0 +1,42 @@
+import { SelectedStack, Stack } from "../types";
+
+export const shouldShowTooltip = (text: string) => {
+  const textLength = text.length;
+
+  if (textLength > 10 && textLength < 89) {
+    return true;
+  }
+
+  return false;
+};
+
+export const updatedActiveFrame = (previous: SelectedStack | undefined, updatedStack: Stack[]) => {
+  // 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) {
+    const updatedFrame = updatedStack
+      .slice()
+      .reverse()
+      .find((frame) => !frame.flow_id?.startsWith("pattern_"));
+    if(updatedFrame !== undefined) {
+      return {
+        stack: updatedFrame,
+        isUserSelected: false,
+      };
+    } else {
+      return undefined;
+    }
+  } else {
+    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;
+}