rasa-pro 3.13.0.dev3__py3-none-any.whl → 3.13.0.dev7__py3-none-any.whl

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

@@ -4,62 +4,63 @@ import {
   useBreakpointValue,
   useColorModeValue,
   useToast,
-} from "@chakra-ui/react";
-import { useEffect, useState } from "react";
-import axios from "axios";
-import { useOurTheme } from "./theme";
-import { Welcome } from "./components/Welcome";
-import { DialogueStack } from "./components/DialogueStack";
-import { DialougeInformation } from "./components/DialogueInformation";
-import { LoadingSpinner } from "./components/LoadingSpinner";
-import { DiagramFlow } from "./components/DiagramFlow";
-import { RecruitmentPanel } from "./components/RecruitmentPanel";
-import { formatSlots } from "./helpers/formatters";
-import { Slot, Stack, Event, Flow, SelectedStack, Tracker } from "./types";
+} from '@chakra-ui/react'
+import { useEffect, useState } from 'react'
+import axios from 'axios'
+import { useOurTheme } from './theme'
+import { Welcome } from './components/Welcome'
+import { DialogueStack } from './components/DialogueStack'
+import { DialougeInformation } from './components/DialogueInformation'
+import { LoadingSpinner } from './components/LoadingSpinner'
+import { DiagramFlow } from './components/DiagramFlow'
+import { RecruitmentPanel } from './components/RecruitmentPanel'
+import { formatSlots } from './helpers/formatters'
+import { Slot, Stack, Event, Flow, SelectedStack, Tracker } from './types'
 import {
   createHistoricalStack,
   flowStepTrail,
   updatedActiveFrame,
-} from "./helpers/utils";
-import queryString from "query-string";
-import { Chat } from "./components/Chat";
-import useWebSocket, { ReadyState } from "react-use-websocket";
+} from './helpers/utils'
+import queryString from 'query-string'
+import { Chat } from './components/Chat'
+import useWebSocket, { ReadyState } from 'react-use-websocket'
 
 export function App() {
-  const toast = useToast();
-  const { rasaSpace, rasaRadii } = useOurTheme();
-  const [rasaChatSessionId, setRasaChatSessionId] = useState<string>("");
-  const [flows, setFlows] = useState<Flow[]>([]);
-  const [slots, setSlots] = useState<Slot[]>([]);
-  const [events, setEvents] = useState<Event[]>([]);
-  const [story, setStory] = useState<string>("");
-  const [stack, setStack] = useState<Stack[]>([]);
-  const [frame, setFrame] = useState<SelectedStack | undefined>(undefined);
+  const toast = useToast()
+  const { rasaSpace, rasaRadii } = useOurTheme()
+  const [rasaChatSessionId, setRasaChatSessionId] = useState<string>('')
+  const [flows, setFlows] = useState<Flow[]>([])
+  const [slots, setSlots] = useState<Slot[]>([])
+  const [events, setEvents] = useState<Event[]>([])
+  const [story, setStory] = useState<string>('')
+  const [stack, setStack] = useState<Stack[]>([])
+  const [frame, setFrame] = useState<SelectedStack | undefined>(undefined)
 
   // State to control the visibility of the RecruitmentPanel
-  const [showRecruitmentPanel, setShowRecruitmentPanel] = useState(true);
+  const [showRecruitmentPanel, setShowRecruitmentPanel] = useState(true)
 
   // we only show the transcript if we are not on the socket io channel
   // on the socketio channel, we show the chat component instead
-  const shouldShowTranscript = !window.location.href.includes("socketio");
+  const shouldShowTranscript = !window.location.href.includes('socketio')
 
   const inspectWS = window.location.href
-    .replace("inspect.html", "tracker_stream")
-    .replace("http", "ws");
+    .replace('inspect.html', 'tracker_stream')
+    .replace('http', 'ws')
   const { sendJsonMessage, lastJsonMessage, readyState } =
     useWebSocket<Tracker>(inspectWS, {
       share: false,
       shouldReconnect: () => true,
-    });
+    })
+  const token = new URLSearchParams(window.location.search).get('token')
 
   useEffect(() => {
     if (readyState === ReadyState.OPEN && rasaChatSessionId) {
       sendJsonMessage({
-        action: "retrieve",
+        action: 'retrieve',
         sender_id: rasaChatSessionId,
-      });
+      })
     }
