@langgraph-js/ui 5.3.0 → 5.5.0

package/dist/assets/{xychartDiagram-PRI3JC2R-BfqhPDDy.js → xychartDiagram-PRI3JC2R-3RFvJwDL.js}

@@ -1,4 +1,4 @@
-import{_ as a,s as gi,g as xi,q as Xt,p as di,a as fi,b as pi,l as Nt,I as mi,d as yi,y as bi,F as St,E as Yt,G as Ai,a0 as wi,h as Ci,az as Si,a8 as Wt}from"./mermaid.core-B8WZioq4.js";import"./index-BDnjyX2X.js";import{i as _i}from"./init-Gi6I4Gst.js";import{o as ki}from"./ordinal-Cboi1Yqb.js";import{l as zt}from"./linear-BuZdgMYG.js";import"./defaultLocale-C4B-KCzX.js";function Ri(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 yt(){var e=ki().unknown(void 0),t=e.domain,i=e.range,s=0,n=1,o,g,m=!1,p=0,k=0,v=.5;delete e.unknown;function C(){var b=t().length,E=n<s,D=E?n:s,P=E?s:n;o=(P-D)/Math.max(1,b-p+k*2),m&&(o=Math.floor(o)),D+=(P-D-o*(b-p))*v,g=o*(1-p),m&&(D=Math.round(D),g=Math.round(g));var I=Ri(b).map(function(y){return D+o*y});return i(E?I.reverse():I)}return e.domain=function(b){return arguments.length?(t(b),C()):t()},e.range=function(b){return arguments.length?([s,n]=b,s=+s,n=+n,C()):[s,n]},e.rangeRound=function(b){return[s,n]=b,s=+s,n=+n,m=!0,C()},e.bandwidth=function(){return g},e.step=function(){return o},e.round=function(b){return arguments.length?(m=!!b,C()):m},e.padding=function(b){return arguments.length?(p=Math.min(1,k=+b),C()):p},e.paddingInner=function(b){return arguments.length?(p=Math.min(1,b),C()):p},e.paddingOuter=function(b){return arguments.length?(k=+b,C()):k},e.align=function(b){return arguments.length?(v=Math.max(0,Math.min(1,b)),C()):v},e.copy=function(){return yt(t(),[s,n]).round(m).paddingInner(p).paddingOuter(k).align(v)},_i.apply(C(),arguments)}var bt=function(){var e=a(function(F,h,u,x){for(u=u||{},x=F.length;x--;u[F[x]]=h);return u},"o"),t=[1,10,12,14,16,18,19,21,23],i=[2,6],s=[1,3],n=[1,5],o=[1,6],g=[1,7],m=[1,5,10,12,14,16,18,19,21,23,34,35,36],p=[1,25],k=[1,26],v=[1,28],C=[1,29],b=[1,30],E=[1,31],D=[1,32],P=[1,33],I=[1,34],y=[1,35],_=[1,36],c=[1,37],W=[1,43],z=[1,42],U=[1,47],X=[1,50],l=[1,10,12,14,16,18,19,21,23,34,35,36],L=[1,10,12,14,16,18,19,21,23,24,26,27,28,34,35,36],S=[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],R=[1,64],$={trace:a(function(){},"trace"),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:a(function(h,u,x,d,w,r,at){var f=r.length-1;switch(w){case 5:d.setOrientation(r[f]);break;case 9:d.setDiagramTitle(r[f].text.trim());break;case 12:d.setLineData({text:"",type:"text"},r[f]);break;case 13:d.setLineData(r[f-1],r[f]);break;case 14:d.setBarData({text:"",type:"text"},r[f]);break;case 15:d.setBarData(r[f-1],r[f]);break;case 16:this.$=r[f].trim(),d.setAccTitle(this.$);break;case 17:case 18:this.$=r[f].trim(),d.setAccDescription(this.$);break;case 19:this.$=r[f-1];break;case 20:this.$=[Number(r[f-2]),...r[f]];break;case 21:this.$=[Number(r[f])];break;case 22:d.setXAxisTitle(r[f]);break;case 23:d.setXAxisTitle(r[f-1]);break;case 24:d.setXAxisTitle({type:"text",text:""});break;case 25:d.setXAxisBand(r[f]);break;case 26:d.setXAxisRangeData(Number(r[f-2]),Number(r[f]));break;case 27:this.$=r[f-1];break;case 28:this.$=[r[f-2],...r[f]];break;case 29:this.$=[r[f]];break;case 30:d.setYAxisTitle(r[f]);break;case 31:d.setYAxisTitle(r[f-1]);break;case 32:d.setYAxisTitle({type:"text",text:""});break;case 33:d.setYAxisRangeData(Number(r[f-2]),Number(r[f]));break;case 37:this.$={text:r[f],type:"text"};break;case 38:this.$={text:r[f],type:"text"};break;case 39:this.$={text:r[f],type:"markdown"};break;case 40:this.$=r[f];break;case 41:this.$=r[f-1]+""+r[f];break}},"anonymous"),table:[e(t,i,{3:1,4:2,7:4,5:s,34:n,35:o,36:g}),{1:[3]},e(t,i,{4:2,7:4,3:8,5:s,34:n,35:o,36:g}),e(t,i,{4:2,7:4,6:9,3:10,5:s,8:[1,11],34:n,35:o,36:g}),{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(m,[2,34]),e(m,[2,35]),e(m,[2,36]),{1:[2,1]},e(t,i,{4:2,7:4,3:21,5:s,34:n,35:o,36:g}),{1:[2,3]},e(m,[2,5]),e(t,[2,7],{4:22,34:n,35:o,36:g}),{11:23,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},{11:39,13:38,24:W,27:z,29:40,30:41,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},{11:45,15:44,27:U,33:46,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},{11:49,17:48,24:X,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},{11:52,17:51,24:X,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},{20:[1,53]},{22:[1,54]},e(l,[2,18]),{1:[2,2]},e(l,[2,8]),e(l,[2,9]),e(L,[2,37],{40:55,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c}),e(L,[2,38]),e(L,[2,39]),e(S,[2,40]),e(S,[2,42]),e(S,[2,43]),e(S,[2,44]),e(S,[2,45]),e(S,[2,46]),e(S,[2,47]),e(S,[2,48]),e(S,[2,49]),e(S,[2,50]),e(S,[2,51]),e(l,[2,10]),e(l,[2,22],{30:41,29:56,24:W,27:z}),e(l,[2,24]),e(l,[2,25]),{31:[1,57]},{11:59,32:58,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},e(l,[2,11]),e(l,[2,30],{33:60,27:U}),e(l,[2,32]),{31:[1,61]},e(l,[2,12]),{17:62,24:X},{25:63,27:R},e(l,[2,14]),{17:65,24:X},e(l,[2,16]),e(l,[2,17]),e(S,[2,41]),e(l,[2,23]),{27:[1,66]},{26:[1,67]},{26:[2,29],28:[1,68]},e(l,[2,31]),{27:[1,69]},e(l,[2,13]),{26:[1,70]},{26:[2,21],28:[1,71]},e(l,[2,15]),e(l,[2,26]),e(l,[2,27]),{11:59,32:72,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},e(l,[2,33]),e(l,[2,19]),{25:73,27:R},{26:[2,28]},{26:[2,20]}],defaultActions:{8:[2,1],10:[2,3],21:[2,2],72:[2,28],73:[2,20]},parseError:a(function(h,u){if(u.recoverable)this.trace(h);else{var x=new Error(h);throw x.hash=u,x}},"parseError"),parse:a(function(h){var u=this,x=[0],d=[],w=[null],r=[],at=this.table,f="",lt=0,It=0,hi=2,Mt=1,li=r.slice.call(arguments,1),T=Object.create(this.lexer),Y={yy:{}};for(var dt in this.yy)Object.prototype.hasOwnProperty.call(this.yy,dt)&&(Y.yy[dt]=this.yy[dt]);T.setInput(h,Y.yy),Y.yy.lexer=T,Y.yy.parser=this,typeof T.yylloc>"u"&&(T.yylloc={});var ft=T.yylloc;r.push(ft);var ci=T.options&&T.options.ranges;typeof Y.yy.parseError=="function"?this.parseError=Y.yy.parseError:this.parseError=Object.getPrototypeOf(this).parseError;function ui(V){x.length=x.length-2*V,w.length=w.length-V,r.length=r.length-V}a(ui,"popStack");function Vt(){var V;return V=d.pop()||T.lex()||Mt,typeof V!="number"&&(V instanceof Array&&(d=V,V=d.pop()),V=u.symbols_[V]||V),V}a(Vt,"lex");for(var M,H,B,pt,q={},ct,O,Bt,ut;;){if(H=x[x.length-1],this.defaultActions[H]?B=this.defaultActions[H]:((M===null||typeof M>"u")&&(M=Vt()),B=at[H]&&at[H][M]),typeof B>"u"||!B.length||!B[0]){var mt="";ut=[];for(ct in at[H])this.terminals_[ct]&&ct>hi&&ut.push("'"+this.terminals_[ct]+"'");T.showPosition?mt="Parse error on line "+(lt+1)+`:
+import{_ as a,s as gi,g as xi,q as Xt,p as di,a as fi,b as pi,l as Nt,I as mi,d as yi,y as bi,F as St,E as Yt,G as Ai,a0 as wi,h as Ci,az as Si,a8 as Wt}from"./mermaid.core-Bt6sloa1.js";import"./index-Cx_WzRmY.js";import{i as _i}from"./init-Gi6I4Gst.js";import{o as ki}from"./ordinal-Cboi1Yqb.js";import{l as zt}from"./linear-CnAIHHRL.js";import"./defaultLocale-C4B-KCzX.js";function Ri(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 yt(){var e=ki().unknown(void 0),t=e.domain,i=e.range,s=0,n=1,o,g,m=!1,p=0,k=0,v=.5;delete e.unknown;function C(){var b=t().length,E=n<s,D=E?n:s,P=E?s:n;o=(P-D)/Math.max(1,b-p+k*2),m&&(o=Math.floor(o)),D+=(P-D-o*(b-p))*v,g=o*(1-p),m&&(D=Math.round(D),g=Math.round(g));var I=Ri(b).map(function(y){return D+o*y});return i(E?I.reverse():I)}return e.domain=function(b){return arguments.length?(t(b),C()):t()},e.range=function(b){return arguments.length?([s,n]=b,s=+s,n=+n,C()):[s,n]},e.rangeRound=function(b){return[s,n]=b,s=+s,n=+n,m=!0,C()},e.bandwidth=function(){return g},e.step=function(){return o},e.round=function(b){return arguments.length?(m=!!b,C()):m},e.padding=function(b){return arguments.length?(p=Math.min(1,k=+b),C()):p},e.paddingInner=function(b){return arguments.length?(p=Math.min(1,b),C()):p},e.paddingOuter=function(b){return arguments.length?(k=+b,C()):k},e.align=function(b){return arguments.length?(v=Math.max(0,Math.min(1,b)),C()):v},e.copy=function(){return yt(t(),[s,n]).round(m).paddingInner(p).paddingOuter(k).align(v)},_i.apply(C(),arguments)}var bt=function(){var e=a(function(F,h,u,x){for(u=u||{},x=F.length;x--;u[F[x]]=h);return u},"o"),t=[1,10,12,14,16,18,19,21,23],i=[2,6],s=[1,3],n=[1,5],o=[1,6],g=[1,7],m=[1,5,10,12,14,16,18,19,21,23,34,35,36],p=[1,25],k=[1,26],v=[1,28],C=[1,29],b=[1,30],E=[1,31],D=[1,32],P=[1,33],I=[1,34],y=[1,35],_=[1,36],c=[1,37],W=[1,43],z=[1,42],U=[1,47],X=[1,50],l=[1,10,12,14,16,18,19,21,23,34,35,36],L=[1,10,12,14,16,18,19,21,23,24,26,27,28,34,35,36],S=[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],R=[1,64],$={trace:a(function(){},"trace"),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:a(function(h,u,x,d,w,r,at){var f=r.length-1;switch(w){case 5:d.setOrientation(r[f]);break;case 9:d.setDiagramTitle(r[f].text.trim());break;case 12:d.setLineData({text:"",type:"text"},r[f]);break;case 13:d.setLineData(r[f-1],r[f]);break;case 14:d.setBarData({text:"",type:"text"},r[f]);break;case 15:d.setBarData(r[f-1],r[f]);break;case 16:this.$=r[f].trim(),d.setAccTitle(this.$);break;case 17:case 18:this.$=r[f].trim(),d.setAccDescription(this.$);break;case 19:this.$=r[f-1];break;case 20:this.$=[Number(r[f-2]),...r[f]];break;case 21:this.$=[Number(r[f])];break;case 22:d.setXAxisTitle(r[f]);break;case 23:d.setXAxisTitle(r[f-1]);break;case 24:d.setXAxisTitle({type:"text",text:""});break;case 25:d.setXAxisBand(r[f]);break;case 26:d.setXAxisRangeData(Number(r[f-2]),Number(r[f]));break;case 27:this.$=r[f-1];break;case 28:this.$=[r[f-2],...r[f]];break;case 29:this.$=[r[f]];break;case 30:d.setYAxisTitle(r[f]);break;case 31:d.setYAxisTitle(r[f-1]);break;case 32:d.setYAxisTitle({type:"text",text:""});break;case 33:d.setYAxisRangeData(Number(r[f-2]),Number(r[f]));break;case 37:this.$={text:r[f],type:"text"};break;case 38:this.$={text:r[f],type:"text"};break;case 39:this.$={text:r[f],type:"markdown"};break;case 40:this.$=r[f];break;case 41:this.$=r[f-1]+""+r[f];break}},"anonymous"),table:[e(t,i,{3:1,4:2,7:4,5:s,34:n,35:o,36:g}),{1:[3]},e(t,i,{4:2,7:4,3:8,5:s,34:n,35:o,36:g}),e(t,i,{4:2,7:4,6:9,3:10,5:s,8:[1,11],34:n,35:o,36:g}),{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(m,[2,34]),e(m,[2,35]),e(m,[2,36]),{1:[2,1]},e(t,i,{4:2,7:4,3:21,5:s,34:n,35:o,36:g}),{1:[2,3]},e(m,[2,5]),e(t,[2,7],{4:22,34:n,35:o,36:g}),{11:23,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},{11:39,13:38,24:W,27:z,29:40,30:41,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},{11:45,15:44,27:U,33:46,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},{11:49,17:48,24:X,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},{11:52,17:51,24:X,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},{20:[1,53]},{22:[1,54]},e(l,[2,18]),{1:[2,2]},e(l,[2,8]),e(l,[2,9]),e(L,[2,37],{40:55,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c}),e(L,[2,38]),e(L,[2,39]),e(S,[2,40]),e(S,[2,42]),e(S,[2,43]),e(S,[2,44]),e(S,[2,45]),e(S,[2,46]),e(S,[2,47]),e(S,[2,48]),e(S,[2,49]),e(S,[2,50]),e(S,[2,51]),e(l,[2,10]),e(l,[2,22],{30:41,29:56,24:W,27:z}),e(l,[2,24]),e(l,[2,25]),{31:[1,57]},{11:59,32:58,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},e(l,[2,11]),e(l,[2,30],{33:60,27:U}),e(l,[2,32]),{31:[1,61]},e(l,[2,12]),{17:62,24:X},{25:63,27:R},e(l,[2,14]),{17:65,24:X},e(l,[2,16]),e(l,[2,17]),e(S,[2,41]),e(l,[2,23]),{27:[1,66]},{26:[1,67]},{26:[2,29],28:[1,68]},e(l,[2,31]),{27:[1,69]},e(l,[2,13]),{26:[1,70]},{26:[2,21],28:[1,71]},e(l,[2,15]),e(l,[2,26]),e(l,[2,27]),{11:59,32:72,37:24,38:p,39:k,40:27,41:v,42:C,43:b,44:E,45:D,46:P,47:I,48:y,49:_,50:c},e(l,[2,33]),e(l,[2,19]),{25:73,27:R},{26:[2,28]},{26:[2,20]}],defaultActions:{8:[2,1],10:[2,3],21:[2,2],72:[2,28],73:[2,20]},parseError:a(function(h,u){if(u.recoverable)this.trace(h);else{var x=new Error(h);throw x.hash=u,x}},"parseError"),parse:a(function(h){var u=this,x=[0],d=[],w=[null],r=[],at=this.table,f="",lt=0,It=0,hi=2,Mt=1,li=r.slice.call(arguments,1),T=Object.create(this.lexer),Y={yy:{}};for(var dt in this.yy)Object.prototype.hasOwnProperty.call(this.yy,dt)&&(Y.yy[dt]=this.yy[dt]);T.setInput(h,Y.yy),Y.yy.lexer=T,Y.yy.parser=this,typeof T.yylloc>"u"&&(T.yylloc={});var ft=T.yylloc;r.push(ft);var ci=T.options&&T.options.ranges;typeof Y.yy.parseError=="function"?this.parseError=Y.yy.parseError:this.parseError=Object.getPrototypeOf(this).parseError;function ui(V){x.length=x.length-2*V,w.length=w.length-V,r.length=r.length-V}a(ui,"popStack");function Vt(){var V;return V=d.pop()||T.lex()||Mt,typeof V!="number"&&(V instanceof Array&&(d=V,V=d.pop()),V=u.symbols_[V]||V),V}a(Vt,"lex");for(var M,H,B,pt,q={},ct,O,Bt,ut;;){if(H=x[x.length-1],this.defaultActions[H]?B=this.defaultActions[H]:((M===null||typeof M>"u")&&(M=Vt()),B=at[H]&&at[H][M]),typeof B>"u"||!B.length||!B[0]){var mt="";ut=[];for(ct in at[H])this.terminals_[ct]&&ct>hi&&ut.push("'"+this.terminals_[ct]+"'");T.showPosition?mt="Parse error on line "+(lt+1)+`:
 `+T.showPosition()+`
 Expecting `+ut.join(", ")+", got '"+(this.terminals_[M]||M)+"'":mt="Parse error on line "+(lt+1)+": Unexpected "+(M==Mt?"end of input":"'"+(this.terminals_[M]||M)+"'"),this.parseError(mt,{text:T.match,token:this.terminals_[M]||M,line:T.yylineno,loc:ft,expected:ut})}if(B[0]instanceof Array&&B.length>1)throw new Error("Parse Error: multiple actions possible at state: "+H+", token: "+M);switch(B[0]){case 1:x.push(M),w.push(T.yytext),r.push(T.yylloc),x.push(B[1]),M=null,It=T.yyleng,f=T.yytext,lt=T.yylineno,ft=T.yylloc;break;case 2:if(O=this.productions_[B[1]][1],q.$=w[w.length-O],q._$={first_line:r[r.length-(O||1)].first_line,last_line:r[r.length-1].last_line,first_column:r[r.length-(O||1)].first_column,last_column:r[r.length-1].last_column},ci&&(q._$.range=[r[r.length-(O||1)].range[0],r[r.length-1].range[1]]),pt=this.performAction.apply(q,[f,It,lt,Y.yy,B[1],w,r].concat(li)),typeof pt<"u")return pt;O&&(x=x.slice(0,-1*O*2),w=w.slice(0,-1*O),r=r.slice(0,-1*O)),x.push(this.productions_[B[1]][0]),w.push(q.$),r.push(q._$),Bt=at[x[x.length-2]][x[x.length-1]],x.push(Bt);break;case 3:return!0}}return!0},"parse")},Et=function(){var F={EOF:1,parseError:a(function(u,x){if(this.yy.parser)this.yy.parser.parseError(u,x);else throw new Error(u)},"parseError"),setInput:a(function(h,u){return this.yy=u||this.yy||{},this._input=h,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},"setInput"),input:a(function(){var h=this._input[0];this.yytext+=h,this.yyleng++,this.offset++,this.match+=h,this.matched+=h;var u=h.match(/(?:\r\n?|\n).*/g);return u?(this.yylineno++,this.yylloc.last_line++):this.yylloc.last_column++,this.options.ranges&&this.yylloc.range[1]++,this._input=this._input.slice(1),h},"input"),unput:a(function(h){var u=h.length,x=h.split(/(?:\r\n?|\n)/g);this._input=h+this._input,this.yytext=this.yytext.substr(0,this.yytext.length-u),this.offset-=u;var d=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),x.length-1&&(this.yylineno-=x.length-1);var w=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:x?(x.length===d.length?this.yylloc.first_column:0)+d[d.length-x.length].length-x[0].length:this.yylloc.first_column-u},this.options.ranges&&(this.yylloc.range=[w[0],w[0]+this.yyleng-u]),this.yyleng=this.yytext.length,this},"unput"),more:a(function(){return this._more=!0,this},"more"),reject:a(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},"reject"),less:a(function(h){this.unput(this.match.slice(h))},"less"),pastInput:a(function(){var h=this.matched.substr(0,this.matched.length-this.match.length);return(h.length>20?"...":"")+h.substr(-20).replace(/\n/g,"")},"pastInput"),upcomingInput:a(function(){var h=this.match;return h.length<20&&(h+=this._input.substr(0,20-h.length)),(h.substr(0,20)+(h.length>20?"...":"")).replace(/\n/g,"")},"upcomingInput"),showPosition:a(function(){var h=this.pastInput(),u=new Array(h.length+1).join("-");return h+this.upcomingInput()+`

package/dist/index.html

@@ -12,10 +12,10 @@
                 padding: 0;
             }
         </style>
-      <script type="module" crossorigin src="/assets/index-BDnjyX2X.js"></script>
-      <link rel="stylesheet" crossorigin href="/assets/index-DkUikjP8.css">
+      <script type="module" crossorigin src="/assets/index-Cx_WzRmY.js"></script>
+      <link rel="stylesheet" crossorigin href="/assets/index-z3jA17TL.css">
     </head>
     <body>
-        <div id="root" class="h-screen w-screen"></div>
+        <div id="root" class="h-screen w-screen flex"></div>
     </body>
 </html>

package/index.html

@@ -14,7 +14,7 @@
         </style>
     </head>
     <body>
-        <div id="root" class="h-screen w-screen"></div>
+        <div id="root" class="h-screen w-screen flex"></div>
         <script type="module" src="./test/main.tsx"></script>
     </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langgraph-js/ui",
-  "version": "5.3.0",
+  "version": "5.5.0",
   "description": "",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -12,17 +12,23 @@
   "main": "./dist/react/src/index.js",
   "type": "module",
   "dependencies": {
+    "@langchain/core": "^1.0.2",
+    "@langchain/langgraph": "^1.0.2",
+    "@langchain/openai": "^1.0.0",
     "@langgraph-js/open-smith": "^2.3.0",
+    "@langgraph-js/pro": "^2.0.1",
+    "@langgraph-js/pure-graph": "^2.5.1",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@tailwindcss/vite": "^4.1.14",
     "@vitejs/plugin-basic-ssl": "^2.1.0",
-    "@vitejs/plugin-react": "^5.0.4",
+    "@vitejs/plugin-react": "^5.1.1",
     "ai-artifacts": "^1.3.1",
+    "hono": "^4.10.4",
+    "langchain": "^1.1.1",
     "next-themes": "^0.4.6",
     "sonner": "^2.0.7",
-    "@langchain/core": "^1.0.2",
-    "@langchain/openai": "^1.0.0",
-    "hono": "^4.10.4",
-    "vite": "^7"
+    "vite": "^6"
   },
   "devDependencies": {
     "@andypf/json-viewer": "^2.2.0",
@@ -46,7 +52,7 @@
     "minisearch": "^7.1.2",
     "motion": "^12.16.0",
     "nanostores": "^1.0.1",
-    "react": "^19",
+    "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-syntax-highlighter": "^15.6.6",
     "streamdown": "^1.4.0",
@@ -54,7 +60,7 @@
     "tailwindcss": "^4.1.14",
     "tw-animate-css": "^1.4.0",
     "zod": "^4",
-    "@langgraph-js/sdk": "3.6.0"
+    "@langgraph-js/sdk": "3.7.0"
   },
   "scripts": {
     "dev": "vite",

package/server/graph/debugAgent.ts

@@ -0,0 +1,42 @@
+import { entrypoint } from "@langchain/langgraph";
+import { z } from "zod";
+import { createEntrypointGraph } from "@langgraph-js/pure-graph";
+import { ChatOpenAI } from "@langchain/openai";
+import { createAgent, humanInTheLoopMiddleware } from "langchain";
+import { AgentState } from "@langgraph-js/pro";
+
+const State = AgentState.merge(
+    z.object({
+        model_name: z.string().default("gpt-4o-mini"),
+        api_key: z.string().optional(),
+        api_host: z.string().optional(),
+    })
+);
+
+const workflow = entrypoint({ name: "debug-agent" }, async (state: z.infer<typeof State>) => {
+    const model = new ChatOpenAI({
+        model: state.model_name,
+        useResponsesApi: false,
+        apiKey: state.api_key,
+        configuration: {
+            baseURL: state.api_host,
+        },
+    });
+    const agent = createAgent({
+        model,
+        systemPrompt: "你是一个消息检查助手，能够使用工具检查用户和 AI 之间的对话",
+        tools: [],
+        middleware: [
+            humanInTheLoopMiddleware({
+                interruptOn: {},
+            }),
+        ],
+        stateSchema: State,
+    });
+    return agent.invoke(state);
+});
+
+export const graph = createEntrypointGraph({
+    stateSchema: State,
+    graph: workflow,
+});

package/server/index.ts

@@ -1,7 +1,12 @@
-import { Hono } from "hono";
 import testModelApp from "./test-for-model";
+import { Hono } from "hono";
+import LangGraphApp from "@langgraph-js/pure-graph/dist/adapter/hono/index.js";
+import { registerGraph } from "@langgraph-js/pure-graph";
+import { graph } from "./graph/debugAgent";
 
 export default (app: Hono) => {
+    registerGraph("graph", graph);
     app.route("/llm", testModelApp);
+    app.route("/graph", LangGraphApp);
     return app;
 };

package/src/chat/Chat.tsx

@@ -11,7 +11,7 @@ import type { SupportedFileType } from "./components/FileList";
 import JsonEditorPopup from "./components/JsonEditorPopup";
 import { GraphPanel } from "../graph/GraphPanel";
 import { setLocalConfig } from "./store";
-import { History, Network, FileJson, Settings, Send, UploadCloudIcon, GitBranch, TestTube, Terminal, Printer, BotIcon } from "lucide-react";
+import { History, Network, FileJson, Settings, Send, UploadCloudIcon, GitBranch, TestTube, Terminal, Printer, BotIcon, Bug } from "lucide-react";
 import { ArtifactViewer } from "../artifacts/ArtifactViewer";
 import "github-markdown-css/github-markdown.css";
 
@@ -19,19 +19,20 @@ import "./index.css";
 import { show_form } from "./tools/index";
 import { create_artifacts } from "./tools/create_artifacts";
 import SettingPanel from "../settings/SettingPanel";
-import ModelTesterPopup from "./components/ModelTesterPopup";
 import { toast } from "sonner";
 import { Toaster } from "@/components/ui/sonner";
 
 import { MonitorProvider, Monitor, useMonitor } from "../monitor";
 import UploadButton from "./components/UploadButton";
 import { __default_tool__ } from "./tools/human-in-the-loop";
+import DebugPanel from "../debugPanel/DebugPanel";
+import { useDebugPanel } from "../debugPanel/Context";
 
 const ChatMessages: React.FC = () => {
     const { renderMessages, loading, inChatError, client, collapsedTools, toggleToolCollapse, isFELocking } = useChat();
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const MessageContainer = useRef<HTMLDivElement>(null);
-
+    const { setMessagesContext } = useDebugPanel();
     const scrollToBottom = () => {
         messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
     };
@@ -50,11 +51,11 @@ const ChatMessages: React.FC = () => {
 
     useEffect(() => {
         if (renderMessages.length > 0 && MessageContainer.current) {
-            console.log(renderMessages);
             // 切换消息时，自动滚动到底部
             if (!loading) {
                 scrollToBottom();
             }
+            setMessagesContext(renderMessages);
         }
     }, [renderMessages]);
 
@@ -89,7 +90,7 @@ const ChatMessages: React.FC = () => {
 const ChatInput: React.FC = () => {
     const { userInput, renderMessages, setUserInput, loading, sendMessage, stopGeneration, currentAgent, setCurrentAgent, client, currentChatId } = useChat();
     const { extraParams } = useExtraParams();
-    const { openMonitorWithChat } = useMonitor();
+    const monitor = useMonitor();
     const { mediaUrls, isFileTextMode, setIsFileTextMode } = useFileList();
     const _setCurrentAgent = (agent: string) => {
         localStorage.setItem("defaultAgent", agent);
@@ -216,7 +217,7 @@ const ChatInput: React.FC = () => {
                 <UsageMetadata usage_metadata={client?.tokenCounter || {}} />
                 <div className="flex items-center gap-2">
                     {!!currentChatId && (
-                        <span className="cursor-pointer text-xs text-gray-300 dark:text-gray-500" onClick={() => openMonitorWithChat(currentChatId)}>
+                        <span className="cursor-pointer text-xs text-gray-300 dark:text-gray-500" onClick={() => monitor?.openMonitorWithChat(currentChatId)}>
                             会话 ID: {currentChatId}
                         </span>
                     )}
@@ -229,11 +230,11 @@ const ChatInput: React.FC = () => {
 const Chat: React.FC = () => {
     const [isPopupOpen, setIsPopupOpen] = useState(false);
     const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-    const [isModelTesterOpen, setIsModelTesterOpen] = useState(false);
     const { showHistory, toggleHistoryVisible, showGraph, toggleGraphVisible, renderMessages, setTools, client } = useChat();
     const { extraParams, setExtraParams } = useExtraParams();
     const { showArtifact, sendMessage } = useChat();
-    const { openMonitor } = useMonitor();
+    const monitor = useMonitor();
+    const { toggleDebugPanel, isDebugPanelVisible } = useDebugPanel();
     useEffect(() => {
         setTools([show_form, create_artifacts, __default_tool__]);
     }, []);
@@ -265,13 +266,7 @@ const Chat: React.FC = () => {
                         <FileJson className="w-4 h-4" />
                         额外参数
                     </button>
-                    <button
-                        onClick={() => setIsModelTesterOpen(true)}
-                        className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 cursor-pointer rounded-xl hover:bg-gray-100 focus:outline-none transition-colors flex items-center gap-2"
-                    >
-                        <BotIcon className="w-4 h-4" />
-                        模型测试器
-                    </button>
+
                     <button
                         id="setting-button"
                         onClick={() => setIsSettingsOpen(true)}
@@ -290,6 +285,7 @@ const Chat: React.FC = () => {
                         <Printer className="w-4 h-4" />
                         打印 State
                     </button>
+
                     {/* <button
                         className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 cursor-pointer rounded-xl hover:bg-gray-100 focus:outline-none transition-colors flex items-center gap-2"
                         onClick={() => {
@@ -303,12 +299,21 @@ const Chat: React.FC = () => {
                     <button
                         className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 cursor-pointer rounded-xl hover:bg-gray-100 focus:outline-none transition-colors flex items-center gap-2"
                         onClick={() => {
-                            openMonitor("/api/open-smith/ui/index.html");
+                            monitor?.openMonitor("/api/open-smith/ui/index.html");
                         }}
                     >
                         <Terminal className="w-4 h-4" />
                         控制台
                     </button>
+                    <button
+                        onClick={toggleDebugPanel}
+                        className={`px-4 py-2 text-sm font-medium cursor-pointer rounded-xl focus:outline-none transition-colors flex items-center gap-2 ${
+                            isDebugPanelVisible ? "text-blue-700 bg-blue-50 border border-blue-200 hover:bg-blue-100" : "text-gray-700 bg-white border border-gray-200 hover:bg-gray-100"
+                        }`}
+                    >
+                        <Bug className="w-4 h-4" />
+                        调试面板
+                    </button>
                 </header>
                 <main className="flex-1 overflow-hidden max-w-6xl w-full h-full  flex flex-col">
                     <ChatMessages />
@@ -324,7 +329,6 @@ const Chat: React.FC = () => {
                     title="编辑额外参数"
                     description="额外参数用于在发送消息时附加到 LangGraph 的 State 中。"
                 />
-                <ModelTesterPopup isOpen={isModelTesterOpen} onClose={() => setIsModelTesterOpen(false)} />
                 <SettingPanel isOpen={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} />
             </section>
             {(showGraph || showArtifact) && (

package/src/chat/components/MessageAI.tsx

@@ -3,7 +3,7 @@ import { RenderMessage } from "@langgraph-js/sdk";
 import { UsageMetadata } from "./UsageMetadata";
 import { getMessageContent } from "@langgraph-js/sdk";
 import { Response } from "@/components/ai-elements/response";
-
+import { Reasoning } from "./Reasoning";
 interface MessageAIProps {
     message: RenderMessage;
 }
@@ -12,6 +12,8 @@ const MessageAI: React.FC<MessageAIProps> = ({ message }) => {
     return (
         <div className="flex flex-col w-[80%] bg-white rounded-2xl px-5 py-4 border border-gray-200">
             <div className="text-xs font-medium text-gray-500 mb-3">{message.name}</div>
+            {message.additional_kwargs?.reasoning_content ? <Reasoning message={message} className="mb-4" /> : null}
+
             <div className="markdown-body max-w-none">
                 <Response>{getMessageContent(message.content)}</Response>
             </div>

package/src/chat/components/MessageTool.tsx

@@ -5,7 +5,35 @@ import { useChat } from "@langgraph-js/sdk/react";
 import { MessagesBox } from "./MessageBox";
 import { Response } from "@/components/ai-elements/response";
 import { CodeBlock } from "../../components/ai-elements/code-block";
+import { Reasoning } from "./Reasoning";
 
+const getStatusColor = (status: string) => {
+    switch (status) {
+        case "done":
+            return "text-green-600 bg-green-50 border-green-200";
+        case "loading":
+            return "text-blue-600 bg-blue-50 border-blue-200";
+        case "processing":
+            return "text-orange-600 bg-orange-50 border-orange-200";
+        case "idle":
+        default:
+            return "text-gray-600 bg-gray-50 border-gray-200";
+    }
+};
+
+const getStatusIcon = (status: string) => {
+    switch (status) {
+        case "done":
+            return "✓";
+        case "loading":
+            return "⟳";
+        case "processing":
+            return "⋯";
+        case "idle":
+        default:
+            return "○";
+    }
+};
 const TOOL_COLORS = ["bg-white", "bg-white", "bg-white", "bg-white", "bg-white", "bg-white", "bg-white"];
 
 interface MessageToolProps {
@@ -27,14 +55,22 @@ const MessageTool: React.FC<MessageToolProps> = ({ message, isCollapsed, onToggl
     const { getToolUIRender, client } = useChat();
     const render = getToolUIRender(message.name || "");
     const bgColorClass = getToolColorClass(message.name || "");
-    const onHumanClick = (type: string) => {
-        return client?.doneFEToolWaiting(message.id as string, {
-            decisions: [
-                {
-                    type: type as "approve",
-                },
-            ],
-        });
+    const [processingDecision, setProcessingDecision] = useState<string | null>(null);
+
+    const onHumanClick = async (type: string) => {
+        setProcessingDecision(type);
+        try {
+            await client?.doneFEToolWaiting(message.id as string, {
+                decisions: [
+                    {
+                        type: type as "approve",
+                    },
+                ],
+            });
+        } finally {
+            // 短暂延迟后清除处理状态，让状态更新有时间生效
+            setTimeout(() => setProcessingDecision(null), 500);
+        }
     };
     const tool = new ToolRenderData(message, client!);
     const humanInTheLoopButton = () => {
@@ -44,13 +80,19 @@ const MessageTool: React.FC<MessageToolProps> = ({ message, isCollapsed, onToggl
                 for (let j of i.value.reviewConfigs) {
                     if (j.actionName === message.name) {
                         return j.allowedDecisions.map((k) => {
+                            const isProcessing = processingDecision === k;
                             return (
                                 <button
                                     key={k}
-                                    className="px-3 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
-                                    onClick={() => onHumanClick(k)}
+                                    className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors ${
+                                        isProcessing
+                                            ? "text-orange-700 bg-orange-100 border border-orange-300 cursor-not-allowed"
+                                            : "text-gray-700 bg-white border border-gray-200 hover:bg-gray-100 cursor-pointer"
+                                    }`}
+                                    onClick={() => !isProcessing && onHumanClick(k)}
+                                    disabled={isProcessing}
                                 >
-                                    {k}
+                                    {isProcessing ? "处理中..." : k}
                                 </button>
                             );
                         });
@@ -70,15 +112,19 @@ const MessageTool: React.FC<MessageToolProps> = ({ message, isCollapsed, onToggl
                         <div className="text-xs font-medium text-gray-600" onClick={() => console.log(message)}>
                             {message.node_name} | {message.name}
                         </div>
-                        <div>
+                        <div className="flex gap-2">
                             {humanInTheLoopButton()}
 
-                            <div className="text-sm">{tool.state}</div>
+                            <div className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md border ${getStatusColor(tool.state)}`}>
+                                <span>{getStatusIcon(tool.state)}</span>
+                                <span>{tool.state}</span>
+                            </div>
                         </div>
                     </div>
 
                     {!isCollapsed && (
                         <div className="flex flex-col gap-4 px-5 pb-4">
+                            {message.additional_kwargs?.reasoning_content ? <Reasoning message={message} /> : null}
                             <Previewer content={JSON.stringify(tool.getInputRepaired(), null, 2) || ""} />
                             <Previewer content={getMessageContent(message.content)} />
                             <UsageMetadata

package/src/chat/components/Reasoning.tsx

@@ -0,0 +1,21 @@
+import {
+    ChainOfThought,
+    ChainOfThoughtContent,
+    ChainOfThoughtHeader,
+    ChainOfThoughtImage,
+    ChainOfThoughtSearchResult,
+    ChainOfThoughtSearchResults,
+    ChainOfThoughtStep,
+} from "../../components/ai-elements/chain-of-thought";
+import { RenderMessage } from "@langgraph-js/sdk";
+
+export const Reasoning = (props: { message: RenderMessage; className?: string }) => {
+    return (
+        <ChainOfThought defaultOpen className={props.className}>
+            <ChainOfThoughtHeader>思考内容</ChainOfThoughtHeader>
+            <ChainOfThoughtContent>
+                <ChainOfThoughtStep label={(props.message.additional_kwargs?.reasoning_content as string) || ""} status="complete" />
+            </ChainOfThoughtContent>
+        </ChainOfThought>
+    );
+};

package/src/chat/components/UsageMetadata.tsx

@@ -25,7 +25,7 @@ export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, sp
     const speed = spend_time ? ((usage_metadata.output_tokens || 0) * 1000) / (spend_time || 1) : 0;
     spend_time = spend_time && !isNaN(spend_time) ? spend_time : 0;
     const { currentChatId } = useChat();
-    const { openMonitorWithChat } = useMonitor();
+    const monitor = useMonitor();
     return (
         <div className="flex items-center justify-between text-xs text-gray-400 mt-3">
             <div className="flex items-center gap-3">
@@ -37,7 +37,7 @@ export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, sp
                 {response_metadata?.model_name && <span className="text-gray-500">{response_metadata.model_name}</span>}
                 {tool_call_id && <span className="text-gray-400">Tool: {tool_call_id}</span>}
                 {id && (
-                    <span className="text-gray-400" onClick={() => openMonitorWithChat(currentChatId!, id)}>
+                    <span className="text-gray-400" onClick={() => monitor?.openMonitorWithChat(currentChatId!, id)}>
                         ID: {id}
                     </span>
                 )}