@langgraph-js/ui 5.4.0 → 5.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/dist/assets/{arc-DQUrjEml.js → arc-C7vMWMZO.js} +1 -1
  2. package/dist/assets/architectureDiagram-VXUJARFQ-KtfX36pw.js +36 -0
  3. package/dist/assets/blockDiagram-VD42YOAC-BlrV4_0w.js +122 -0
  4. package/dist/assets/c4Diagram-YG6GDRKO-AMYk1qYx.js +10 -0
  5. package/dist/assets/channel-aNvW8Gsa.js +1 -0
  6. package/dist/assets/chunk-4BX2VUAB-TwKwjmZd.js +1 -0
  7. package/dist/assets/{chunk-55IACEB6-CDCucU6U.js → chunk-55IACEB6-C7lUh2is.js} +1 -1
  8. package/dist/assets/{chunk-B4BG7PRW-B_bvOmJU.js → chunk-B4BG7PRW-IbwY5FbU.js} +6 -6
  9. package/dist/assets/chunk-DI55MBZ5-DEjzg2ZG.js +220 -0
  10. package/dist/assets/{chunk-FMBD7UC4-C54-XKR7.js → chunk-FMBD7UC4-C6hxzrsQ.js} +1 -1
  11. package/dist/assets/chunk-QN33PNHL-Yrg5RjXO.js +1 -0
  12. package/dist/assets/{chunk-QZHKN3VN-WNR9TOch.js → chunk-QZHKN3VN-Ba9nUK7B.js} +1 -1
  13. package/dist/assets/{chunk-TZMSLE5B-7H_0y6Jq.js → chunk-TZMSLE5B-Bn2dCGYE.js} +1 -1
  14. package/dist/assets/classDiagram-2ON5EDUG-D8udSpBf.js +1 -0
  15. package/dist/assets/classDiagram-v2-WZHVMYZB-D8udSpBf.js +1 -0
  16. package/dist/assets/clone-Bg-QuoUw.js +1 -0
  17. package/dist/assets/cose-bilkent-S5V4N54A-BqmwzEGu.js +1 -0
  18. package/dist/assets/cytoscape.esm-CyJtwmzi.js +331 -0
  19. package/dist/assets/dagre-6UL2VRFP-B_NVSG2k.js +4 -0
  20. package/dist/assets/diagram-PSM6KHXK-BpyYnmEs.js +24 -0
  21. package/dist/assets/diagram-QEK2KX5R-C7HCtzX0.js +43 -0
  22. package/dist/assets/diagram-S2PKOQOG-DU2kmWnz.js +24 -0
  23. package/dist/assets/{erDiagram-Q2GNP2WA-tT_ZIA6k.js → erDiagram-Q2GNP2WA-BudcYXYN.js} +4 -4
  24. package/dist/assets/flowDiagram-NV44I4VS-jLX0sPg6.js +162 -0
  25. package/dist/assets/{ganttDiagram-LVOFAZNH-D8dtKJe7.js → ganttDiagram-LVOFAZNH-BvM-BjRk.js} +1 -1
  26. package/dist/assets/gitGraphDiagram-NY62KEGX-CeK1oQiU.js +65 -0
  27. package/dist/assets/{graph-BuzEybDF.js → graph-BDYO4Vh7.js} +1 -1
  28. package/dist/assets/index-CGXfejr1.js +910 -0
  29. package/dist/assets/index-z3jA17TL.css +1 -0
  30. package/dist/assets/{infoDiagram-F6ZHWCRC-DxSSCHjJ.js → infoDiagram-F6ZHWCRC-d2LjnxEL.js} +1 -1
  31. package/dist/assets/{isUndefined-CMHFQ84G.js → isUndefined-DAOIMO73.js} +1 -1
  32. package/dist/assets/{journeyDiagram-XKPGCS4Q-BevCzXS0.js → journeyDiagram-XKPGCS4Q-D7WAK1ea.js} +1 -1
  33. package/dist/assets/kanban-definition-3W4ZIXB7-BadVT-MR.js +89 -0
  34. package/dist/assets/{layout-CRoaNhL7.js → layout-DR15A61G.js} +1 -1
  35. package/dist/assets/{linear-CZCbyP3Y.js → linear-CJFGeLoQ.js} +1 -1
  36. package/dist/assets/mermaid.core-uMRr7BgD.js +197 -0
  37. package/dist/assets/min-CFeOpnpX.js +1 -0
  38. package/dist/assets/mindmap-definition-VGOIOE7T-GqZJXq7I.js +68 -0
  39. package/dist/assets/pieDiagram-ADFJNKIX-CxqGw6Kc.js +30 -0
  40. package/dist/assets/quadrantDiagram-AYHSOK5B-q-yYDsJe.js +7 -0
  41. package/dist/assets/{requirementDiagram-UZGBJVZJ-DsXoYXUv.js → requirementDiagram-UZGBJVZJ-Cg2IAu3S.js} +7 -7
  42. package/dist/assets/{sankeyDiagram-TZEHDZUN-BR0Y-EwJ.js → sankeyDiagram-TZEHDZUN-B6rjJSCB.js} +7 -7
  43. package/dist/assets/{sequenceDiagram-WL72ISMW-DI7AT-qP.js → sequenceDiagram-WL72ISMW-DCsELG7P.js} +16 -16
  44. package/dist/assets/{stateDiagram-FKZM4ZOC-oxL9LRWa.js → stateDiagram-FKZM4ZOC-BebmGJR9.js} +1 -1
  45. package/dist/assets/stateDiagram-v2-4FDKWEC3-B_r-CBlU.js +1 -0
  46. package/dist/assets/timeline-definition-IT6M3QCI-CCyBrK8t.js +61 -0
  47. package/dist/assets/treemap-KMMF4GRG-BFX2z4EH.js +128 -0
  48. package/dist/assets/{xychartDiagram-PRI3JC2R-tBcCr-MQ.js → xychartDiagram-PRI3JC2R-BhKifO0c.js} +1 -1
  49. package/dist/index.html +2 -2
  50. package/package.json +5 -3
  51. package/src/chat/Chat.tsx +14 -1
  52. package/src/chat/components/MessageAI.tsx +3 -1
  53. package/src/chat/components/MessageTool.tsx +60 -14
  54. package/src/chat/components/Reasoning.tsx +21 -0
  55. package/src/components/ai-elements/chain-of-thought.tsx +228 -0
  56. package/src/components/ui/badge.tsx +46 -0
  57. package/src/components/ui/collapsible.tsx +31 -0
  58. package/dist/assets/architectureDiagram-VXUJARFQ-HbPzZrlH.js +0 -36
  59. package/dist/assets/blockDiagram-VD42YOAC-D_Idys33.js +0 -122
  60. package/dist/assets/c4Diagram-YG6GDRKO-Cz8lYf2-.js +0 -10
  61. package/dist/assets/channel-B6KFe5Ui.js +0 -1
  62. package/dist/assets/chunk-4BX2VUAB-B-hX18OI.js +0 -1
  63. package/dist/assets/chunk-DI55MBZ5-BqSop0cW.js +0 -220
  64. package/dist/assets/chunk-QN33PNHL-BPnnBJ3E.js +0 -1
  65. package/dist/assets/classDiagram-2ON5EDUG-By_JhIEM.js +0 -1
  66. package/dist/assets/classDiagram-v2-WZHVMYZB-By_JhIEM.js +0 -1
  67. package/dist/assets/clone-BuF8XBFq.js +0 -1
  68. package/dist/assets/cose-bilkent-S5V4N54A-DYYnco-F.js +0 -1
  69. package/dist/assets/cytoscape.esm-TTflUzRS.js +0 -321
  70. package/dist/assets/dagre-6UL2VRFP-BuN5tYoM.js +0 -4
  71. package/dist/assets/diagram-PSM6KHXK-BqLZHOD_.js +0 -24
  72. package/dist/assets/diagram-QEK2KX5R-D6ihm09C.js +0 -43
  73. package/dist/assets/diagram-S2PKOQOG-Z4kDGPqZ.js +0 -24
  74. package/dist/assets/flowDiagram-NV44I4VS-DP4XZFAl.js +0 -162
  75. package/dist/assets/gitGraphDiagram-NY62KEGX-CHTqjWSe.js +0 -65
  76. package/dist/assets/index-C2dvtkqk.css +0 -1
  77. package/dist/assets/index-C7NPwb1W.js +0 -623
  78. package/dist/assets/index-CRO3NlHm.js +0 -1
  79. package/dist/assets/kanban-definition-3W4ZIXB7-Datdpuzc.js +0 -89
  80. package/dist/assets/mermaid.core-oWlc3CvG.js +0 -191
  81. package/dist/assets/min-B-Brdcc-.js +0 -1
  82. package/dist/assets/mindmap-definition-VGOIOE7T-C2cLH6vf.js +0 -68
  83. package/dist/assets/pieDiagram-ADFJNKIX-lHSlzymq.js +0 -30
  84. package/dist/assets/quadrantDiagram-AYHSOK5B-Cu4iHHyE.js +0 -7
  85. package/dist/assets/stateDiagram-v2-4FDKWEC3-C9dX-PKL.js +0 -1
  86. package/dist/assets/timeline-definition-IT6M3QCI-Dj8UUbRz.js +0 -61
  87. package/dist/assets/treemap-KMMF4GRG-oIIgGlOX.js +0 -128