-  }, [readyState, sendJsonMessage, rasaChatSessionId]);
+  }, [readyState, sendJsonMessage, rasaChatSessionId])
 
   useEffect(() => {
     // if we are on a "dynamic" input channel where the user can chat on
@@ -67,75 +68,75 @@ export function App() {
     // support loading an existing conversation. therefore, we don't set
     // the sender id in the url and a reload of the page will start a new
     // conversation.
-    if(!shouldShowTranscript) return;
+    if (!shouldShowTranscript) return
 
-    const queryParameters = queryString.parse(window.location.search);
-    const urlSender = queryParameters.sender as string;
+    const queryParameters = queryString.parse(window.location.search)
+    const urlSender = queryParameters.sender as string
     if (urlSender && urlSender !== rasaChatSessionId) {
-      setRasaChatSessionId(urlSender);
+      setRasaChatSessionId(urlSender)
     } else if (!urlSender && rasaChatSessionId) {
       // update the sender query parameter
-      const url = new URL(window.location.href);
-      url.searchParams.set("sender", rasaChatSessionId);
-      window.history.pushState(null, "", url.toString());
+      const url = new URL(window.location.href)
+      url.searchParams.set('sender', rasaChatSessionId)
+      window.history.pushState(null, '', url.toString())
     }
-  }, [rasaChatSessionId, shouldShowTranscript]);
+  }, [rasaChatSessionId, shouldShowTranscript])
 
   useEffect(() => {
     axios
-      .get("/flows")
+      .get('/flows', { params: { token } })
       .then((response) => setFlows(response.data))
       .catch((error) => {
         // don't show a new toast if it's already active
-        if (toast.isActive("flows")) return;
+        if (toast.isActive('flows')) return
         toast({
-          id: "flows",
-          title: "Flows could not be retrieved",
-          description: error?.message || "An unknown error happened.",
-          status: "error",
+          id: 'flows',
+          title: 'Flows could not be retrieved',
+          description: error?.message || 'An unknown error happened.',
+          status: 'error',
           duration: 4000,
           isClosable: true,
-        });
-      });
-  }, [toast]);
+        })
+      })
+  }, [toast])
 
   function fetchStory() {
     axios
-      .get(`/conversations/${rasaChatSessionId}/story`)
+      .get(`/conversations/${rasaChatSessionId}/story`, { params: { token } })
       .then((response) => setStory(response.data))
       .catch((error) => {
         // don't show a new toast if it's already active
-        if (toast.isActive("story-error")) return;
+        if (toast.isActive('story-error')) return
         toast({
-          id: "story-error",
-          title: "Stories could not be retrieved",
-          description: error?.message || "An unknown error happened.",
-          status: "error",
+          id: 'story-error',
+          title: 'Stories could not be retrieved',
+          description: error?.message || 'An unknown error happened.',
+          status: 'error',
           duration: 4000,
           isClosable: true,
-        });
-      });
+        })
+      })
   }
 
   // Run when a new WebSocket message is received (lastJsonMessage)
   useEffect(() => {
     // if the tracker update that we received is for the current chat session,
     // update the tracker.
-    if (!lastJsonMessage) return;
+    if (!lastJsonMessage) return
     if (
       !rasaChatSessionId ||
       lastJsonMessage?.sender_id === rasaChatSessionId
     ) {
-      setSlots(formatSlots(lastJsonMessage.slots));
-      setEvents(lastJsonMessage.events);
+      setSlots(formatSlots(lastJsonMessage.slots))
+      setEvents(lastJsonMessage.events)
       const updatedStack = createHistoricalStack(
         lastJsonMessage.stack,
-        lastJsonMessage.events
-      );
-      setStack(updatedStack);
-      setFrame(updatedActiveFrame(frame, updatedStack, lastJsonMessage.events));
-      setRasaChatSessionId(lastJsonMessage.sender_id);
-      fetchStory();
+        lastJsonMessage.events,
+      )
+      setStack(updatedStack)
+      setFrame(updatedActiveFrame(frame, updatedStack, lastJsonMessage.events))
+      setRasaChatSessionId(lastJsonMessage.sender_id)
+      fetchStory()
     } else if (
       rasaChatSessionId &&
       lastJsonMessage.sender_id !== rasaChatSessionId
@@ -143,51 +144,52 @@ export function App() {
       // show a header link with the new sender the user can click a button to
       // switch to the new chat session. the alert should be dissmissable.
     }
-  }, [lastJsonMessage, rasaChatSessionId]);
+  }, [lastJsonMessage, rasaChatSessionId])
 
   const borderRadiusSx = {
     borderRadius: rasaRadii.normal,
-  };
+  }
   const gridTemplateColumns = useBreakpointValue({
-    base: "21rem minmax(20rem, auto) 21rem",
-    "2xl": "25rem auto 25rem",
-  });
+    base: '21rem minmax(20rem, auto) 21rem',
+    '2xl': '25rem auto 25rem',
+  })
   const gridSx = {
     gridTemplateColumns,
-    gridTemplateRows: "1fr",
+    gridTemplateRows: '1fr',
     gridColumnGap: rasaSpace[1],
-    height: "100vh",
+    height: '100vh',
     padding: rasaSpace[2],
-  };
+  }
   const boxSx = {
     ...borderRadiusSx,
     padding: rasaSpace[1],
-    bg: useColorModeValue("neutral.50", "neutral.50"),
-    overflow: "hidden",
-  };
+    bg: useColorModeValue('neutral.50', 'neutral.50'),
+    overflow: 'hidden',
+  }
   const leftColumnSx = {
-    height: "100%",
-    overflow: "hidden",
-    gridTemplateColumns: "1fr",
+    height: '100%',
+    overflow: 'hidden',
+    gridTemplateColumns: '1fr',
     gridTemplateRows: showRecruitmentPanel
-      ? "max-content max-content minmax(10rem, auto)"
-      : "max-content minmax(10rem, 17.5rem) minmax(10rem, auto)",
+      ? 'max-content max-content minmax(10rem, auto)'
+      : 'max-content minmax(10rem, 17.5rem) minmax(10rem, auto)',
     gridRowGap: rasaSpace[1],
-  };
+  }
 
   const onFrameSelected = (stack: Stack) => {
     setFrame({
       stack,
       activatedSteps: flowStepTrail(events)[stack.flow_id],
       isUserSelected: true,
-    });
-  };
+    })
+  }
 
   const handleCloseRecruitmentPanel = () => {
-    setShowRecruitmentPanel(false);
-  };
+    setShowRecruitmentPanel(false)
+  }
 
