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

rasa/core/channels/inspector/dist/assets/{xychartDiagram-2b33534f-4d4026c0.js → xychartDiagram-2b33534f-fd3db0d5.js}

@@ -1,4 +1,4 @@
-import{Z as zt,$ as ot,X as wt,W as Ft,s as Nt,g as Xt,B as Yt,D as St,a as Ht,b as $t,E as Ut,l as Ct,U as qt,i as jt,d as Gt}from"./index-a5d3e69d.js";import{c as Qt}from"./createText-62fc7601-8b6fcc2a.js";import{i as Kt}from"./init-77b53fdd.js";import{o as Zt}from"./ordinal-ba9b4969.js";import{l as ft}from"./linear-c4fc4098.js";import{l as pt}from"./line-5038b469.js";import"./array-9f3ba611.js";import"./path-53f90ab3.js";function Jt(e,t,i){e=+e,t=+t,i=(n=arguments.length)<2?(t=e,e=0,1):n<3?1:+i;for(var s=-1,n=Math.max(0,Math.ceil((t-e)/i))|0,o=new Array(n);++s<n;)o[s]=e+s*i;return o}function st(){var e=Zt().unknown(void 0),t=e.domain,i=e.range,s=0,n=1,o,c,f=!1,d=0,R=0,_=.5;delete e.unknown;function A(){var m=t().length,T=n<s,S=T?n:s,P=T?s:n;o=(P-S)/Math.max(1,m-d+R*2),f&&(o=Math.floor(o)),S+=(P-S-o*(m-d))*_,c=o*(1-d),f&&(S=Math.round(S),c=Math.round(c));var p=Jt(m).map(function(C){return S+o*C});return i(T?p.reverse():p)}return e.domain=function(m){return arguments.length?(t(m),A()):t()},e.range=function(m){return arguments.length?([s,n]=m,s=+s,n=+n,A()):[s,n]},e.rangeRound=function(m){return[s,n]=m,s=+s,n=+n,f=!0,A()},e.bandwidth=function(){return c},e.step=function(){return o},e.round=function(m){return arguments.length?(f=!!m,A()):f},e.padding=function(m){return arguments.length?(d=Math.min(1,R=+m),A()):d},e.paddingInner=function(m){return arguments.length?(d=Math.min(1,m),A()):d},e.paddingOuter=function(m){return arguments.length?(R=+m,A()):R},e.align=function(m){return arguments.length?(_=Math.max(0,Math.min(1,m)),A()):_},e.copy=function(){return st(t(),[s,n]).round(f).paddingInner(d).paddingOuter(R).align(_)},Kt.apply(A(),arguments)}var nt=function(){var e=function(V,r,l,u){for(l=l||{},u=V.length;u--;l[V[u]]=r);return l},t=[1,10,12,14,16,18,19,21,23],i=[2,6],s=[1,3],n=[1,5],o=[1,6],c=[1,7],f=[1,5,10,12,14,16,18,19,21,23,34,35,36],d=[1,25],R=[1,26],_=[1,28],A=[1,29],m=[1,30],T=[1,31],S=[1,32],P=[1,33],p=[1,34],C=[1,35],h=[1,36],L=[1,37],z=[1,43],lt=[1,42],ct=[1,47],$=[1,50],w=[1,10,12,14,16,18,19,21,23,34,35,36],Q=[1,10,12,14,16,18,19,21,23,24,26,27,28,34,35,36],E=[1,10,12,14,16,18,19,21,23,24,26,27,28,34,35,36,41,42,43,44,45,46,47,48,49,50],ut=[1,64],K={trace:function(){},yy:{},symbols_:{error:2,start:3,eol:4,XYCHART:5,chartConfig:6,document:7,CHART_ORIENTATION:8,statement:9,title:10,text:11,X_AXIS:12,parseXAxis:13,Y_AXIS:14,parseYAxis:15,LINE:16,plotData:17,BAR:18,acc_title:19,acc_title_value:20,acc_descr:21,acc_descr_value:22,acc_descr_multiline_value:23,SQUARE_BRACES_START:24,commaSeparatedNumbers:25,SQUARE_BRACES_END:26,NUMBER_WITH_DECIMAL:27,COMMA:28,xAxisData:29,bandData:30,ARROW_DELIMITER:31,commaSeparatedTexts:32,yAxisData:33,NEWLINE:34,SEMI:35,EOF:36,alphaNum:37,STR:38,MD_STR:39,alphaNumToken:40,AMP:41,NUM:42,ALPHA:43,PLUS:44,EQUALS:45,MULT:46,DOT:47,BRKT:48,MINUS:49,UNDERSCORE:50,$accept:0,$end:1},terminals_:{2:"error",5:"XYCHART",8:"CHART_ORIENTATION",10:"title",12:"X_AXIS",14:"Y_AXIS",16:"LINE",18:"BAR",19:"acc_title",20:"acc_title_value",21:"acc_descr",22:"acc_descr_value",23:"acc_descr_multiline_value",24:"SQUARE_BRACES_START",26:"SQUARE_BRACES_END",27:"NUMBER_WITH_DECIMAL",28:"COMMA",31:"ARROW_DELIMITER",34:"NEWLINE",35:"SEMI",36:"EOF",38:"STR",39:"MD_STR",41:"AMP",42:"NUM",43:"ALPHA",44:"PLUS",45:"EQUALS",46:"MULT",47:"DOT",48:"BRKT",49:"MINUS",50:"UNDERSCORE"},productions_:[0,[3,2],[3,3],[3,2],[3,1],[6,1],[7,0],[7,2],[9,2],[9,2],[9,2],[9,2],[9,2],[9,3],[9,2],[9,3],[9,2],[9,2],[9,1],[17,3],[25,3],[25,1],[13,1],[13,2],[13,1],[29,1],[29,3],[30,3],[32,3],[32,1],[15,1],[15,2],[15,1],[33,3],[4,1],[4,1],[4,1],[11,1],[11,1],[11,1],[37,1],[37,2],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1]],performAction:function(r,l,u,g,b,a,F){var x=a.length-1;switch(b){case 5:g.setOrientation(a[x]);break;case 9:g.setDiagramTitle(a[x].text.trim());break;case 12:g.setLineData({text:"",type:"text"},a[x]);break;case 13:g.setLineData(a[x-1],a[x]);break;case 14:g.setBarData({text:"",type:"text"},a[x]);break;case 15:g.setBarData(a[x-1],a[x]);break;case 16:this.$=a[x].trim(),g.setAccTitle(this.$);break;case 17:case 18:this.$=a[x].trim(),g.setAccDescription(this.$);break;case 19:this.$=a[x-1];break;case 20:this.$=[Number(a[x-2]),...a[x]];break;case 21:this.$=[Number(a[x])];break;case 22:g.setXAxisTitle(a[x]);break;case 23:g.setXAxisTitle(a[x-1]);break;case 24:g.setXAxisTitle({type:"text",text:""});break;case 25:g.setXAxisBand(a[x]);break;case 26:g.setXAxisRangeData(Number(a[x-2]),Number(a[x]));break;case 27:this.$=a[x-1];break;case 28:this.$=[a[x-2],...a[x]];break;case 29:this.$=[a[x]];break;case 30:g.setYAxisTitle(a[x]);break;case 31:g.setYAxisTitle(a[x-1]);break;case 32:g.setYAxisTitle({type:"text",text:""});break;case 33:g.setYAxisRangeData(Number(a[x-2]),Number(a[x]));break;case 37:this.$={text:a[x],type:"text"};break;case 38:this.$={text:a[x],type:"text"};break;case 39:this.$={text:a[x],type:"markdown"};break;case 40:this.$=a[x];break;case 41:this.$=a[x-1]+""+a[x];break}},table:[e(t,i,{3:1,4:2,7:4,5:s,34:n,35:o,36:c}),{1:[3]},e(t,i,{4:2,7:4,3:8,5:s,34:n,35:o,36:c}),e(t,i,{4:2,7:4,6:9,3:10,5:s,8:[1,11],34:n,35:o,36:c}),{1:[2,4],9:12,10:[1,13],12:[1,14],14:[1,15],16:[1,16],18:[1,17],19:[1,18],21:[1,19],23:[1,20]},e(f,[2,34]),e(f,[2,35]),e(f,[2,36]),{1:[2,1]},e(t,i,{4:2,7:4,3:21,5:s,34:n,35:o,36:c}),{1:[2,3]},e(f,[2,5]),e(t,[2,7],{4:22,34:n,35:o,36:c}),{11:23,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:39,13:38,24:z,27:lt,29:40,30:41,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:45,15:44,27:ct,33:46,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:49,17:48,24:$,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:52,17:51,24:$,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{20:[1,53]},{22:[1,54]},e(w,[2,18]),{1:[2,2]},e(w,[2,8]),e(w,[2,9]),e(Q,[2,37],{40:55,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L}),e(Q,[2,38]),e(Q,[2,39]),e(E,[2,40]),e(E,[2,42]),e(E,[2,43]),e(E,[2,44]),e(E,[2,45]),e(E,[2,46]),e(E,[2,47]),e(E,[2,48]),e(E,[2,49]),e(E,[2,50]),e(E,[2,51]),e(w,[2,10]),e(w,[2,22],{30:41,29:56,24:z,27:lt}),e(w,[2,24]),e(w,[2,25]),{31:[1,57]},{11:59,32:58,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},e(w,[2,11]),e(w,[2,30],{33:60,27:ct}),e(w,[2,32]),{31:[1,61]},e(w,[2,12]),{17:62,24:$},{25:63,27:ut},e(w,[2,14]),{17:65,24:$},e(w,[2,16]),e(w,[2,17]),e(E,[2,41]),e(w,[2,23]),{27:[1,66]},{26:[1,67]},{26:[2,29],28:[1,68]},e(w,[2,31]),{27:[1,69]},e(w,[2,13]),{26:[1,70]},{26:[2,21],28:[1,71]},e(w,[2,15]),e(w,[2,26]),e(w,[2,27]),{11:59,32:72,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},e(w,[2,33]),e(w,[2,19]),{25:73,27:ut},{26:[2,28]},{26:[2,20]}],defaultActions:{8:[2,1],10:[2,3],21:[2,2],72:[2,28],73:[2,20]},parseError:function(r,l){if(l.recoverable)this.trace(r);else{var u=new Error(r);throw u.hash=l,u}},parse:function(r){var l=this,u=[0],g=[],b=[null],a=[],F=this.table,x="",U=0,gt=0,Vt=2,xt=1,Bt=a.slice.call(arguments,1),k=Object.create(this.lexer),B={yy:{}};for(var J in this.yy)Object.prototype.hasOwnProperty.call(this.yy,J)&&(B.yy[J]=this.yy[J]);k.setInput(r,B.yy),B.yy.lexer=k,B.yy.parser=this,typeof k.yylloc>"u"&&(k.yylloc={});var tt=k.yylloc;a.push(tt);var Wt=k.options&&k.options.ranges;typeof B.yy.parseError=="function"?this.parseError=B.yy.parseError:this.parseError=Object.getPrototypeOf(this).parseError;function Ot(){var I;return I=g.pop()||k.lex()||xt,typeof I!="number"&&(I instanceof Array&&(g=I,I=g.pop()),I=l.symbols_[I]||I),I}for(var D,W,v,it,O={},q,M,dt,j;;){if(W=u[u.length-1],this.defaultActions[W]?v=this.defaultActions[W]:((D===null||typeof D>"u")&&(D=Ot()),v=F[W]&&F[W][D]),typeof v>"u"||!v.length||!v[0]){var et="";j=[];for(q in F[W])this.terminals_[q]&&q>Vt&&j.push("'"+this.terminals_[q]+"'");k.showPosition?et="Parse error on line "+(U+1)+`:
+import{Z as zt,$ as ot,X as wt,W as Ft,s as Nt,g as Xt,B as Yt,D as St,a as Ht,b as $t,E as Ut,l as Ct,U as qt,i as jt,d as Gt}from"./index-e7cef9de.js";import{c as Qt}from"./createText-62fc7601-b0ec81d6.js";import{i as Kt}from"./init-77b53fdd.js";import{o as Zt}from"./ordinal-ba9b4969.js";import{l as ft}from"./linear-4776f780.js";import{l as pt}from"./line-7c59abb6.js";import"./array-9f3ba611.js";import"./path-53f90ab3.js";function Jt(e,t,i){e=+e,t=+t,i=(n=arguments.length)<2?(t=e,e=0,1):n<3?1:+i;for(var s=-1,n=Math.max(0,Math.ceil((t-e)/i))|0,o=new Array(n);++s<n;)o[s]=e+s*i;return o}function st(){var e=Zt().unknown(void 0),t=e.domain,i=e.range,s=0,n=1,o,c,f=!1,d=0,R=0,_=.5;delete e.unknown;function A(){var m=t().length,T=n<s,S=T?n:s,P=T?s:n;o=(P-S)/Math.max(1,m-d+R*2),f&&(o=Math.floor(o)),S+=(P-S-o*(m-d))*_,c=o*(1-d),f&&(S=Math.round(S),c=Math.round(c));var p=Jt(m).map(function(C){return S+o*C});return i(T?p.reverse():p)}return e.domain=function(m){return arguments.length?(t(m),A()):t()},e.range=function(m){return arguments.length?([s,n]=m,s=+s,n=+n,A()):[s,n]},e.rangeRound=function(m){return[s,n]=m,s=+s,n=+n,f=!0,A()},e.bandwidth=function(){return c},e.step=function(){return o},e.round=function(m){return arguments.length?(f=!!m,A()):f},e.padding=function(m){return arguments.length?(d=Math.min(1,R=+m),A()):d},e.paddingInner=function(m){return arguments.length?(d=Math.min(1,m),A()):d},e.paddingOuter=function(m){return arguments.length?(R=+m,A()):R},e.align=function(m){return arguments.length?(_=Math.max(0,Math.min(1,m)),A()):_},e.copy=function(){return st(t(),[s,n]).round(f).paddingInner(d).paddingOuter(R).align(_)},Kt.apply(A(),arguments)}var nt=function(){var e=function(V,r,l,u){for(l=l||{},u=V.length;u--;l[V[u]]=r);return l},t=[1,10,12,14,16,18,19,21,23],i=[2,6],s=[1,3],n=[1,5],o=[1,6],c=[1,7],f=[1,5,10,12,14,16,18,19,21,23,34,35,36],d=[1,25],R=[1,26],_=[1,28],A=[1,29],m=[1,30],T=[1,31],S=[1,32],P=[1,33],p=[1,34],C=[1,35],h=[1,36],L=[1,37],z=[1,43],lt=[1,42],ct=[1,47],$=[1,50],w=[1,10,12,14,16,18,19,21,23,34,35,36],Q=[1,10,12,14,16,18,19,21,23,24,26,27,28,34,35,36],E=[1,10,12,14,16,18,19,21,23,24,26,27,28,34,35,36,41,42,43,44,45,46,47,48,49,50],ut=[1,64],K={trace:function(){},yy:{},symbols_:{error:2,start:3,eol:4,XYCHART:5,chartConfig:6,document:7,CHART_ORIENTATION:8,statement:9,title:10,text:11,X_AXIS:12,parseXAxis:13,Y_AXIS:14,parseYAxis:15,LINE:16,plotData:17,BAR:18,acc_title:19,acc_title_value:20,acc_descr:21,acc_descr_value:22,acc_descr_multiline_value:23,SQUARE_BRACES_START:24,commaSeparatedNumbers:25,SQUARE_BRACES_END:26,NUMBER_WITH_DECIMAL:27,COMMA:28,xAxisData:29,bandData:30,ARROW_DELIMITER:31,commaSeparatedTexts:32,yAxisData:33,NEWLINE:34,SEMI:35,EOF:36,alphaNum:37,STR:38,MD_STR:39,alphaNumToken:40,AMP:41,NUM:42,ALPHA:43,PLUS:44,EQUALS:45,MULT:46,DOT:47,BRKT:48,MINUS:49,UNDERSCORE:50,$accept:0,$end:1},terminals_:{2:"error",5:"XYCHART",8:"CHART_ORIENTATION",10:"title",12:"X_AXIS",14:"Y_AXIS",16:"LINE",18:"BAR",19:"acc_title",20:"acc_title_value",21:"acc_descr",22:"acc_descr_value",23:"acc_descr_multiline_value",24:"SQUARE_BRACES_START",26:"SQUARE_BRACES_END",27:"NUMBER_WITH_DECIMAL",28:"COMMA",31:"ARROW_DELIMITER",34:"NEWLINE",35:"SEMI",36:"EOF",38:"STR",39:"MD_STR",41:"AMP",42:"NUM",43:"ALPHA",44:"PLUS",45:"EQUALS",46:"MULT",47:"DOT",48:"BRKT",49:"MINUS",50:"UNDERSCORE"},productions_:[0,[3,2],[3,3],[3,2],[3,1],[6,1],[7,0],[7,2],[9,2],[9,2],[9,2],[9,2],[9,2],[9,3],[9,2],[9,3],[9,2],[9,2],[9,1],[17,3],[25,3],[25,1],[13,1],[13,2],[13,1],[29,1],[29,3],[30,3],[32,3],[32,1],[15,1],[15,2],[15,1],[33,3],[4,1],[4,1],[4,1],[11,1],[11,1],[11,1],[37,1],[37,2],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1]],performAction:function(r,l,u,g,b,a,F){var x=a.length-1;switch(b){case 5:g.setOrientation(a[x]);break;case 9:g.setDiagramTitle(a[x].text.trim());break;case 12:g.setLineData({text:"",type:"text"},a[x]);break;case 13:g.setLineData(a[x-1],a[x]);break;case 14:g.setBarData({text:"",type:"text"},a[x]);break;case 15:g.setBarData(a[x-1],a[x]);break;case 16:this.$=a[x].trim(),g.setAccTitle(this.$);break;case 17:case 18:this.$=a[x].trim(),g.setAccDescription(this.$);break;case 19:this.$=a[x-1];break;case 20:this.$=[Number(a[x-2]),...a[x]];break;case 21:this.$=[Number(a[x])];break;case 22:g.setXAxisTitle(a[x]);break;case 23:g.setXAxisTitle(a[x-1]);break;case 24:g.setXAxisTitle({type:"text",text:""});break;case 25:g.setXAxisBand(a[x]);break;case 26:g.setXAxisRangeData(Number(a[x-2]),Number(a[x]));break;case 27:this.$=a[x-1];break;case 28:this.$=[a[x-2],...a[x]];break;case 29:this.$=[a[x]];break;case 30:g.setYAxisTitle(a[x]);break;case 31:g.setYAxisTitle(a[x-1]);break;case 32:g.setYAxisTitle({type:"text",text:""});break;case 33:g.setYAxisRangeData(Number(a[x-2]),Number(a[x]));break;case 37:this.$={text:a[x],type:"text"};break;case 38:this.$={text:a[x],type:"text"};break;case 39:this.$={text:a[x],type:"markdown"};break;case 40:this.$=a[x];break;case 41:this.$=a[x-1]+""+a[x];break}},table:[e(t,i,{3:1,4:2,7:4,5:s,34:n,35:o,36:c}),{1:[3]},e(t,i,{4:2,7:4,3:8,5:s,34:n,35:o,36:c}),e(t,i,{4:2,7:4,6:9,3:10,5:s,8:[1,11],34:n,35:o,36:c}),{1:[2,4],9:12,10:[1,13],12:[1,14],14:[1,15],16:[1,16],18:[1,17],19:[1,18],21:[1,19],23:[1,20]},e(f,[2,34]),e(f,[2,35]),e(f,[2,36]),{1:[2,1]},e(t,i,{4:2,7:4,3:21,5:s,34:n,35:o,36:c}),{1:[2,3]},e(f,[2,5]),e(t,[2,7],{4:22,34:n,35:o,36:c}),{11:23,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:39,13:38,24:z,27:lt,29:40,30:41,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:45,15:44,27:ct,33:46,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:49,17:48,24:$,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:52,17:51,24:$,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{20:[1,53]},{22:[1,54]},e(w,[2,18]),{1:[2,2]},e(w,[2,8]),e(w,[2,9]),e(Q,[2,37],{40:55,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L}),e(Q,[2,38]),e(Q,[2,39]),e(E,[2,40]),e(E,[2,42]),e(E,[2,43]),e(E,[2,44]),e(E,[2,45]),e(E,[2,46]),e(E,[2,47]),e(E,[2,48]),e(E,[2,49]),e(E,[2,50]),e(E,[2,51]),e(w,[2,10]),e(w,[2,22],{30:41,29:56,24:z,27:lt}),e(w,[2,24]),e(w,[2,25]),{31:[1,57]},{11:59,32:58,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},e(w,[2,11]),e(w,[2,30],{33:60,27:ct}),e(w,[2,32]),{31:[1,61]},e(w,[2,12]),{17:62,24:$},{25:63,27:ut},e(w,[2,14]),{17:65,24:$},e(w,[2,16]),e(w,[2,17]),e(E,[2,41]),e(w,[2,23]),{27:[1,66]},{26:[1,67]},{26:[2,29],28:[1,68]},e(w,[2,31]),{27:[1,69]},e(w,[2,13]),{26:[1,70]},{26:[2,21],28:[1,71]},e(w,[2,15]),e(w,[2,26]),e(w,[2,27]),{11:59,32:72,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},e(w,[2,33]),e(w,[2,19]),{25:73,27:ut},{26:[2,28]},{26:[2,20]}],defaultActions:{8:[2,1],10:[2,3],21:[2,2],72:[2,28],73:[2,20]},parseError:function(r,l){if(l.recoverable)this.trace(r);else{var u=new Error(r);throw u.hash=l,u}},parse:function(r){var l=this,u=[0],g=[],b=[null],a=[],F=this.table,x="",U=0,gt=0,Vt=2,xt=1,Bt=a.slice.call(arguments,1),k=Object.create(this.lexer),B={yy:{}};for(var J in this.yy)Object.prototype.hasOwnProperty.call(this.yy,J)&&(B.yy[J]=this.yy[J]);k.setInput(r,B.yy),B.yy.lexer=k,B.yy.parser=this,typeof k.yylloc>"u"&&(k.yylloc={});var tt=k.yylloc;a.push(tt);var Wt=k.options&&k.options.ranges;typeof B.yy.parseError=="function"?this.parseError=B.yy.parseError:this.parseError=Object.getPrototypeOf(this).parseError;function Ot(){var I;return I=g.pop()||k.lex()||xt,typeof I!="number"&&(I instanceof Array&&(g=I,I=g.pop()),I=l.symbols_[I]||I),I}for(var D,W,v,it,O={},q,M,dt,j;;){if(W=u[u.length-1],this.defaultActions[W]?v=this.defaultActions[W]:((D===null||typeof D>"u")&&(D=Ot()),v=F[W]&&F[W][D]),typeof v>"u"||!v.length||!v[0]){var et="";j=[];for(q in F[W])this.terminals_[q]&&q>Vt&&j.push("'"+this.terminals_[q]+"'");k.showPosition?et="Parse error on line "+(U+1)+`:
 `+k.showPosition()+`
 Expecting `+j.join(", ")+", got '"+(this.terminals_[D]||D)+"'":et="Parse error on line "+(U+1)+": Unexpected "+(D==xt?"end of input":"'"+(this.terminals_[D]||D)+"'"),this.parseError(et,{text:k.match,token:this.terminals_[D]||D,line:k.yylineno,loc:tt,expected:j})}if(v[0]instanceof Array&&v.length>1)throw new Error("Parse Error: multiple actions possible at state: "+W+", token: "+D);switch(v[0]){case 1:u.push(D),b.push(k.yytext),a.push(k.yylloc),u.push(v[1]),D=null,gt=k.yyleng,x=k.yytext,U=k.yylineno,tt=k.yylloc;break;case 2:if(M=this.productions_[v[1]][1],O.$=b[b.length-M],O._$={first_line:a[a.length-(M||1)].first_line,last_line:a[a.length-1].last_line,first_column:a[a.length-(M||1)].first_column,last_column:a[a.length-1].last_column},Wt&&(O._$.range=[a[a.length-(M||1)].range[0],a[a.length-1].range[1]]),it=this.performAction.apply(O,[x,gt,U,B.yy,v[1],b,a].concat(Bt)),typeof it<"u")return it;M&&(u=u.slice(0,-1*M*2),b=b.slice(0,-1*M),a=a.slice(0,-1*M)),u.push(this.productions_[v[1]][0]),b.push(O.$),a.push(O._$),dt=F[u[u.length-2]][u[u.length-1]],u.push(dt);break;case 3:return!0}}return!0}},It=function(){var V={EOF:1,parseError:function(l,u){if(this.yy.parser)this.yy.parser.parseError(l,u);else throw new Error(l)},setInput:function(r,l){return this.yy=l||this.yy||{},this._input=r,this._more=this._backtrack=this.done=!1,this.yylineno=this.yyleng=0,this.yytext=this.matched=this.match="",this.conditionStack=["INITIAL"],this.yylloc={first_line:1,first_column:0,last_line:1,last_column:0},this.options.ranges&&(this.yylloc.range=[0,0]),this.offset=0,this},input:function(){var r=this._input[0];this.yytext+=r,this.yyleng++,this.offset++,this.match+=r,this.matched+=r;var l=r.match(/(?:\r\n?|\n).*/g);return l?(this.yylineno++,this.yylloc.last_line++):this.yylloc.last_column++,this.options.ranges&&this.yylloc.range[1]++,this._input=this._input.slice(1),r},unput:function(r){var l=r.length,u=r.split(/(?:\r\n?|\n)/g);this._input=r+this._input,this.yytext=this.yytext.substr(0,this.yytext.length-l),this.offset-=l;var g=this.match.split(/(?:\r\n?|\n)/g);this.match=this.match.substr(0,this.match.length-1),this.matched=this.matched.substr(0,this.matched.length-1),u.length-1&&(this.yylineno-=u.length-1);var b=this.yylloc.range;return this.yylloc={first_line:this.yylloc.first_line,last_line:this.yylineno+1,first_column:this.yylloc.first_column,last_column:u?(u.length===g.length?this.yylloc.first_column:0)+g[g.length-u.length].length-u[0].length:this.yylloc.first_column-l},this.options.ranges&&(this.yylloc.range=[b[0],b[0]+this.yyleng-l]),this.yyleng=this.yytext.length,this},more:function(){return this._more=!0,this},reject:function(){if(this.options.backtrack_lexer)this._backtrack=!0;else return this.parseError("Lexical error on line "+(this.yylineno+1)+`. You can only invoke reject() in the lexer when the lexer is of the backtracking persuasion (options.backtrack_lexer = true).
 `+this.showPosition(),{text:"",token:null,line:this.yylineno});return this},less:function(r){this.unput(this.match.slice(r))},pastInput:function(){var r=this.matched.substr(0,this.matched.length-this.match.length);return(r.length>20?"...":"")+r.substr(-20).replace(/\n/g,"")},upcomingInput:function(){var r=this.match;return r.length<20&&(r+=this._input.substr(0,20-r.length)),(r.substr(0,20)+(r.length>20?"...":"")).replace(/\n/g,"")},showPosition:function(){var r=this.pastInput(),l=new Array(r.length+1).join("-");return r+this.upcomingInput()+`

rasa/core/channels/inspector/dist/index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="icon" href="data:image/x-icon;base64,AAABAAEAICAQAAEABADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAOwAAADsAAAAEAAAABAAAABxaUwAwoyZAMOJmADBi5kAwoyZAMKMmQDCjJkAwoyZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQAAAAAAAAAAAAAAAAAACV3AAAAAAAAAAAAAAAAAAYXdwAAAAAAAAAAAAAAAANHd3cAAAAAAAEREREREREXd3d3ERAAAAAHd3d3d3d3d3FXd3dwAAAAB3d3d3d3d3dDB3d3cAAAAAd3IiIiIiIiAAIid3AAAAAHdwAAAAAAAAAAAHdwAAAAB3cAAAAAAAAAAAB3cAAAAAd3AAd3AABnd0AAd3AAAAAHdwAHdwADF3QgAHdwAAAAB3cAB3dTMXcSAAB3cAAAAAd3AAd3dxdxMAAAd3AAAAAHdwAHd3d3dGAAAHdwAAAAB3cAB3dHd3dxUAB3cAAAAAd3AAd3A1F3d3AAd3AAAAAHdwAHdwAANXdwAHdwAAAAB3cAB3cAAAAXcAB3cAAAAAd3AAd3d3d3d3AAd3AAAAAHdwAHd3d3d3dwAHdwAAAAB3cAB3d3d3d3cAB3cAAAAAd3AAAAAAAAAAAAd3AAAAAHdwAAAAAAAAAAAHdwAAAAB3cAAAAAAAAAAAB3cAAAAAd3d3d3d3d3d3d3d3AAAAAHd3d3d3d3d3d3d3dwAAAAB3d3d3d3d3d3d3d3cAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///5////4f///8H///8B/8AAAD/AAAA/wAAQP8AAcD/H//4/x//+P8ceDj/HHA4/xwAeP8cAPj/HAD4/xwAOP8cQDj/HHg4/xx+OP8cADj/HAA4/xwAOP8f//j/H//4/x//+P8AAAD/AAAA/wAAAP/////////////////////w==" sizes="32x32">
   <title>Rasa inspector</title>
-  <script type="module" crossorigin src="./assets/index-a5d3e69d.js"></script>
+  <script type="module" crossorigin src="./assets/index-e7cef9de.js"></script>
   <link rel="stylesheet" href="./assets/index-3ee28881.css">
 </head>
 
@@ -15,24 +15,25 @@
   
   <div id="rasa-chat-widget" data-websocket-url="" data-default-open="true"></div>
   <script>
-    const chatDiv = document.getElementById("rasa-chat-widget");
-    const websocketUrl = window.location.origin.replace("http", "ws");
-    const initialPayload = "/session_start";
-    const maxHeight = document.documentElement.scrollHeight - 130;
-    // 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;
-    if (document.documentElement.clientWidth > 1631) {
-      remReference = 25.75;
-    }
+    // only show the rasa chat widget if we are on the socketio channel
+    if (window.location.pathname.includes("socketio")) {
+      const chatDiv = document.getElementById("rasa-chat-widget");
+      const websocketUrl = window.location.origin.replace("http", "ws");
+      const maxHeight = document.documentElement.scrollHeight - 130;
+      // 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;
+      if (document.documentElement.clientWidth > 1631) {
+        remReference = 25.75;
+      }
 
-    const columnWidth = remReference * parseFloat(getComputedStyle(document.documentElement).fontSize);
+      const columnWidth = remReference * parseFloat(getComputedStyle(document.documentElement).fontSize);
 
-    chatDiv.setAttribute("data-websocket-url", websocketUrl);
-    chatDiv.setAttribute("data-initial-payload", initialPayload);
-    chatDiv.setAttribute("data-close-on-outside-click", false);
-    chatDiv.setAttribute("data-height", maxHeight);
-    chatDiv.setAttribute("data-width", columnWidth);
+      chatDiv.setAttribute("data-websocket-url", websocketUrl);
+      chatDiv.setAttribute("data-close-on-outside-click", false);
+      chatDiv.setAttribute("data-height", maxHeight);
+      chatDiv.setAttribute("data-width", columnWidth);
+    }
   </script>
   <!-- downloaded from https://unpkg.com/@rasahq/rasa-chat -->
   

rasa/core/channels/inspector/index.html

@@ -13,24 +13,25 @@
   <script type="module" src="/src/main.tsx"></script>
   <div id="rasa-chat-widget" data-websocket-url="" data-default-open="true"></div>
   <script>
-    const chatDiv = document.getElementById("rasa-chat-widget");
-    const websocketUrl = window.location.origin.replace("http", "ws");
-    const initialPayload = "/session_start";
-    const maxHeight = document.documentElement.scrollHeight - 130;
-    // 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;
-    if (document.documentElement.clientWidth > 1631) {
-      remReference = 25.75;
-    }
+    // only show the rasa chat widget if we are on the socketio channel
+    if (window.location.pathname.includes("socketio")) {
+      const chatDiv = document.getElementById("rasa-chat-widget");
+      const websocketUrl = window.location.origin.replace("http", "ws");
+      const maxHeight = document.documentElement.scrollHeight - 130;
+      // 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;
+      if (document.documentElement.clientWidth > 1631) {
+        remReference = 25.75;
+      }
 
-    const columnWidth = remReference * parseFloat(getComputedStyle(document.documentElement).fontSize);
+      const columnWidth = remReference * parseFloat(getComputedStyle(document.documentElement).fontSize);
 
-    chatDiv.setAttribute("data-websocket-url", websocketUrl);
-    chatDiv.setAttribute("data-initial-payload", initialPayload);
-    chatDiv.setAttribute("data-close-on-outside-click", false);
-    chatDiv.setAttribute("data-height", maxHeight);
-    chatDiv.setAttribute("data-width", columnWidth);
+      chatDiv.setAttribute("data-websocket-url", websocketUrl);
+      chatDiv.setAttribute("data-close-on-outside-click", false);
+      chatDiv.setAttribute("data-height", maxHeight);
+      chatDiv.setAttribute("data-width", columnWidth);
+    }
   </script>
   <!-- downloaded from https://unpkg.com/@rasahq/rasa-chat -->
   <script src="/assets/rasa-chat.js" type="module" ></script>

rasa/core/channels/inspector/package.json

@@ -17,11 +17,15 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "axios": "1.5.1",
+    "deep-chat-react": "2.0.1",
     "framer-motion": "10.16.4",
+    "immutable-json-patch": "^6.0.1",
     "mermaid": "10.6.0",
+    "query-string": "^9.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-syntax-highlighter": "15.5.0",
+    "react-use-websocket": "^4.8.1",
     "usehooks-ts": "2.9.1"
   },
   "devDependencies": {
@@ -45,4 +49,4 @@
     "typescript": "5.0.2",
     "vite": "4.4.5"
   }
-}
+}

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

@@ -6,7 +6,6 @@ import {
   useToast,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
-import { useInterval } from "usehooks-ts";
 import axios from "axios";
 import { useOurTheme } from "./theme";
 import { Welcome } from "./components/Welcome";
@@ -15,12 +14,15 @@ import { DialougeInformation } from "./components/DialogueInformation";
 import { LoadingSpinner } from "./components/LoadingSpinner";
 import { DiagramFlow } from "./components/DiagramFlow";
 import { formatSlots } from "./helpers/formatters";
-import { Slot, Stack, Event, Flow, SelectedStack } from "./types";
-import { updatedActiveFrame } from "./helpers/utils";
-
-const storyController = new AbortController();
-const trackerController = new AbortController();
-const pollingInterval = 1000;
+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";
 
 export function App() {
   const toast = useToast();
@@ -33,6 +35,48 @@ export function App() {
   const [stack, setStack] = useState<Stack[]>([]);
   const [frame, setFrame] = useState<SelectedStack | undefined>(undefined);
 
+  // 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 inspectWS = window.location.href
+    .replace("inspect.html", "tracker_stream")
+    .replace("http", "ws");
+  const { sendJsonMessage, lastJsonMessage, readyState } =
+    useWebSocket<Tracker>(inspectWS, {
+      share: false,
+      shouldReconnect: () => true,
+    });
+
+  useEffect(() => {
+    if (readyState === ReadyState.OPEN && rasaChatSessionId) {
+      sendJsonMessage({
+        action: "retrieve",
+        sender_id: rasaChatSessionId,
+      });
+    }
+  }, [readyState, sendJsonMessage, rasaChatSessionId]);
+
+  useEffect(() => {
+    // if we are on a "dynamic" input channel where the user can chat on
+    // the inspector page, these chat-uis (rasa chat, vortex chat) don't
+    // 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;
+
+    const queryParameters = queryString.parse(window.location.search);
+    const urlSender = queryParameters.sender as string;
+    if (urlSender && urlSender !== rasaChatSessionId) {
+      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());
+    }
+  }, [rasaChatSessionId, shouldShowTranscript]);
+
   useEffect(() => {
     axios
       .get("/flows")
@@ -51,66 +95,54 @@ export function App() {
       });
   }, [toast]);
 
-  // `rasaChatSessionId` is set by @rasahq/rasa-chat on the window object 😞
-  // Since we can't control when that happens, we need to poll for it.
-  useInterval(
-    () => setRasaChatSessionId(window?.rasaChatSessionId || ""),
-    // null means: stop polling. We stop polling once we retrieve `rasaChatSessionId`
-    rasaChatSessionId ? null : 1000
-  );
-
-  useInterval(
-    () => {
-      if (!rasaChatSessionId) return;
-      storyController.abort();
-      axios
-        .get(`/conversations/${rasaChatSessionId}/story`)
-        .then((response) => setStory(response.data))
-        .catch((error) => {
-          // don't show a new toast if it's already active
-          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",
-            duration: 4000,
-            isClosable: true,
-          });
+  function fetchStory() {
+    axios
+      .get(`/conversations/${rasaChatSessionId}/story`)
+      .then((response) => setStory(response.data))
+      .catch((error) => {
+        // don't show a new toast if it's already active
+        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",
+          duration: 4000,
+          isClosable: true,
         });
-    },
-    // null means: stop polling. We start polling once we retrieve `rasaChatSessionId`
-    rasaChatSessionId ? pollingInterval : null
-  );
+      });
+  }
 
-  useInterval(
-    () => {
-      if (!rasaChatSessionId) return;
-      trackerController.abort();
-      axios
-        .get(`/conversations/${rasaChatSessionId}/tracker?start_session=false`)
-        .then((response) => {
-          setSlots(formatSlots(response.data.slots));
-          setEvents(response.data.events);
-          setStack(response.data.stack);
-          setFrame(updatedActiveFrame(frame, response.data.stack));
-        })
-        .catch((error) => {
-          // don't show a new toast if it's already active
-          if (toast.isActive("tracker-error")) return;
-          toast({
-            id: "tracker-error",
-            title: "Tracker could not be retrieved",
-            description: error?.message || "An unknown error happened.",
-            status: "error",
-            duration: 4000,
-            isClosable: true,
-          });
-        });
-    },
-    // null means: stop polling. We start polling once we retrieve `rasaChatSessionId`
-    rasaChatSessionId ? pollingInterval : null
-  );
+  // 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 (
+      !rasaChatSessionId ||
+      lastJsonMessage?.sender_id === rasaChatSessionId
+    ) {
+      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);
+    } else if (
+      rasaChatSessionId &&
+      lastJsonMessage.sender_id !== rasaChatSessionId
+    ) {
+      // 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]);
+
+  useEffect(() => {
+    fetchStory();
+  }, [rasaChatSessionId]);
 
   const borderRadiusSx = {
     borderRadius: rasaRadii.normal,
@@ -140,7 +172,15 @@ export function App() {
     gridRowGap: rasaSpace[1],
   };
 
-  if (!rasaChatSessionId) return <LoadingSpinner />;
+  const onFrameSelected = (stack: Stack) => {
+    setFrame({
+      stack,
+      activatedSteps: flowStepTrail(events)[stack.flow_id],
+      isUserSelected: true,
+    });
+  };
+
+  if (!rasaChatSessionId && !window.location.href.includes("socketio")) return <LoadingSpinner />;
 
   return (
     <Grid sx={gridSx}>
@@ -151,7 +191,7 @@ export function App() {
             sx={boxSx}
             stack={stack}
             active={frame?.stack}
-            onItemClick={setFrame}
+            onItemClick={onFrameSelected}
           />
           <DialougeInformation
             sx={boxSx}
@@ -163,8 +203,18 @@ export function App() {
         </Grid>
       </GridItem>
       <GridItem sx={boxSx}>
-        <DiagramFlow stackFrame={frame?.stack} flows={flows} slots={slots} />
+        <DiagramFlow
+          stackFrame={frame?.stack}
+          stepTrail={frame?.activatedSteps || []}
+          flows={flows}
+          slots={slots}
+        />
       </GridItem>
+      {shouldShowTranscript && (
+        <GridItem>
+          <Chat events={events || []} />
+        </GridItem>
+      )}
     </Grid>
   );
 }

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

@@ -0,0 +1,95 @@
+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[];
+}
+
+export const Chat = ({ sx, events, ...props }: Props) => {
+  const containerSx = {
+    ...sx,
+    p: 0,
+    flexDirection: "column",
+  };
+
+  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;
+  if (document.documentElement.clientWidth > 1631) {
+    remReference = 25.75;
+  }
+
+  const columnWidth =
+    remReference *
+    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})`;
+    }
+    if (commandName === "set slot") {
+      return `Set (${command.name} = ${command.value})`;
+    }
+    return commandName;
+  };
+
+  // collect user and bot messages
+  const messages: MessageContent[] = events
+    .filter((event: Event) => event.event === "user" || event.event === "bot")
+    // @ts-expect-error 
+    .flatMap((event: Event) => {
+      if (event.event === "user") {
+        let commands =
+          event.parse_data?.commands?.map(
+            (command) => `<div>${mapCommand(command)}</div>`
+          ) || [];
+        return [
+          {
+            role: event.event,
+            text: event.text || "",
+          },
+          {
+            role: "system",
+            html: `<div>${commands.join("")}</div>`,
+          },
+        ];
+      } else {
+        return [
+          {
+            role: event.event,
+            text: event.text || "",
+          },
+        ];
+      }
+    });
+
+  return (
+    <Flex sx={containerSx} {...props}>
+      <DeepChat
+        avatars={true}
+        textInput={{
+          disabled: true,
+        }}
+        inputAreaStyle={{ display: "none" }}
+        messageStyles={{
+          html: {
+            shared: { bubble: { backgroundColor: "unset", padding: "0px" } },
+          },
+        }}
+        style={{
+          borderRadius: "10px",
+          border: "none",
+          width: columnWidth,
+          height: maxHeight,
+        }}
+        history={messages}
+        demo={true}
+      />
+    </Flex>
+  );
+};

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

@@ -10,17 +10,14 @@ interface Props {
   stackFrame?: Stack;
   flows: Flow[];
   slots: Slot[];
+  stepTrail?: string[];
 }
 
-export const DiagramFlow = (props: Props) => {
+export const DiagramFlow = ({ stackFrame, stepTrail, flows, slots }: Props) => {
   const { rasaSpace } = useOurTheme();
   const mermaidRef = useRef<HTMLPreElement>(null);
   const [text, setText] = useState<string>("");
-  const { stackFrame, flows, slots } = props;
-
-  const activeFlowId = stackFrame?.flow_id;
-  const activeStepId = stackFrame?.step_id;
-  const flow = flows.find(({ id }) => id === activeFlowId);
+  const flow = flows.find(({ id }) => id === stackFrame?.flow_id)
 
   const config = {
     startOnLoad: true,
@@ -28,7 +25,7 @@ export const DiagramFlow = (props: Props) => {
     flowchart: {
       useMaxWidth: false,
     },
-  }
+  };
 
   useEffect(() => {
     mermaid.mermaidAPI.initialize(config);
@@ -50,10 +47,14 @@ export const DiagramFlow = (props: Props) => {
   }, [text]);
 
   useEffect(() => {
-    setText(formatFlow(slots, stackFrame, flow, activeStepId));
-  }, [text, flow, slots, stackFrame, activeStepId]);
+    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();
   };
 
@@ -99,7 +100,7 @@ export const DiagramFlow = (props: Props) => {
       </Box>
       <Flex justifyContent="space-between" alignItems="flex-end">
         <Button variant="outline" size="sm" onClick={handleRestartConversation}>
-          Restart conversation
+          New conversation
         </Button>
       </Flex>
     </Flex>

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

@@ -14,13 +14,13 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { useOurTheme } from "../theme";
-import { SelectedStack, Stack } from "../types";
+import { Stack } from "../types";
 import { shouldShowTooltip } from "../helpers/utils";
 
 interface Props extends FlexProps {
   stack: Stack[];
   active?: Stack;
-  onItemClick?: (selectedStack: SelectedStack) => void;
+  onItemClick?: (stack: Stack) => void;
 }
 
 function StackRow({
@@ -32,15 +32,8 @@ function StackRow({
   stack: Stack;
   highlighted?: boolean;
   selectable?: boolean;
-  onItemClick?: (selectedStack: SelectedStack) => void;
+  onItemClick?: (stack: Stack) => void;
 }) {
-  const { rasaFontSizes } = useOurTheme();
-
-  const idSx = {
-    fontSize: rasaFontSizes.xs,
-    textTransform: "uppercase",
-  };
-
   // use pointy hand cursor when hovering over a row
   const clickableTrSx = {
     _hover: {
@@ -62,19 +55,12 @@ function StackRow({
   return (
     <Tr
       sx={highlighted ? highlightedTrSx : selectable ? clickableTrSx : undefined}
-      onClick={() => onItemClick?.({stack: stack, isUserSelected: true})}
+      onClick={() => onItemClick?.(stack)}
     >
-      <Td sx={idSx}>
-        <Text noOfLines={1}>{stack.frame_id}</Text>
-      </Td>
       <Td>
-        {shouldShowTooltip(stack.flow_id) ? (
-          <Tooltip label={stack.flow_id} hasArrow>
-            <Text noOfLines={1}>{stack.flow_id}</Text>
-          </Tooltip>
-        ) : (
+        <Tooltip label={`${stack.flow_id} (${stack.frame_id})`} hasArrow>
           <Text noOfLines={1}>{stack.flow_id}</Text>
-        )}
+        </Tooltip>
       </Td>
       <Td>
         {shouldShowTooltip(stack.step_id) ? (
@@ -115,17 +101,16 @@ export const DialogueStack = ({
     <Flex sx={containerSx} {...props}>
       <Flex>
         <Heading size="lg" mb={rasaSpace[0.5]}>
-          Stack
+          History
         </Heading>
-        <Text ml={rasaSpace[0.25]}>({stack.length} frames)</Text>
+        <Text ml={rasaSpace[0.25]}>({stack.length} flows)</Text>
       </Flex>
       <Box sx={overflowBox}>
         <Table width="100%" layout="fixed">
           <Thead>
             <Tr>
-              <Th width="20%">ID</Th>
               <Th>Flow</Th>
-              <Th width="30%">Step ID</Th>
+              <Th width="40%">Step ID</Th>
             </Tr>
           </Thead>
           <Tbody>
@@ -141,7 +126,7 @@ export const DialogueStack = ({
                   />
                 ))}
             {stack.length === 0 && (
-              <StackRow stack={{ frame_id: "-", flow_id: "-", step_id: "-" }} />
+              <StackRow stack={{ frame_id: "-", flow_id: "-", step_id: "-", ended: false }} />
             )}
           </Tbody>
         </Table>