@@ -1,4 +1,4 @@
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-oWlc3CvG.js";import"./index-C7NPwb1W.js";import{i as _i}from"./init-Gi6I4Gst.js";import{o as ki}from"./ordinal-Cboi1Yqb.js";import{l as zt}from"./linear-CZCbyP3Y.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)+`:
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-uMRr7BgD.js";import"./index-CGXfejr1.js";import{i as _i}from"./init-Gi6I4Gst.js";import{o as ki}from"./ordinal-Cboi1Yqb.js";import{l as zt}from"./linear-CJFGeLoQ.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)+`:
2
2
  `+T.showPosition()+`
3
3
  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).
4
4
  `+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 CHANGED
@@ -12,8 +12,8 @@
12
12
  padding: 0;
13
13
  }
14
14
  </style>
15
- <script type="module" crossorigin src="/assets/index-C7NPwb1W.js"></script>
16
- <link rel="stylesheet" crossorigin href="/assets/index-C2dvtkqk.css">
15
+ <script type="module" crossorigin src="/assets/index-CGXfejr1.js"></script>
16
+ <link rel="stylesheet" crossorigin href="/assets/index-z3jA17TL.css">
17
17
  </head>
18
18
  <body>
19
19
  <div id="root" class="h-screen w-screen flex"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@langgraph-js/ui",
3
- "version": "5.4.0",
3
+ "version": "5.5.1",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/",
@@ -18,6 +18,8 @@
18
18
  "@langgraph-js/open-smith": "^2.3.0",
19
19
  "@langgraph-js/pro": "^2.0.1",
20
20
  "@langgraph-js/pure-graph": "^2.5.1",
21
+ "@radix-ui/react-collapsible": "^1.1.12",
22
+ "@radix-ui/react-use-controllable-state": "^1.2.2",
21
23
  "@tailwindcss/vite": "^4.1.14",
22
24
  "@vitejs/plugin-basic-ssl": "^2.1.0",
23
25
  "@vitejs/plugin-react": "^5.1.1",
@@ -26,7 +28,7 @@
26
28
  "langchain": "^1.1.1",
27
29
  "next-themes": "^0.4.6",
28
30
  "sonner": "^2.0.7",
29
- "vite": "^7"
31
+ "vite": "^6"
30
32
  },
31
33
  "devDependencies": {
32
34
  "@andypf/json-viewer": "^2.2.0",
@@ -58,7 +60,7 @@
58
60
  "tailwindcss": "^4.1.14",
59
61
  "tw-animate-css": "^1.4.0",
60
62
  "zod": "^4",
61
- "@langgraph-js/sdk": "3.6.0"
63
+ "@langgraph-js/sdk": "3.7.1"
62
64
  },
63
65
  "scripts": {
64
66
  "dev": "vite",
package/src/chat/Chat.tsx CHANGED
@@ -4,7 +4,7 @@ import HistoryList from "./components/HistoryList";
4
4
  import { ChatProvider, useChat } from "@langgraph-js/sdk/react";
5
5
  import { ExtraParamsProvider, useExtraParams } from "./context/ExtraParamsContext";
6
6
  import { UsageMetadata } from "./components/UsageMetadata";
7
- import { Message } from "@langgraph-js/sdk";
7
+ import { createLowerJSClient, Message } from "@langgraph-js/sdk";
8
8
  import FileList from "./components/FileList";
9
9
  import { FileListProvider, useFileList } from "./components/FileListContext";
10
10
  import type { SupportedFileType } from "./components/FileList";
@@ -420,6 +420,19 @@ const ChatWrapper: React.FC = () => {
420
420
  showHistory={config.showHistory}
421
421
  showGraph={config.showGraph}
422
422
  fallbackToAvailableAssistants={true}
423
+ // client={createLowerJSClient({
424
+ // apiUrl: config.apiUrl,
425
+ // defaultHeaders: config.defaultHeaders,
426
+ // callerOptions: {
427
+ // fetch: config.withCredentials
428
+ // ? (url: string, options: RequestInit) => {
429
+ // options.credentials = "include";
430
+ // return fetch(url, options);
431
+ // }
432
+ // : fetch,
433
+ // },
434
+ // })}
435
+ // legacyMode={true}
423
436
  onInitError={(err, currentAgent) => {
424
437
  // 默认错误处理
425
438
  toast.error("请检查服务器配置: " + currentAgent + "\n" + err, {
@@ -3,7 +3,7 @@ import { RenderMessage } from "@langgraph-js/sdk";
3
3
  import { UsageMetadata } from "./UsageMetadata";
4
4
  import { getMessageContent } from "@langgraph-js/sdk";
5
5
  import { Response } from "@/components/ai-elements/response";
6
-
6
+ import { Reasoning } from "./Reasoning";
7
7
  interface MessageAIProps {
8
8
  message: RenderMessage;
9
9
  }
@@ -12,6 +12,8 @@ const MessageAI: React.FC<MessageAIProps> = ({ message }) => {
12
12
  return (
13
13
  <div className="flex flex-col w-[80%] bg-white rounded-2xl px-5 py-4 border border-gray-200">
14
14
  <div className="text-xs font-medium text-gray-500 mb-3">{message.name}</div>
15
+ {message.additional_kwargs?.reasoning_content ? <Reasoning message={message} className="mb-4" /> : null}
16
+
15
17
  <div className="markdown-body max-w-none">
16
18
  <Response>{getMessageContent(message.content)}</Response>
17
19
  </div>
@@ -5,7 +5,35 @@ import { useChat } from "@langgraph-js/sdk/react";
5
5
  import { MessagesBox } from "./MessageBox";
6
6
  import { Response } from "@/components/ai-elements/response";
7
7
  import { CodeBlock } from "../../components/ai-elements/code-block";
8
+ import { Reasoning } from "./Reasoning";
8
9
 
10
+ const getStatusColor = (status: string) => {
11
+ switch (status) {
12
+ case "done":
13
+ return "text-green-600 bg-green-50 border-green-200";
14
+ case "loading":
15
+ return "text-blue-600 bg-blue-50 border-blue-200";
16
+ case "processing":
17
+ return "text-orange-600 bg-orange-50 border-orange-200";
18
+ case "idle":
19
+ default:
20
+ return "text-gray-600 bg-gray-50 border-gray-200";
21
+ }
22
+ };
23
+
24
+ const getStatusIcon = (status: string) => {
25
+ switch (status) {
26
+ case "done":
27
+ return "✓";
28
+ case "loading":
29
+ return "⟳";
30
+ case "processing":
31
+ return "⋯";
32
+ case "idle":
33
+ default:
34
+ return "○";
35
+ }
36
+ };
9
37
  const TOOL_COLORS = ["bg-white", "bg-white", "bg-white", "bg-white", "bg-white", "bg-white", "bg-white"];
10
38
 
11
39
  interface MessageToolProps {
@@ -27,30 +55,44 @@ const MessageTool: React.FC<MessageToolProps> = ({ message, isCollapsed, onToggl
27
55
  const { getToolUIRender, client } = useChat();
28
56
  const render = getToolUIRender(message.name || "");
29
57
  const bgColorClass = getToolColorClass(message.name || "");
30
- const onHumanClick = (type: string) => {
31
- return client?.doneFEToolWaiting(message.id as string, {
32
- decisions: [
33
- {
34
- type: type as "approve",
35
- },
36
- ],
37
- });
58
+ const [processingDecision, setProcessingDecision] = useState<string | null>(null);
59
+
60
+ const onHumanClick = async (type: string) => {
61
+ setProcessingDecision(type);
62
+ try {
63
+ await client?.doneFEToolWaiting(message.id as string, {
64
+ decisions: [
65
+ {
66
+ type: type as "approve",
67
+ },
68
+ ],
69
+ });
70
+ } finally {
71
+ // 短暂延迟后清除处理状态,让状态更新有时间生效
72
+ setTimeout(() => setProcessingDecision(null), 500);
73
+ }
38
74
  };
39
75
  const tool = new ToolRenderData(message, client!);
40
76
  const humanInTheLoopButton = () => {
41
- const hasHumanInTheLoop = tool.state === "loading" && tool.client.humanInTheLoop?.some((i) => i.value.reviewConfigs.some((j) => j.actionName === message.name));
77
+ const hasHumanInTheLoop = tool.state === "loading" && tool.client.humanInTheLoop?.some((i) => i.value.reviewConfigs?.some((j) => j.actionName === message.name));
42
78
  const inner = () => {
43
79
  for (let i of tool.client.humanInTheLoop!) {
44
80
  for (let j of i.value.reviewConfigs) {
45
81
  if (j.actionName === message.name) {
46
82
  return j.allowedDecisions.map((k) => {
83
+ const isProcessing = processingDecision === k;
47
84
  return (
48
85
  <button
49
86
  key={k}
50
- 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"
51
- onClick={() => onHumanClick(k)}
87
+ className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors ${
88
+ isProcessing
89
+ ? "text-orange-700 bg-orange-100 border border-orange-300 cursor-not-allowed"
90
+ : "text-gray-700 bg-white border border-gray-200 hover:bg-gray-100 cursor-pointer"
91
+ }`}
92
+ onClick={() => !isProcessing && onHumanClick(k)}
93
+ disabled={isProcessing}
52
94
  >