-  if (!rasaChatSessionId && !window.location.href.includes("socketio")) return <LoadingSpinner />;
+  if (!rasaChatSessionId && !window.location.href.includes('socketio'))
+    return <LoadingSpinner />
 
   return (
     <Grid sx={gridSx}>
@@ -226,5 +228,5 @@ export function App() {
         </GridItem>
       )}
     </Grid>
-  );
+  )
 }

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

@@ -1,72 +1,97 @@
-import { DeepChat } from "deep-chat-react";
-import { MessageContent } from "deep-chat/dist/types/messages";
-import { Flex, FlexProps } from "@chakra-ui/react";
-import { Command, Event } from "../types";
+import { DeepChat } from 'deep-chat-react'
+import { MessageContent } from 'deep-chat/dist/types/messages'
+import { Flex, FlexProps } from '@chakra-ui/react'
+import { Command, Event } from '../types'
 
 interface Props extends FlexProps {
-  events: Event[];
+  events: Event[]
 }
 
 export const Chat = ({ sx, events, ...props }: Props) => {
   const containerSx = {
     ...sx,
     p: 0,
-    flexDirection: "column",
-  };
+    flexDirection: 'column',
+  }
 
-  const maxHeight = document.documentElement.scrollHeight - 64;
+  const maxHeight = document.documentElement.scrollHeight - 64
   // 21 and 25 are the rem number we're using for the columns. We add 0.75rem for the padding
   // A potential improvement would be to add a onresize event for both width and height
-  let remReference = 21.75;
+  let remReference = 21.75
   if (document.documentElement.clientWidth > 1631) {
-    remReference = 25.75;
+    remReference = 25.75
   }
 
   const columnWidth =
     remReference *
