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

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

@@ -0,0 +1,108 @@
+import { Box, Button, Flex, Heading, Text } from "@chakra-ui/react";
+import mermaid from "mermaid";
+import { useOurTheme } from "../theme";
+import { formatFlow } from "../helpers/formatters";
+import { useEffect, useRef, useState } from "react";
+import { Flow, Slot, Stack } from "../types";
+import { NoActiveFlow } from "./NoActiveFlow";
+
+interface Props {
+  stackFrame?: Stack;
+  flows: Flow[];
+  slots: Slot[];
+  stepTrail?: string[];
+}
+
+export const DiagramFlow = ({ stackFrame, stepTrail, flows, slots }: Props) => {
+  const { rasaSpace } = useOurTheme();
+  const mermaidRef = useRef<HTMLPreElement>(null);
+  const [text, setText] = useState<string>("");
+  const flow = flows.find(({ id }) => id === stackFrame?.flow_id)
+
+  const config = {
+    startOnLoad: true,
+    logLevel: 'info',
+    flowchart: {
+      useMaxWidth: false,
+    },
+  };
+
+  useEffect(() => {
+    mermaid.mermaidAPI.initialize(config);
+  }, []);
+
+  useEffect(() => {
+    if (!text) return;
+    // mermaid needs to be reloaded every time the text changes but a data-processed
+    // attribute prevents it. We need to remove it each time `text` changes
+    mermaidRef.current?.removeAttribute("data-processed");
+    mermaid.contentLoaded();
+
+    setTimeout(() => {
+      const active = document.querySelectorAll(".active")[0];
+      if (active) {
+        active.scrollIntoView({ behavior: "smooth"});
+      }
+    }, 0);
+  }, [text]);
+
+  useEffect(() => {
+    setText(formatFlow(slots, stackFrame, flow, stepTrail));
+  }, [text, flow, slots, stackFrame]);
+
+  const handleRestartConversation = () => {
+    // unset the sender id from the query parameters
+    const url = new URL(window.location.href);
+    url.searchParams.delete("sender");
+    window.history.pushState(null, "", url.toString());
+    location.reload();
+  };
+
+  const scrollSx = {
+    height: "100%",
+    overflow: "auto",
+    width: "100%",
+    textAlign: "center",
+    flexDirection: "column",
+  };
+  const preSx = {
+    svg: {
+      margin: "0 auto",
+    },
+  };
+
+  return (
+    <Flex direction="column" height="100%">
+      <Heading size="lg">
+        Flow
+        {flow ? (
+          <Text as="span" fontWeight="normal">
+            {":"} {flow.id}
+          </Text>
+        ) : null}
+      </Heading>
+      <Box flexGrow={1} my={rasaSpace[1]} overflow="hidden">
+        <Flex sx={scrollSx}>
+          {text ? (
+            <Box
+              as="pre"
+              ref={mermaidRef}
+              className="mermaid"
+              sx={preSx}
+              id="mermaid"
+            >
+              {text}
+            </Box>
+          ) : (
+            <NoActiveFlow />
+          )}
+        </Flex>
+      </Box>
+      <Flex justifyContent="space-between" alignItems="flex-end">
+        <Button variant="outline" size="sm" onClick={handleRestartConversation}>
+          New conversation
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,187 @@
+import {
+  Box,
+  Button,
+  Flex,
+  FlexProps,
+  HStack,
+  TabList,
+  TabPanel,
+  TabPanels,
+  TabProps,
+  Tabs,
+  useColorModeValue,
+  useTab,
+  useToast,
+} from "@chakra-ui/react";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import { useOurTheme } from "../theme";
+import { Event, Slot } from "../types";
+import { formatTestCases } from "../helpers/formatters";
+import { useCopyToClipboard } from "usehooks-ts";
+import { useEffect } from "react";
+import { FullscreenButton } from "./FullscreenButton";
+import { SlotTable, Slots } from "./Slots";
+
+interface Props extends FlexProps {
+  rasaChatSessionId?: string;
+  events: Event[];
+  story: string;
+  slots: Slot[];
+}
+
+export const DialougeInformation = ({
+  sx,
+  rasaChatSessionId = "-",
+  events,
+  story,
+  slots,
+  ...props
+}: Props) => {
+  const toast = useToast();
+  const { rasaSpace, rasaFontSizes } = useOurTheme();
+  const [copiedText, copyToClipboard] = useCopyToClipboard();
+
+  const containerSx = {
+    ...sx,
+    p: 0,
+    flexDirection: "column",
+  };
+  const tabsSx = {
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+  };
+  const tabListSx = {
+    px: rasaSpace[1],
+    py: rasaSpace[0.5],
+    borderBottom: "1px solid",
+    borderColor: useColorModeValue("neutral.400", "neutral.400"),
+  };
+  const tabPanelSx = {
+    height: "100%",
+    overflow: "hidden",
+    padding: rasaSpace[0.5],
+    position: "relative",
+  };
+  const overflowBox = {
+    height: "100%",
+    overflow: "auto",
+    padding: rasaSpace[0.5],
+  };
+  const highlighterSx = {
+    background: useColorModeValue("neutral.50", "neutral.50"),
+    fontSize: rasaFontSizes.sm,
+    letterSpacing: "0",
+  };
+  const buttonsProps = {
+    position: "absolute",
+    bg: useColorModeValue("neutral.50", "neutral.50"),
+    right: rasaSpace[1],
+    bottom: rasaSpace[1],
+  };
+
+  useEffect(() => {
+    if (toast.isActive("copy-to-clipboard") || !copiedText) return;
+    toast({
+      id: "copy-to-clipboard",
+      title: "Text copied to clipboard",
+      status: "success",
+      duration: 2000,
+      isClosable: true,
+    });
+  }, [copiedText, toast]);
+
+  const testCases = formatTestCases(events, rasaChatSessionId);
+
+  return (
+    <Flex sx={containerSx} {...props}>
+      <Tabs
+        sx={tabsSx}
+        size="sm"
+        variant="solid-rounded"
+        colorScheme="rasaPurple"
+      >
+        <TabList sx={tabListSx}>
+          <CustomTab>Slots</CustomTab>
+          <CustomTab>End-2-end test</CustomTab>
+          <CustomTab>Tracker state</CustomTab>
+        </TabList>
+        <TabPanels height="100%" overflow="hidden">
+          <TabPanel sx={tabPanelSx}>
+            <Box sx={overflowBox}>
+              <Slots slots={slots} />
+            </Box>
+            <HStack spacing={rasaSpace[0.5]} sx={buttonsProps}>
+              <FullscreenButton title="Slots">
+                <SlotTable slots={slots} />
+              </FullscreenButton>
+            </HStack>
+          </TabPanel>
+          <TabPanel sx={tabPanelSx}>
+            <Box sx={overflowBox}>
+              <SyntaxHighlighter customStyle={highlighterSx}>
+                {testCases}
+              </SyntaxHighlighter>
+            </Box>
+
+            <HStack spacing={rasaSpace[0.5]} sx={buttonsProps}>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => copyToClipboard(testCases)}
+              >
+                Copy
+              </Button>
+              <FullscreenButton title="End-2-end test">
+                <SyntaxHighlighter customStyle={highlighterSx}>
+                  {testCases}
+                </SyntaxHighlighter>
+              </FullscreenButton>
+            </HStack>
+          </TabPanel>
+          <TabPanel sx={tabPanelSx}>
+            <Box sx={overflowBox}>
+              <SyntaxHighlighter customStyle={highlighterSx}>
+                {story}
+              </SyntaxHighlighter>
+            </Box>
+            <HStack spacing={rasaSpace[0.5]} sx={buttonsProps}>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => copyToClipboard(story)}
+              >
+                Copy
+              </Button>
+              <FullscreenButton title="Tracker state">
+                <SyntaxHighlighter customStyle={highlighterSx}>
+                  {story}
+                </SyntaxHighlighter>
+              </FullscreenButton>
+            </HStack>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </Flex>
+  );
+};
+
+const CustomTab = (props: TabProps) => {
+  const { rasaRadii } = useOurTheme();
+  const tabProps = useTab(props);
+  const isSelected = !!tabProps["aria-selected"];
+  const variant = isSelected ? "solidRasa" : "ghost";
+  const selectedColor = useColorModeValue("neutral.50", "neutral.50");
+  const unselectedColor = useColorModeValue("neutral.900", "neutral.900");
+
+  const buttonSx = {
+    borderRadius: rasaRadii.full,
+    color: isSelected ? selectedColor : unselectedColor,
+  };
+
+  return (
+    <Button sx={buttonSx} variant={variant} {...tabProps} size="sm">
+      {tabProps.children}
+    </Button>
+  );
+};

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