53
- {k}
95
+ {isProcessing ? "处理中..." : k}
54
96
  </button>
55
97
  );
56
98
  });
@@ -70,15 +112,19 @@ const MessageTool: React.FC<MessageToolProps> = ({ message, isCollapsed, onToggl
70
112
  <div className="text-xs font-medium text-gray-600" onClick={() => console.log(message)}>
71
113
  {message.node_name} | {message.name}
72
114
  </div>
73
- <div>
115
+ <div className="flex gap-2">
74
116
  {humanInTheLoopButton()}
75
117
 
76
- <div className="text-sm">{tool.state}</div>
118
+ <div className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md border ${getStatusColor(tool.state)}`}>
119
+ <span>{getStatusIcon(tool.state)}</span>
120
+ <span>{tool.state}</span>
121
+ </div>
77
122
  </div>
78
123
  </div>
79
124
 
80
125
  {!isCollapsed && (
81
126
  <div className="flex flex-col gap-4 px-5 pb-4">
127
+ {message.additional_kwargs?.reasoning_content ? <Reasoning message={message} /> : null}
82
128
  <Previewer content={JSON.stringify(tool.getInputRepaired(), null, 2) || ""} />
83
129
  <Previewer content={getMessageContent(message.content)} />
84
130
  <UsageMetadata
@@ -0,0 +1,21 @@
1
+ import {
2
+ ChainOfThought,
3
+ ChainOfThoughtContent,
4
+ ChainOfThoughtHeader,
5
+ ChainOfThoughtImage,
6
+ ChainOfThoughtSearchResult,
7
+ ChainOfThoughtSearchResults,
8
+ ChainOfThoughtStep,
9
+ } from "../../components/ai-elements/chain-of-thought";
10
+ import { RenderMessage } from "@langgraph-js/sdk";
11
+
12
+ export const Reasoning = (props: { message: RenderMessage; className?: string }) => {
13
+ return (
14
+ <ChainOfThought defaultOpen className={props.className}>
15
+ <ChainOfThoughtHeader>思考内容</ChainOfThoughtHeader>
16
+ <ChainOfThoughtContent>
17
+ <ChainOfThoughtStep label={(props.message.additional_kwargs?.reasoning_content as string) || ""} status="complete" />
18
+ </ChainOfThoughtContent>
19
+ </ChainOfThought>
20
+ );
21
+ };
@@ -0,0 +1,228 @@
1
+ "use client";
2
+
3
+ import { useControllableState } from "@radix-ui/react-use-controllable-state";
4
+ import { Badge } from "@/components/ui/badge";
5
+ import {
6
+ Collapsible,
7
+ CollapsibleContent,
8
+ CollapsibleTrigger,
9
+ } from "@/components/ui/collapsible";
10
+ import { cn } from "@/lib/utils";
11
+ import {
12
+ BrainIcon,
13
+ ChevronDownIcon,
14
+ DotIcon,
15
+ type LucideIcon,
16
+ } from "lucide-react";
17
+ import type { ComponentProps, ReactNode } from "react";
18
+ import { createContext, memo, useContext, useMemo } from "react";
19
+
20
+ type ChainOfThoughtContextValue = {
21
+ isOpen: boolean;
22
+ setIsOpen: (open: boolean) => void;
23
+ };
24
+
25
+ const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(
26
+ null
27
+ );
28
+
29
+ const useChainOfThought = () => {
30
+ const context = useContext(ChainOfThoughtContext);
31
+ if (!context) {
32
+ throw new Error(
33
+ "ChainOfThought components must be used within ChainOfThought"
34
+ );
35
+ }
36
+ return context;
37
+ };
38
+
39
+ export type ChainOfThoughtProps = ComponentProps<"div"> & {
40
+ open?: boolean;
41
+ defaultOpen?: boolean;
42
+ onOpenChange?: (open: boolean) => void;
43
+ };
44
+
45
+ export const ChainOfThought = memo(
46
+ ({
47
+ className,
48
+ open,
49
+ defaultOpen = false,
50
+ onOpenChange,
51
+ children,
52
+ ...props
53
+ }: ChainOfThoughtProps) => {
54
+ const [isOpen, setIsOpen] = useControllableState({
55
+ prop: open,
56
+ defaultProp: defaultOpen,
57
+ onChange: onOpenChange,
58
+ });
59
+
60
+ const chainOfThoughtContext = useMemo(
61
+ () => ({ isOpen, setIsOpen }),
62
+ [isOpen, setIsOpen]
63
+ );
64
+
65
+ return (
66
+ <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
67
+ <div
68
+ className={cn("not-prose max-w-prose space-y-4", className)}
69
+ {...props}
70
+ >
71
+ {children}
72
+ </div>
73
+ </ChainOfThoughtContext.Provider>
74
+ );
75
+ }
76
+ );
77
+
78
+ export type ChainOfThoughtHeaderProps = ComponentProps<
79
+ typeof CollapsibleTrigger
80
+ >;
81
+
82
+ export const ChainOfThoughtHeader = memo(
83
+ ({ className, children, ...props }: ChainOfThoughtHeaderProps) => {
84
+ const { isOpen, setIsOpen } = useChainOfThought();
85
+
86
+ return (
87
+ <Collapsible onOpenChange={setIsOpen} open={isOpen}>
88
+ <CollapsibleTrigger
89
+ className={cn(
90
+ "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
91
+ className
92
+ )}
93
+ {...props}
94
+ >
95
+ <BrainIcon className="size-4" />
96
+ <span className="flex-1 text-left">
97
+ {children ?? "Chain of Thought"}
98
+ </span>
99
+ <ChevronDownIcon
100
+ className={cn(
101
+ "size-4 transition-transform",
102
+ isOpen ? "rotate-180" : "rotate-0"
103
+ )}
104
+ />
105
+ </CollapsibleTrigger>
106
+ </Collapsible>
107
+ );
108
+ }
109
+ );
110
+
111
+ export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
112
+ icon?: LucideIcon;
113
+ label: ReactNode;
114
+ description?: ReactNode;
115
+ status?: "complete" | "active" | "pending";
116
+ };
117
+
118
+ export const ChainOfThoughtStep = memo(
119
+ ({
120
+ className,
121
+ icon: Icon = DotIcon,
122
+ label,
123
+ description,
124
+ status = "complete",
125
+ children,
126
+ ...props
127
+ }: ChainOfThoughtStepProps) => {
128
+ const statusStyles = {
129
+ complete: "text-muted-foreground",
130
+ active: "text-foreground",
131
+ pending: "text-muted-foreground/50",
132
+ };
133
+
134
+ return (
135
+ <div
136
+ className={cn(
137
+ "flex gap-2 text-sm",
138
+ statusStyles[status],
139
+ "fade-in-0 slide-in-from-top-2 animate-in",
140
+ className
141
+ )}
142
+ {...props}
143
+ >
144
+ <div className="relative mt-0.5">
145
+ <Icon className="size-4" />
146
+ <div className="-mx-px absolute top-7 bottom-0 left-1/2 w-px bg-border" />
147
+ </div>
148
+ <div className="flex-1 space-y-2">
149
+ <div>{label}</div>
150
+ {description && (
151
+ <div className="text-muted-foreground text-xs">{description}</div>
152
+ )}
153
+ {children}
154
+ </div>
155
+ </div>
156
+ );
157
+ }
158
+ );
159
+
160
+ export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
161
+
162
+ export const ChainOfThoughtSearchResults = memo(
163
+ ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (
164
+ <div className={cn("flex items-center gap-2", className)} {...props} />
165
+ )
166
+ );
167
+
168
+ export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
169
+
170
+ export const ChainOfThoughtSearchResult = memo(
171
+ ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (
172
+ <Badge
173
+ className={cn("gap-1 px-2 py-0.5 font-normal text-xs", className)}
174
+ variant="secondary"
175
+ {...props}
176
+ >
177
+ {children}
178
+ </Badge>
179
+ )
180
+ );
181
+
182
+ export type ChainOfThoughtContentProps = ComponentProps<
183
+ typeof CollapsibleContent
184
+ >;
185
+
186
+ export const ChainOfThoughtContent = memo(
187
+ ({ className, children, ...props }: ChainOfThoughtContentProps) => {
188
+ const { isOpen } = useChainOfThought();
189
+
190
+ return (
191
+ <Collapsible open={isOpen}>
192
+ <CollapsibleContent
193
+ className={cn(
194
+ "mt-2 space-y-3",
195
+ "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
196
+ className
197
+ )}
198
+ {...props}
199
+ >
200
+ {children}
201
+ </CollapsibleContent>
202
+ </Collapsible>
203
+ );
204
+ }
205
+ );
206
+
207
+ export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
208
+ caption?: string;
209
+ };
210
+
211
+ export const ChainOfThoughtImage = memo(
212
+ ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (
213
+ <div className={cn("mt-2 space-y-2", className)} {...props}>
214
+ <div className="relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3">
215
+ {children}
216
+ </div>
217
+ {caption && <p className="text-muted-foreground text-xs">{caption}</p>}
218
+ </div>
219
+ )
220
+ );
221
+
222
+ ChainOfThought.displayName = "ChainOfThought";
223
+ ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
224
+ ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
225
+ ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
226
+ ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
227
+ ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
228
+ ChainOfThoughtImage.displayName = "ChainOfThoughtImage";
@@ -0,0 +1,46 @@
1
+ import * as React from "react"
2
+ import { Slot } from "@radix-ui/react-slot"
3
+ import { cva, type VariantProps } from "class-variance-authority"
4
+
5
+ import { cn } from "@/lib/utils"
6
+
7
+ const badgeVariants = cva(
8
+ "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
9
+ {
10
+ variants: {
11
+ variant: {
12
+ default:
13
+ "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
14
+ secondary:
15
+ "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
16
+ destructive:
17
+ "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
18
+ outline:
19
+ "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
20
+ },
21
+ },
22
+ defaultVariants: {
23
+ variant: "default",
24
+ },
25
+ }
26
+ )
27
+
28
+ function Badge({
29
+ className,
30
+ variant,
31
+ asChild = false,
32
+ ...props
33
+ }: React.ComponentProps<"span"> &
34
+ VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
35
+ const Comp = asChild ? Slot : "span"
36
+
37
+ return (
38
+ <Comp
39
+ data-slot="badge"
40
+ className={cn(badgeVariants({ variant }), className)}
41
+ {...props}
42
+ />
43
+ )
44
+ }
45
+
46
+ export { Badge, badgeVariants }
@@ -0,0 +1,31 @@
1
+ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
2
+
3
+ function Collapsible({
4
+ ...props
5
+ }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
6
+ return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
7
+ }
8
+
9
+ function CollapsibleTrigger({
10
+ ...props
11
+ }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
12
+ return (
13
+ <CollapsiblePrimitive.CollapsibleTrigger
14
+ data-slot="collapsible-trigger"
15
+ {...props}
16
+ />
17
+ )
18
+ }
19
+
20
+ function CollapsibleContent({
21
+ ...props
22
+ }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
23
+ return (
24
+ <CollapsiblePrimitive.CollapsibleContent
25
+ data-slot="collapsible-content"
26
+ {...props}
27
+ />
28
+ )
29
+ }
30
+
31
+ export { Collapsible, CollapsibleTrigger, CollapsibleContent }