-    parseFloat(getComputedStyle(document.documentElement).fontSize);
+    parseFloat(getComputedStyle(document.documentElement).fontSize)
 
   // function that maps a command dict to a human string to display in the chat
   const mapCommand = (command: Command) => {
-    let commandName = command.command;
-    if (commandName === "start flow") {
-      return `Start (${command.flow})`;
+    let commandName = command.command
+    if (commandName === 'start flow') {
+      return `Start (${command.flow})`
     }
-    if (commandName === "set slot") {
-      return `Set (${command.name} = ${command.value})`;
+    if (commandName === 'set slot') {
+      return `Set (${command.name} = ${command.value})`
     }
-    return commandName;
-  };
+    return commandName
+  }
 
   // collect user and bot messages
   const messages: MessageContent[] = events
-    .filter((event: Event) => event.event === "user" || event.event === "bot")
-    // @ts-expect-error 
+    .filter(
+      (event: Event) =>
+        event.event === 'user' ||
+        event.event === 'bot' ||
+        event.event === 'session_ended',
+    )
+    // @ts-expect-error
     .flatMap((event: Event) => {
-      if (event.event === "user") {
+      if (event.event === 'user') {
         let commands =
           event.parse_data?.commands?.map(
-            (command) => `<div>${mapCommand(command)}</div>`
-          ) || [];
+            (command) => `<div>${mapCommand(command)}</div>`,
+          ) || []
         return [
           {
             role: event.event,
-            text: event.text || "",
+            text: event.text || '',
+          },
+          {
+            role: 'system',
+            html: `<div>${commands.join('')}</div>`,
           },
+        ]
+      } else if (event.event === 'session_ended') {
+        return [
           {
-            role: "system",
-            html: `<div>${commands.join("")}</div>`,
+            role: 'system',
+            html: `<div>
+              session ended
+              <div style="margin-top: 8px;">
+                <button 
+                  onclick="(() => {
+                     window.restartConversation();
+                     return false;
+                   })()"
+                  style="background-color: transparent; border: 1px solid #ccc; border-radius: 4px; padding: 4px 12px; cursor: pointer; font-size: 14px;"
+                >
+                  Start a new conversation
+                </button>
+              </div>
+            </div>`,
           },
-        ];
+        ]
       } else {
         return [
           {
             role: event.event,
-            text: event.text || "",
+            text: event.text || '',
           },
-        ];
+        ]
       }
-    });
+    })
 
   return (
     <Flex sx={containerSx} {...props}>
@@ -75,15 +100,15 @@ export const Chat = ({ sx, events, ...props }: Props) => {
         textInput={{
           disabled: true,
         }}
-        inputAreaStyle={{ display: "none" }}
+        inputAreaStyle={{ display: 'none' }}
         messageStyles={{
           html: {
-            shared: { bubble: { backgroundColor: "unset", padding: "0px" } },
+            shared: { bubble: { backgroundColor: 'unset', padding: '0px' } },
           },
         }}
         style={{
-          borderRadius: "10px",
-          border: "none",
+          borderRadius: '10px',
+          border: 'none',
           width: columnWidth,
           height: maxHeight,
         }}
@@ -91,5 +116,5 @@ export const Chat = ({ sx, events, ...props }: Props) => {
         demo={true}
       />
     </Flex>
-  );
-};
+  )
+}

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

@@ -1,22 +1,23 @@
-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";
+import { Box, Button, Flex, Heading, Text } from '@chakra-ui/react'
+import mermaid from 'mermaid'
+import { useOurTheme } from '../theme'
+import { formatFlow } from '../helpers/formatters'
+import { restartConversation } from '../helpers/conversation'
+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[];
+  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 { rasaSpace } = useOurTheme()
+  const mermaidRef = useRef<HTMLPreElement>(null)
+  const [text, setText] = useState<string>('')
   const flow = flows.find(({ id }) => id === stackFrame?.flow_id)
 
   const config = {
@@ -25,51 +26,47 @@ export const DiagramFlow = ({ stackFrame, stepTrail, flows, slots }: Props) => {
     flowchart: {
       useMaxWidth: false,
     },
-  };
+  }
 
   useEffect(() => {
-    mermaid.mermaidAPI.initialize(config);
-  }, []);
+    mermaid.mermaidAPI.initialize(config)
+  }, [])
 
   useEffect(() => {
-    if (!text) return;
+    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();
+    mermaidRef.current?.removeAttribute('data-processed')
+    mermaid.contentLoaded()
 
     setTimeout(() => {
-      const active = document.querySelectorAll(".active")[0];
+      const active = document.querySelectorAll('.active')[0]
       if (active) {
-        active.scrollIntoView({ behavior: "smooth"});
+        active.scrollIntoView({ behavior: 'smooth' })
       }
-    }, 0);
-  }, [text]);
+    }, 0)
+  }, [text])
 
   useEffect(() => {
-    setText(formatFlow(slots, stackFrame, flow, stepTrail));
-  }, [text, flow, slots, stackFrame]);
+    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();
-  };
+    restartConversation()
+  }
 
   const scrollSx = {
-    height: "100%",
-    overflow: "auto",
-    width: "100%",
-    textAlign: "center",
-    flexDirection: "column",
-  };
+    height: '100%',
+    overflow: 'auto',
+    width: '100%',
+    textAlign: 'center',
+    flexDirection: 'column',
+  }
   const preSx = {
     svg: {
-      margin: "0 auto",
+      margin: '0 auto',
     },
-  };
+  }
 
   return (
     <Flex direction="column" height="100%">
@@ -77,7 +74,7 @@ export const DiagramFlow = ({ stackFrame, stepTrail, flows, slots }: Props) => {
         Flow
         {flow ? (
           <Text as="span" fontWeight="normal">
-            {":"} {flow.id}
+            {':'} {flow.id}
           </Text>
         ) : null}
       </Heading>
@@ -104,5 +101,5 @@ export const DiagramFlow = ({ stackFrame, stepTrail, flows, slots }: Props) => {
         </Button>
       </Flex>
     </Flex>
-  );
-};
+  )
+}