@@ -0,0 +1,136 @@
+import {
+  Box,
+  FlexProps,
+  Heading,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Text,
+  useColorModeValue,
+  Flex,
+  Tooltip,
+} from "@chakra-ui/react";
+import { useOurTheme } from "../theme";
+import { Stack } from "../types";
+import { shouldShowTooltip } from "../helpers/utils";
+
+interface Props extends FlexProps {
+  stack: Stack[];
+  active?: Stack;
+  onItemClick?: (stack: Stack) => void;
+}
+
+function StackRow({
+  stack,
+  highlighted,
+  selectable,
+  onItemClick,
+}: {
+  stack: Stack;
+  highlighted?: boolean;
+  selectable?: boolean;
+  onItemClick?: (stack: Stack) => void;
+}) {
+  // use pointy hand cursor when hovering over a row
+  const clickableTrSx = {
+    _hover: {
+      cursor: "pointer",
+    },
+  };
+
+  const highlightedTrSx = {
+    td: {
+      bg: useColorModeValue("warning.50", "warning.50"),
+    },
+    _last: {
+      td: {
+        border: "none",
+      },
+    },
+  };
+
+  return (
+    <Tr
+      sx={highlighted ? highlightedTrSx : selectable ? clickableTrSx : undefined}
+      onClick={() => onItemClick?.(stack)}
+    >
+      <Td>
+        <Tooltip label={`${stack.flow_id} (${stack.frame_id})`} hasArrow>
+          <Text noOfLines={1}>{stack.flow_id}</Text>
+        </Tooltip>
+      </Td>
+      <Td>
+        {shouldShowTooltip(stack.step_id) ? (
+          <Tooltip label={stack.step_id} hasArrow>
+            <Text noOfLines={1}>{stack.step_id}</Text>
+          </Tooltip>
+        ) : (
+          <Text noOfLines={1}>{stack.step_id}</Text>
+        )}
+      </Td>
+    </Tr>
+  );
+}
+
+export const DialogueStack = ({
+  sx,
+  stack,
+  active,
+  onItemClick,
+  ...props
+}: Props) => {
+  const { rasaSpace } = useOurTheme();
+
+  const containerSx = {
+    ...sx,
+    pr: 0,
+    pb: 0,
+    flexDirection: "column",
+  };
+  const overflowBox = {
+    height: "100%",
+    overflow: "auto",
+    pr: rasaSpace[1],
+    pb: rasaSpace[0.5],
+  };
+
+  return (
+    <Flex sx={containerSx} {...props}>
+      <Flex>
+        <Heading size="lg" mb={rasaSpace[0.5]}>
+          History
+        </Heading>
+        <Text ml={rasaSpace[0.25]}>({stack.length} flows)</Text>
+      </Flex>
+      <Box sx={overflowBox}>
+        <Table width="100%" layout="fixed">
+          <Thead>
+            <Tr>
+              <Th>Flow</Th>
+              <Th width="40%">Step ID</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {stack.length > 0 &&
+              [...stack]
+                .reverse()
+                .map((stack) => (
+                  <StackRow
+                    stack={stack}
+                    highlighted={stack.frame_id == active?.frame_id}
+                    onItemClick={onItemClick}
+                    selectable={true}
+                  />
+                ))}
+            {stack.length === 0 && (
+              <StackRow stack={{ frame_id: "-", flow_id: "-", step_id: "-", ended: false }} />
+            )}
+          </Tbody>
+        </Table>
+      </Box>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,16 @@
+import { Box, BoxProps, useColorModeValue } from "@chakra-ui/react";
+
+export const ExpandIcon = (props: BoxProps) => {
+  return (
+    <Box
+      as="svg"
+      xmlns="http://www.w3.org/2000/svg"
+      height="1em"
+      viewBox="0 0 448 512"
+      fill={useColorModeValue("rasaPurple.500", "rasaPurple.500")}
+      {...props}
+    >
+      <path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zm32 320c0-17.7-14.3-32-32-32S0 334.3 0 352v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64v-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32h-96zm128 320c0-17.7-14.3-32-32-32s-32 14.3-32 32v64h-64c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32v-96z"></path>
+    </Box>
+  );
+};

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

@@ -0,0 +1,45 @@
+import {
+  IconButton,
+  IconButtonProps,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Tooltip,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { ExpandIcon } from "./ExpandIcon";
+
+interface Props extends Omit<IconButtonProps, "aria-label"> {
+  title: string;
+}
+
+export const FullscreenButton = ({ title, children, ...props }: Props) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <Tooltip label="See in full screen" hasArrow>
+        <IconButton
+          size="sm"
+          variant="outline"
+          icon={<ExpandIcon />}
+          {...props}
+          aria-label="Full screen"
+          onClick={onOpen}
+        />
+      </Tooltip>
+
+      <Modal isOpen={isOpen} onClose={onClose} size="xl">
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{title}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>{children}</ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};

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

@@ -0,0 +1,22 @@
+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
+        speed="1s"
+        emptyColor={useColorModeValue("neutral.500", "neutral.500")}
+        color={useColorModeValue("rasaPurple.800", "rasaPurple.800")}
+        size="lg"
+        mb={rasaSpace[1]}
+      />
+      <Text fontSize="lg">{text}</Text>
+        {isVoice ? <Button onClick={async () => await createAudioConnection(window.location.href)}>Go</Button> : null}
+    </Center>
+  );
+};

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

@@ -0,0 +1,21 @@
+import { Center, CenterProps, Text, useColorModeValue } from "@chakra-ui/react";
+import { useOurTheme } from "../theme";
+import { SaraDiagrams } from "./SaraDiagrams";
+
+export const NoActiveFlow = (props: CenterProps) => {
+  const { rasaSpace, rasaFontSizes } = useOurTheme();
+  const textColor = useColorModeValue("neutral.700", "neutral.700");
+
+  return (
+    <Center height={"100%"} flexDirection="column" {...props}>
+      <SaraDiagrams mb={rasaSpace[1]} size={220} />
+      <Text as={"b"} fontSize={rasaFontSizes.lg} mb={rasaSpace[0.5]}>
+        No flow is currently active
+      </Text>
+      <Text maxW="21.25rem" color={textColor}>
+        Type a message to your assistant in the chat window on the right to
+        activate one
+      </Text>
+    </Center>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { Box, BoxProps } from "@chakra-ui/react";
+
+export const RasaLogo = (props: BoxProps) => {
+  return (
+    <Box
+      as="svg"
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="41"
+      height="51"
+      fill="none"
+      viewBox="0 0 41 51"
+    >
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M34.041 10.59V7.508H21.385v12.847h3.037v-3.867h6.582v3.854h3.037v-9.763.013zm-3.037 2.827h-6.582V10.59h6.582v2.826zM19.36 29.74V35.52H6.956v-3.083h9.366V30.64H6.956v-7.965H19.36v3.083H9.994v1.798h9.366v2.184zM34.041 25.75v-3.084H21.385v12.847h3.037v-3.867h6.582V35.5h3.037v-9.764.013zm-3.037 2.826h-6.582v-2.827h6.582v2.827z"
+        clipRule="evenodd"
+      ></path>
+      <path
+        fill="#fff"
+        d="M36.826 4.689v33.578h-5.248v5.724l-9.487-5.318-.744-.417H4.179V4.69h32.654-.007zm3.298-3.34H.881v40.258h19.618l14.368 8.054v-8.054h5.25V1.349h.007z"
+      ></path>
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M15.287 15.464l3.888-1.436.185-.074V7.515H6.956v.257l-.028 12.59h3.038V17.43l2.278-.838 3.417 3.77h3.752l-4.126-4.897zM9.97 14.15v-3.55h6.351V11.8l-6.351 2.348z"
+        clipRule="evenodd"
+      ></path>
+    </Box>
+  );
+};