pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 20:42:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Use data pipeline to visualize the parsing configuration of the knowledge base (#10423)

Browse Source 
### What problem does this PR solve?

#9869

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

---------

Signed-off-by: dependabot[bot] <support@github.com>
Signed-off-by: jinhai <haijin.chn@gmail.com>
Signed-off-by: Jin Hai <haijin.chn@gmail.com>
Co-authored-by: chanx <1243304602@qq.com>
Co-authored-by: balibabu <cike8899@users.noreply.github.com>
Co-authored-by: Lynn <lynn_inf@hotmail.com>
Co-authored-by: 纷繁下的无奈 <zhileihuang@126.com>
Co-authored-by: huangzl <huangzl@shinemo.com>
Co-authored-by: writinwaters <93570324+writinwaters@users.noreply.github.com>
Co-authored-by: Wilmer <33392318@qq.com>
Co-authored-by: Adrian Weidig <adrianweidig@gmx.net>
Co-authored-by: Zhichang Yu <yuzhichang@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Yongteng Lei <yongtengrey@outlook.com>
Co-authored-by: Liu An <asiro@qq.com>
Co-authored-by: buua436 <66937541+buua436@users.noreply.github.com>
Co-authored-by: BadwomanCraZY <511528396@qq.com>
Co-authored-by: cucusenok <31804608+cucusenok@users.noreply.github.com>
Co-authored-by: Russell Valentine <russ@coldstonelabs.org>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Billy Bao <newyorkupperbay@gmail.com>
Co-authored-by: Zhedong Cen <cenzhedong2@126.com>
Co-authored-by: TensorNull <129579691+TensorNull@users.noreply.github.com>
Co-authored-by: TensorNull <tensor.null@gmail.com>
Co-authored-by: TeslaZY <TeslaZY@outlook.com>
Co-authored-by: Ajay <160579663+aybanda@users.noreply.github.com>
Co-authored-by: AB <aj@Ajays-MacBook-Air.local>
Co-authored-by: 天海蒼灆 <huangaoqin@tecpie.com>
Co-authored-by: He Wang <wanghechn@qq.com>
Co-authored-by: Atsushi Hatakeyama <atu729@icloud.com>
Co-authored-by: Jin Hai <haijin.chn@gmail.com>
Co-authored-by: Mohamed Mathari <155896313+melmathari@users.noreply.github.com>
Co-authored-by: Mohamed Mathari <nocodeventure@Mac-mini-van-Mohamed.fritz.box>
Co-authored-by: Stephen Hu <stephenhu@seismic.com>
Co-authored-by: Shaun Zhang <zhangwfjh@users.noreply.github.com>
Co-authored-by: zhimeng123 <60221886+zhimeng123@users.noreply.github.com>
Co-authored-by: mxc <mxc@example.com>
Co-authored-by: Dominik Novotný <50611433+SgtMarmite@users.noreply.github.com>
Co-authored-by: EVGENY M <168018528+rjohny55@users.noreply.github.com>
Co-authored-by: mcoder6425 <mcoder64@gmail.com>
Co-authored-by: lemsn <lemsn@msn.com>
Co-authored-by: lemsn <lemsn@126.com>
Co-authored-by: Adrian Gora <47756404+adagora@users.noreply.github.com>
Co-authored-by: Womsxd <45663319+Womsxd@users.noreply.github.com>
Co-authored-by: FatMii <39074672+FatMii@users.noreply.github.com>
This commit is contained in:
Kevin Hu
2025-10-09 12:36:19 +08:00
committed by GitHub
parent ef0aecea3b
commit cbf04ee470
490 changed files with 10630 additions and 30688 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
web/public/iconfont.js
View File

File diff suppressed because one or more lines are too long

15
web/src/assets/svg/data-flow/data-icon-bri.svg Normal file
View File

@ -0,0 +1,15 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.3194 10.6367H20.4258C19.4857 10.6367 18.7236 11.3988 18.7236 12.3388V34.892C18.7236 35.8321 19.4857 36.5942 20.4258 36.5942H35.3194C36.2594 36.5942 37.0215 35.8321 37.0215 34.892V12.3388C37.0215 11.3988 36.2594 10.6367 35.3194 10.6367Z" fill="url(#paint0_linear_488_37636)"/>
<path d="M31.0639 4.25391H5.10642C4.16637 4.25391 3.4043 5.01597 3.4043 5.95603V18.2965C3.4043 19.2365 4.16637 19.9986 5.10642 19.9986H31.0639C32.0039 19.9986 32.766 19.2365 32.766 18.2965V5.95603C32.766 5.01597 32.0039 4.25391 31.0639 4.25391Z" fill="#00BEB4" fill-opacity="0.1"/>
<path d="M31.0639 4.25391C32.0039 4.25391 32.766 5.01597 32.766 5.95603V18.2965C32.766 19.2365 32.0039 19.9986 31.0639 19.9986H5.10642C4.16637 19.9986 3.4043 19.2365 3.4043 18.2965V5.95603C3.4043 5.01597 4.16637 4.25391 5.10642 4.25391H31.0639ZM31.0639 4.67944H5.10642C4.40138 4.67944 3.82983 5.25099 3.82983 5.95603V18.2965C3.82983 19.0015 4.40138 19.5731 5.10642 19.5731H31.0639C31.7689 19.5731 32.3405 19.0015 32.3405 18.2965V5.95603C32.3405 5.25099 31.7689 4.67944 31.0639 4.67944Z" fill="#00BEB4"/>
<path d="M31.0639 22.5547H5.10642C4.16637 22.5547 3.4043 23.3168 3.4043 24.2568V34.8951C3.4043 35.8352 4.16637 36.5972 5.10642 36.5972H31.0639C32.0039 36.5972 32.766 35.8352 32.766 34.8951V24.2568C32.766 23.3168 32.0039 22.5547 31.0639 22.5547Z" fill="#00BEB4" fill-opacity="0.1"/>
<path d="M31.0639 22.5547C32.0039 22.5547 32.766 23.3168 32.766 24.2568V34.8951C32.766 35.8352 32.0039 36.5972 31.0639 36.5972H5.10642C4.16637 36.5972 3.4043 35.8352 3.4043 34.8951V24.2568C3.4043 23.3168 4.16637 22.5547 5.10642 22.5547H31.0639ZM31.0639 22.9802H5.10642C4.40138 22.9802 3.82983 23.5518 3.82983 24.2568V34.8951C3.82983 35.6002 4.40138 36.1717 5.10642 36.1717H31.0639C31.7689 36.1717 32.3405 35.6002 32.3405 34.8951V24.2568C32.3405 23.5518 31.7689 22.9802 31.0639 22.9802Z" fill="#00BEB4"/>
<path d="M10.6384 14.8949C12.2835 14.8949 13.6171 13.5613 13.6171 11.9162C13.6171 10.2711 12.2835 8.9375 10.6384 8.9375C8.99329 8.9375 7.65967 10.2711 7.65967 11.9162C7.65967 13.5613 8.99329 14.8949 10.6384 14.8949Z" fill="#00BEB4"/>
<path d="M10.6384 32.766C12.2835 32.766 13.6171 31.4324 13.6171 29.7873C13.6171 28.1422 12.2835 26.8086 10.6384 26.8086C8.99329 26.8086 7.65967 28.1422 7.65967 29.7873C7.65967 31.4324 8.99329 32.766 10.6384 32.766Z" fill="#00BEB4"/>
<defs>
<linearGradient id="paint0_linear_488_37636" x1="933.617" y1="10.6367" x2="933.617" y2="2606.38" gradientUnits="userSpaceOnUse">
<stop stop-color="#C9F1EF"/>
<stop offset="1" stop-color="#00BEB4"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

15
web/src/assets/svg/data-flow/data-icon.svg Normal file
View File

@ -0,0 +1,15 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.3194 10.6387H20.4258C19.4857 10.6387 18.7236 11.4007 18.7236 12.3408V34.894C18.7236 35.834 19.4857 36.5961 20.4258 36.5961H35.3194C36.2594 36.5961 37.0215 35.834 37.0215 34.894V12.3408C37.0215 11.4007 36.2594 10.6387 35.3194 10.6387Z" fill="url(#paint0_linear_491_41413)"/>
<path d="M31.0639 4.25586H5.10642C4.16637 4.25586 3.4043 5.01793 3.4043 5.95799V18.2984C3.4043 19.2385 4.16637 20.0005 5.10642 20.0005H31.0639C32.0039 20.0005 32.766 19.2385 32.766 18.2984V5.95799C32.766 5.01793 32.0039 4.25586 31.0639 4.25586Z" fill="#00BEB4" fill-opacity="0.2"/>
<path d="M31.0639 4.25586C32.0039 4.25586 32.766 5.01793 32.766 5.95799V18.2984C32.766 19.2385 32.0039 20.0005 31.0639 20.0005H5.10642C4.16637 20.0005 3.4043 19.2385 3.4043 18.2984V5.95799C3.4043 5.01793 4.16637 4.25586 5.10642 4.25586H31.0639ZM31.0639 4.68139H5.10642C4.40138 4.68139 3.82983 5.25294 3.82983 5.95799V18.2984C3.82983 19.0035 4.40138 19.575 5.10642 19.575H31.0639C31.7689 19.575 32.3405 19.0035 32.3405 18.2984V5.95799C32.3405 5.25294 31.7689 4.68139 31.0639 4.68139Z" fill="#226365"/>
<path d="M31.0639 22.5527H5.10642C4.16637 22.5527 3.4043 23.3148 3.4043 24.2549V34.8932C3.4043 35.8332 4.16637 36.5953 5.10642 36.5953H31.0639C32.0039 36.5953 32.766 35.8332 32.766 34.8932V24.2549C32.766 23.3148 32.0039 22.5527 31.0639 22.5527Z" fill="#3A9093" fill-opacity="0.2"/>
<path d="M31.0639 22.5527C32.0039 22.5527 32.766 23.3148 32.766 24.2549V34.8932C32.766 35.8332 32.0039 36.5953 31.0639 36.5953H5.10642C4.16637 36.5953 3.4043 35.8332 3.4043 34.8932V24.2549C3.4043 23.3148 4.16637 22.5527 5.10642 22.5527H31.0639ZM31.0639 22.9783H5.10642C4.40138 22.9783 3.82983 23.5498 3.82983 24.2549V34.8932C3.82983 35.5982 4.40138 36.1698 5.10642 36.1698H31.0639C31.7689 36.1698 32.3405 35.5982 32.3405 34.8932V24.2549C32.3405 23.5498 31.7689 22.9783 31.0639 22.9783Z" fill="#226365"/>
<path d="M10.6384 14.893C12.2835 14.893 13.6171 13.5594 13.6171 11.9143C13.6171 10.2692 12.2835 8.93555 10.6384 8.93555C8.99329 8.93555 7.65967 10.2692 7.65967 11.9143C7.65967 13.5594 8.99329 14.893 10.6384 14.893Z" fill="#3A9093"/>
<path d="M10.6384 32.766C12.2835 32.766 13.6171 31.4324 13.6171 29.7873C13.6171 28.1422 12.2835 26.8086 10.6384 26.8086C8.99329 26.8086 7.65967 28.1422 7.65967 29.7873C7.65967 31.4324 8.99329 32.766 10.6384 32.766Z" fill="#3A9093"/>
<defs>
<linearGradient id="paint0_linear_491_41413" x1="933.617" y1="10.6387" x2="933.617" y2="2606.38" gradientUnits="userSpaceOnUse">
<stop stop-color="#1B3C3D"/>
<stop offset="1" stop-color="#164142"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

1
web/src/assets/svg/data-flow/knowledgegraph.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1756884949583" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11332" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M190.464 489.472h327.68v40.96h-327.68z" fill="#C7DCFE" p-id="11333"></path><path d="M482.34496 516.5056l111.26784-308.20352 38.54336 13.9264L520.86784 530.432z" fill="#C7DCFE" p-id="11334"></path><path d="M620.544 196.608m-122.88 0a122.88 122.88 0 1 0 245.76 0 122.88 122.88 0 1 0-245.76 0Z" fill="#8FB8FC" p-id="11335"></path><path d="M182.272 509.952m-122.88 0a122.88 122.88 0 1 0 245.76 0 122.88 122.88 0 1 0-245.76 0Z" fill="#C7DCFE" p-id="11336"></path><path d="M558.65344 520.9088l283.77088 163.84-20.48 35.47136-283.77088-163.84z" fill="#C7DCFE" p-id="11337"></path><path d="M841.728 686.08m-122.88 0a122.88 122.88 0 1 0 245.76 0 122.88 122.88 0 1 0-245.76 0Z" fill="#B3CEFE" p-id="11338"></path><path d="M448.67584 803.77856l49.60256-323.91168 40.48896 6.20544-49.60256 323.91168z" fill="#C7DCFE" p-id="11339"></path><path d="M512 530.432m-143.36 0a143.36 143.36 0 1 0 286.72 0 143.36 143.36 0 1 0-286.72 0Z" fill="#4185FF" p-id="11340"></path><path d="M462.848 843.776m-102.4 0a102.4 102.4 0 1 0 204.8 0 102.4 102.4 0 1 0-204.8 0Z" fill="#8FB8FC" p-id="11341"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

6
web/src/assets/svg/data-flow/processing-icon-bri.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8074 21.9283L30.4051 33.9033C30.9531 34.667 30.7785 35.7307 30.0148 36.2787C29.7258 36.4865 29.3785 36.5982 29.0223 36.5982H11.8273C10.8871 36.5982 10.125 35.8361 10.125 34.8963C10.125 34.54 10.2367 34.1928 10.4445 33.9033L19.0422 21.9283C19.5902 21.1646 20.6539 20.99 21.4176 21.5385C21.5676 21.6463 21.6996 21.7779 21.8074 21.9283Z" fill="#C6EFED"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.94336 3.39844H34.0285C35.9086 3.39844 37.4328 4.92266 37.4328 6.80273V27.2281C37.4328 29.1082 35.9086 30.6324 34.0285 30.6324H5.94336C4.06328 30.6324 2.53906 29.1082 2.53906 27.2281V6.80273C2.53906 4.92266 4.06328 3.39844 5.94336 3.39844Z" fill="#00BEB4" fill-opacity="0.2"/>
<path d="M34.0422 3.40625C35.9223 3.40625 37.4465 4.93047 37.4465 6.81055V27.2359C37.4465 29.116 35.9223 30.6402 34.0422 30.6402H5.95703C4.07695 30.6402 2.55273 29.116 2.55273 27.2359V6.81055C2.55273 4.93047 4.07695 3.40625 5.95703 3.40625H34.0422ZM34.0422 3.83164H5.95703C4.31211 3.83164 2.97852 5.16523 2.97852 6.81055V27.2359C2.97852 28.8812 4.31211 30.2148 5.95703 30.2148H34.0422C35.6871 30.2148 37.0207 28.8812 37.0207 27.2359V6.81055C37.0207 5.16523 35.6871 3.83164 34.0422 3.83164Z" fill="#00BEB4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9785 11.6797C20.6836 11.6797 21.2551 12.2512 21.2551 12.9562V21.0414C21.2551 21.7465 20.6836 22.318 19.9785 22.318C19.2734 22.318 18.702 21.7465 18.702 21.0414V12.9562C18.702 12.2512 19.2734 11.6797 19.9785 11.6797ZM11.0422 11.6797C11.7473 11.6797 12.3187 12.2512 12.3187 12.9562V21.0414C12.3187 21.7465 11.7473 22.318 11.0422 22.318C10.3371 22.318 9.76562 21.7465 9.76562 21.0414V12.9562C9.76562 12.2512 10.3371 11.6797 11.0422 11.6797ZM28.9145 11.6797C29.6195 11.6797 30.191 12.2512 30.191 12.9562V21.0414C30.191 21.7465 29.6195 22.318 28.9145 22.318C28.2094 22.318 27.6379 21.7465 27.6379 21.0414V12.9562C27.6379 12.2512 28.2094 11.6797 28.9145 11.6797Z" fill="#00BEB4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

6
web/src/assets/svg/data-flow/processing-icon.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8074 21.9264L30.4051 33.9014C30.9531 34.665 30.7785 35.7287 30.0148 36.2767C29.7258 36.4846 29.3785 36.5963 29.0223 36.5963H11.8273C10.8871 36.5963 10.125 35.8342 10.125 34.8943C10.125 34.5381 10.2367 34.1908 10.4445 33.9014L19.0422 21.9264C19.5902 21.1627 20.6539 20.9881 21.4176 21.5365C21.5676 21.6443 21.6996 21.776 21.8074 21.9264Z" fill="#1C3C3D"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.94336 3.39844H34.0285C35.9086 3.39844 37.4328 4.92266 37.4328 6.80273V27.2281C37.4328 29.1082 35.9086 30.6324 34.0285 30.6324H5.94336C4.06328 30.6324 2.53906 29.1082 2.53906 27.2281V6.80273C2.53906 4.92266 4.06328 3.39844 5.94336 3.39844Z" fill="#00BEB4" fill-opacity="0.2"/>
<path d="M34.0422 3.4043C35.9223 3.4043 37.4465 4.92852 37.4465 6.80859V27.234C37.4465 29.1141 35.9223 30.6383 34.0422 30.6383H5.95703C4.07695 30.6383 2.55273 29.1141 2.55273 27.234V6.80859C2.55273 4.92852 4.07695 3.4043 5.95703 3.4043H34.0422ZM34.0422 3.82969H5.95703C4.31211 3.82969 2.97852 5.16328 2.97852 6.80859V27.234C2.97852 28.8793 4.31211 30.2129 5.95703 30.2129H34.0422C35.6871 30.2129 37.0207 28.8793 37.0207 27.234V6.80859C37.0207 5.16328 35.6871 3.82969 34.0422 3.82969Z" fill="#1B3B3C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9785 11.6797C20.6836 11.6797 21.2551 12.2512 21.2551 12.9562V21.0414C21.2551 21.7465 20.6836 22.318 19.9785 22.318C19.2734 22.318 18.702 21.7465 18.702 21.0414V12.9562C18.702 12.2512 19.2734 11.6797 19.9785 11.6797ZM11.0422 11.6797C11.7473 11.6797 12.3187 12.2512 12.3187 12.9562V21.0414C12.3187 21.7465 11.7473 22.318 11.0422 22.318C10.3371 22.318 9.76562 21.7465 9.76562 21.0414V12.9562C9.76562 12.2512 10.3371 11.6797 11.0422 11.6797ZM28.9145 11.6797C29.6195 11.6797 30.191 12.2512 30.191 12.9562V21.0414C30.191 21.7465 29.6195 22.318 28.9145 22.318C28.2094 22.318 27.6379 21.7465 27.6379 21.0414V12.9562C27.6379 12.2512 28.2094 11.6797 28.9145 11.6797Z" fill="#00BEB4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

1
web/src/assets/svg/data-flow/raptor.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

6
web/src/assets/svg/data-flow/total-files-icon-bri.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0291 4.67969C11.8025 4.67969 12.4787 5.20078 12.6752 5.94844L13.3494 8.50937H31.4275C33.1599 8.50937 34.6158 9.81055 34.8103 11.5316L37.0205 31.1062C37.231 32.9746 35.8877 34.6602 34.0193 34.8711C33.8927 34.8852 33.765 34.8926 33.6377 34.8926H6.30289C4.92476 34.8926 3.79547 33.7988 3.75094 32.4215L3.11734 12.7746H3.115L2.90719 6.4375C2.87633 5.49805 3.61304 4.71133 4.5525 4.68047C4.57086 4.68008 4.58961 4.67969 4.60836 4.67969H11.0291Z" fill="#00BEB4" fill-opacity="0.1"/>
<path d="M11.0291 4.67969C11.8025 4.67969 12.4787 5.20078 12.6752 5.94844L13.349 8.50937H31.4275C33.1599 8.50937 34.6158 9.81055 34.8103 11.5316L37.0205 31.1062C37.231 32.9746 35.8877 34.6602 34.0193 34.8711C33.8927 34.8852 33.765 34.8926 33.6377 34.8926H6.30289C4.92476 34.8926 3.79547 33.7988 3.75094 32.4215L3.11656 12.7742L2.90719 6.4375C2.87633 5.49805 3.61304 4.71133 4.5525 4.68047L4.58023 4.67969H11.0291ZM11.0291 5.10508H4.59078L4.56656 5.10586C3.86187 5.12891 3.30914 5.71914 3.33219 6.42344L3.54195 12.7605L4.17633 32.4078C4.21344 33.5555 5.15445 34.4668 6.30289 34.4668H33.6377C33.749 34.4668 33.8607 34.4605 33.9716 34.448C35.6064 34.2637 36.7822 32.7887 36.5974 31.1539L34.3873 11.5797C34.2173 10.0734 32.9431 8.93516 31.4275 8.93516H13.0209L12.9377 8.61758L12.2638 6.05703C12.1162 5.49609 11.6091 5.10508 11.0291 5.10508Z" fill="#00BEB4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.72812 12.7656H36.6539C38.0637 12.7656 39.207 13.9086 39.207 15.3188C39.207 15.4328 39.1992 15.5465 39.184 15.6594L36.9922 31.943C36.7648 33.6324 35.323 34.8934 33.6184 34.8934H6.37969C4.96953 34.8934 3.82617 33.75 3.82617 32.3398C3.82617 32.2102 3.83633 32.0801 3.85586 31.952L6.36367 15.6523C6.61914 13.9914 8.04805 12.7656 9.72812 12.7656Z" fill="#CAF2F0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.98438 14.6172H20.4848C20.899 14.6172 21.2348 14.9529 21.2348 15.3672C21.2348 15.7814 20.899 16.1172 20.4848 16.1172H8.98438C8.57013 16.1172 8.23438 15.7814 8.23438 15.3672C8.23438 14.9529 8.57013 14.6172 8.98438 14.6172Z" fill="#00BEB4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

6
web/src/assets/svg/data-flow/total-files-icon.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0291 4.68164C11.8025 4.68164 12.4787 5.20273 12.6752 5.95039L13.3494 8.51133H31.4275C33.1599 8.51133 34.6158 9.8125 34.8103 11.5336L37.0205 31.1082C37.231 32.9766 35.8877 34.6621 34.0193 34.873C33.8927 34.8871 33.765 34.8945 33.6377 34.8945H6.30289C4.92476 34.8945 3.79547 33.8008 3.75094 32.4234L3.11734 12.7766H3.115L2.90719 6.43945C2.87633 5.5 3.61304 4.71328 4.5525 4.68242C4.57086 4.68203 4.58961 4.68164 4.60836 4.68164H11.0291Z" fill="#1F3232"/>
<path d="M11.0291 4.68164C11.8025 4.68164 12.4787 5.20273 12.6752 5.95039L13.349 8.51133H31.4275C33.1599 8.51133 34.6158 9.8125 34.8103 11.5336L37.0205 31.1082C37.231 32.9766 35.8877 34.6621 34.0193 34.873C33.8927 34.8871 33.765 34.8945 33.6377 34.8945H6.30289C4.92476 34.8945 3.79547 33.8008 3.75094 32.4234L3.11656 12.7762L2.90719 6.43945C2.87633 5.5 3.61304 4.71328 4.5525 4.68242L4.58023 4.68164H11.0291ZM11.0291 5.10703H4.59078L4.56656 5.10781C3.86187 5.13086 3.30914 5.72109 3.33219 6.42539L3.54195 12.7625L4.17633 32.4098C4.21344 33.5574 5.15445 34.4687 6.30289 34.4687H33.6377C33.749 34.4687 33.8607 34.4625 33.9716 34.45C35.6064 34.2656 36.7822 32.7906 36.5974 31.1559L34.3873 11.5816C34.2173 10.0754 32.9431 8.93711 31.4275 8.93711H13.0209L12.9377 8.61953L12.2638 6.05898C12.1162 5.49805 11.6091 5.10703 11.0291 5.10703Z" fill="#1B3B3C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.72812 12.7656H36.6539C38.0637 12.7656 39.207 13.9086 39.207 15.3188C39.207 15.4328 39.1992 15.5465 39.184 15.6594L36.9922 31.943C36.7648 33.6324 35.323 34.8934 33.6184 34.8934H6.37969C4.96953 34.8934 3.82617 33.75 3.82617 32.3398C3.82617 32.2102 3.83633 32.0801 3.85586 31.952L6.36367 15.6523C6.61914 13.9914 8.04805 12.7656 9.72812 12.7656Z" fill="#1B3B3C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.98438 14.6172H20.4848C20.899 14.6172 21.2348 14.9529 21.2348 15.3672C21.2348 15.7814 20.899 16.1172 20.4848 16.1172H8.98438C8.57013 16.1172 8.23438 15.7814 8.23438 15.3672C8.23438 14.9529 8.57013 14.6172 8.98438 14.6172Z" fill="#00BEB4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

247
web/src/components/chunk-method-dialog/index.tsx
View File

@ -18,8 +18,11 @@ import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-reques
import { IModalProps } from '@/interfaces/common';
import { IParserConfig } from '@/interfaces/database/document';
import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
import {
ChunkMethodItem,
ParseTypeItem,
} from '@/pages/dataset/dataset-setting/configuration/common-item';
import { zodResolver } from '@hookform/resolvers/zod';
import get from 'lodash/get';
import omit from 'lodash/omit';
import {} from 'module';
import { useEffect, useMemo } from 'react';
@ -30,24 +33,17 @@ import {
AutoKeywordsFormField,
AutoQuestionsFormField,
} from '../auto-keywords-form-field';
import { DataFlowSelect } from '../data-pipeline-select';
import { DelimiterFormField } from '../delimiter-form-field';
import { EntityTypesFormField } from '../entity-types-form-field';
import { ExcelToHtmlFormField } from '../excel-to-html-form-field';
import { FormContainer } from '../form-container';
import { LayoutRecognizeFormField } from '../layout-recognize-form-field';
import { MaxTokenNumberFormField } from '../max-token-number-from-field';
import {
UseGraphRagFormField,
showGraphRagItems,
} from '../parse-configuration/graph-rag-form-fields';
import RaptorFormFields, {
showRaptorParseConfiguration,
} from '../parse-configuration/raptor-form-fields';
import { ButtonLoading } from '../ui/button';
import { Input } from '../ui/input';
import { RAGFlowSelect } from '../ui/select';
import { DynamicPageRange } from './dynamic-page-range';
import { useFetchParserListOnMount, useShowAutoKeywords } from './hooks';
import { useShowAutoKeywords } from './hooks';
import {
useDefaultParserValues,
useFillDefaultValueOnMount,
@ -62,6 +58,7 @@ interface IProps
}> {
loading: boolean;
parserId: string;
pipelineId?: string;
parserConfig: IParserConfig;
documentExtension: string;
documentId: string;
@ -80,6 +77,7 @@ export function ChunkMethodDialog({
hideModal,
onOk,
parserId,
pipelineId,
documentExtension,
visible,
parserConfig,
@ -87,8 +85,6 @@ export function ChunkMethodDialog({
}: IProps) {
const { t } = useTranslation();
const { parserList } = useFetchParserListOnMount(documentExtension);
const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration();
const useGraphRag = useMemo(() => {
@ -99,46 +95,59 @@ export function ChunkMethodDialog({
const fillDefaultParserValue = useFillDefaultValueOnMount();
const FormSchema = z.object({
parser_id: z
.string()
.min(1, {
message: t('common.pleaseSelect'),
})
.trim(),
parser_config: z.object({
task_page_size: z.coerce.number().optional(),
layout_recognize: z.string().optional(),
chunk_token_num: z.coerce.number().optional(),
delimiter: z.string().optional(),
auto_keywords: z.coerce.number().optional(),
auto_questions: z.coerce.number().optional(),
html4excel: z.boolean().optional(),
raptor: z
.object({
use_raptor: z.boolean().optional(),
prompt: z.string().optional().optional(),
max_token: z.coerce.number().optional(),
threshold: z.coerce.number().optional(),
max_cluster: z.coerce.number().optional(),
random_seed: z.coerce.number().optional(),
const FormSchema = z
.object({
parseType: z.number(),
parser_id: z
.string()
.min(1, {
message: t('common.pleaseSelect'),
})
.optional(),
graphrag: z.object({
use_graphrag: z.boolean().optional(),
.trim(),
pipeline_id: z.string().optional(),
parser_config: z.object({
task_page_size: z.coerce.number().optional(),
layout_recognize: z.string().optional(),
chunk_token_num: z.coerce.number().optional(),
delimiter: z.string().optional(),
auto_keywords: z.coerce.number().optional(),
auto_questions: z.coerce.number().optional(),
html4excel: z.boolean().optional(),
// raptor: z
// .object({
// use_raptor: z.boolean().optional(),
// prompt: z.string().optional().optional(),
// max_token: z.coerce.number().optional(),
// threshold: z.coerce.number().optional(),
// max_cluster: z.coerce.number().optional(),
// random_seed: z.coerce.number().optional(),
// })
// .optional(),
// graphrag: z.object({
// use_graphrag: z.boolean().optional(),
// }),
entity_types: z.array(z.string()).optional(),
pages: z
.array(z.object({ from: z.coerce.number(), to: z.coerce.number() }))
.optional(),
}),
entity_types: z.array(z.string()).optional(),
pages: z
.array(z.object({ from: z.coerce.number(), to: z.coerce.number() }))
.optional(),
}),
});
})
.superRefine((data, ctx) => {
if (data.parseType === 2 && !data.pipeline_id) {
ctx.addIssue({
path: ['pipeline_id'],
message: t('common.pleaseSelect'),
code: 'custom',
});
}
});
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
parser_id: parserId,
parser_id: parserId || '',
pipeline_id: pipelineId || '',
parseType: pipelineId ? 2 : 1,
parser_config: defaultParserValues,
},
});
@ -200,17 +209,19 @@ export function ChunkMethodDialog({
const pages =
parserConfig?.pages?.map((x) => ({ from: x[0], to: x[1] })) ?? [];
form.reset({
parser_id: parserId,
parser_id: parserId || '',
pipeline_id: pipelineId || '',
parseType: pipelineId ? 2 : 1,
parser_config: fillDefaultParserValue({
pages: pages.length > 0 ? pages : [{ from: 1, to: 1024 }],
...omit(parserConfig, 'pages'),
graphrag: {
use_graphrag: get(
parserConfig,
'graphrag.use_graphrag',
useGraphRag,
),
},
// graphrag: {
// use_graphrag: get(
// parserConfig,
// 'graphrag.use_graphrag',
// useGraphRag,
// ),
// },
}),
});
}
@ -220,10 +231,20 @@ export function ChunkMethodDialog({
knowledgeDetails.parser_config,
parserConfig,
parserId,
pipelineId,
useGraphRag,
visible,
]);
const parseType = useWatch({
control: form.control,
name: 'parseType',
defaultValue: pipelineId ? 2 : 1,
});
useEffect(() => {
if (parseType === 1) {
form.setValue('pipeline_id', '');
}
}, [parseType, form]);
return (
<Dialog open onOpenChange={hideModal}>
<DialogContent className="max-w-[50vw]">
@ -237,7 +258,17 @@ export function ChunkMethodDialog({
id={FormId}
>
<FormContainer>
<FormField
<ParseTypeItem />
{parseType === 1 && <ChunkMethodItem></ChunkMethodItem>}
{parseType === 2 && (
<DataFlowSelect
isMult={false}
// toDataPipeline={navigateToAgents}
formFieldName="pipeline_id"
/>
)}
{/* <FormField
control={form.control}
name="parser_id"
render={({ field }) => (
@ -252,9 +283,11 @@ export function ChunkMethodDialog({
<FormMessage />
</FormItem>
)}
/>
{showPages && <DynamicPageRange></DynamicPageRange>}
{showPages && layoutRecognize && (
/> */}
{showPages && parseType === 1 && (
<DynamicPageRange></DynamicPageRange>
)}
{showPages && parseType === 1 && layoutRecognize && (
<FormField
control={form.control}
name="parser_config.task_page_size"
@ -279,50 +312,60 @@ export function ChunkMethodDialog({
/>
)}
</FormContainer>
<FormContainer
show={showOne || showMaxTokenNumber}
className="space-y-3"
>
{showOne && <LayoutRecognizeFormField></LayoutRecognizeFormField>}
{showMaxTokenNumber && (
<>
<MaxTokenNumberFormField
max={
selectedTag === DocumentParserType.KnowledgeGraph
? 8192 * 2
: 2048
}
></MaxTokenNumberFormField>
<DelimiterFormField></DelimiterFormField>
</>
)}
</FormContainer>
<FormContainer
show={showAutoKeywords(selectedTag) || showExcelToHtml}
className="space-y-3"
>
{showAutoKeywords(selectedTag) && (
<>
<AutoKeywordsFormField></AutoKeywordsFormField>
<AutoQuestionsFormField></AutoQuestionsFormField>
</>
)}
{showExcelToHtml && <ExcelToHtmlFormField></ExcelToHtmlFormField>}
</FormContainer>
{showRaptorParseConfiguration(
selectedTag as DocumentParserType,
) && (
<FormContainer>
<RaptorFormFields></RaptorFormFields>
</FormContainer>
)}
{showGraphRagItems(selectedTag as DocumentParserType) &&
useGraphRag && (
<FormContainer>
<UseGraphRagFormField></UseGraphRagFormField>
{parseType === 1 && (
<>
<FormContainer
show={showOne || showMaxTokenNumber}
className="space-y-3"
>
{showOne && (
<LayoutRecognizeFormField></LayoutRecognizeFormField>
)}
{showMaxTokenNumber && (
<>
<MaxTokenNumberFormField
max={
selectedTag === DocumentParserType.KnowledgeGraph
? 8192 * 2
: 2048
}
></MaxTokenNumberFormField>
<DelimiterFormField></DelimiterFormField>
</>
)}
</FormContainer>
)}
{showEntityTypes && <EntityTypesFormField></EntityTypesFormField>}
<FormContainer
show={showAutoKeywords(selectedTag) || showExcelToHtml}
className="space-y-3"
>
{showAutoKeywords(selectedTag) && (
<>
<AutoKeywordsFormField></AutoKeywordsFormField>
<AutoQuestionsFormField></AutoQuestionsFormField>
</>
)}
{showExcelToHtml && (
<ExcelToHtmlFormField></ExcelToHtmlFormField>
)}
</FormContainer>
{/* {showRaptorParseConfiguration(
selectedTag as DocumentParserType,
) && (
<FormContainer>
<RaptorFormFields></RaptorFormFields>
</FormContainer>
)} */}
{/* {showGraphRagItems(selectedTag as DocumentParserType) &&
useGraphRag && (
<FormContainer>
<UseGraphRagFormField></UseGraphRagFormField>
</FormContainer>
)} */}
{showEntityTypes && (
<EntityTypesFormField></EntityTypesFormField>
)}
</>
)}
</form>
</Form>
<DialogFooter>

26
web/src/components/chunk-method-dialog/use-default-parser-values.ts
View File

@ -1,7 +1,7 @@
import { IParserConfig } from '@/interfaces/database/document';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { DocumentType } from '../layout-recognize-form-field';
import { ParseDocumentType } from '../layout-recognize-form-field';
export function useDefaultParserValues() {
const { t } = useTranslation();
@ -9,23 +9,23 @@ export function useDefaultParserValues() {
const defaultParserValues = useMemo(() => {
const defaultParserValues = {
task_page_size: 12,
layout_recognize: DocumentType.DeepDOC,
layout_recognize: ParseDocumentType.DeepDOC,
chunk_token_num: 512,
delimiter: '\n',
auto_keywords: 0,
auto_questions: 0,
html4excel: false,
raptor: {
use_raptor: false,
prompt: t('knowledgeConfiguration.promptText'),
max_token: 256,
threshold: 0.1,
max_cluster: 64,
random_seed: 0,
},
graphrag: {
use_graphrag: false,
},
// raptor: {
// use_raptor: false,
// prompt: t('knowledgeConfiguration.promptText'),
// max_token: 256,
// threshold: 0.1,
// max_cluster: 64,
// random_seed: 0,
// },
// graphrag: {
// use_graphrag: false,
// },
entity_types: [],
pages: [],
};

13
web/src/components/confirm-delete-dialog.tsx
View File

@ -8,7 +8,7 @@ import {
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { PropsWithChildren } from 'react';
import { DialogProps } from '@radix-ui/react-dialog';
import { useTranslation } from 'react-i18next';
interface IProps {
@ -24,7 +24,10 @@ export function ConfirmDeleteDialog({
onOk,
onCancel,
hidden = false,
}: IProps & PropsWithChildren) {
onOpenChange,
open,
defaultOpen,
}: IProps & DialogProps) {
const { t } = useTranslation();
if (hidden) {
@ -32,7 +35,11 @@ export function ConfirmDeleteDialog({
}
return (
<AlertDialog>
<AlertDialog
onOpenChange={onOpenChange}
open={open}
defaultOpen={defaultOpen}
>
<AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
<AlertDialogContent
onSelect={(e) => e.preventDefault()}

8
web/src/components/cross-language-form-field.tsx
View File

@ -22,7 +22,7 @@ const Languages = [
'Vietnamese',
];
const options = Languages.map((x) => ({
export const crossLanguageOptions = Languages.map((x) => ({
label: t('language.' + toLower(x)),
value: x,
}));
@ -30,11 +30,13 @@ const options = Languages.map((x) => ({
type CrossLanguageItemProps = {
name?: string;
vertical?: boolean;
label?: string;
};
export const CrossLanguageFormField = ({
name = 'prompt_config.cross_languages',
vertical = true,
label,
}: CrossLanguageItemProps) => {
const { t } = useTranslation();
const form = useFormContext();
@ -53,11 +55,11 @@ export const CrossLanguageFormField = ({
})}
>
<FormLabel tooltip={t('chat.crossLanguageTip')}>
{t('chat.crossLanguage')}
{label || t('chat.crossLanguage')}
</FormLabel>
<FormControl>
<MultiSelect
options={options}
options={crossLanguageOptions}
placeholder={t('fileManager.pleaseSelect')}
maxCount={100}
{...field}

120
web/src/components/data-pipeline-select/index.tsx Normal file
View File

@ -0,0 +1,120 @@
import { AgentCategory } from '@/constants/agent';
import { useTranslate } from '@/hooks/common-hooks';
import { useFetchAgentList } from '@/hooks/use-agent-request';
import { buildSelectOptions } from '@/utils/component-util';
import { ArrowUpRight } from 'lucide-react';
import { useEffect, useMemo } from 'react';
import { useFormContext } from 'react-hook-form';
import { SelectWithSearch } from '../originui/select-with-search';
import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '../ui/form';
import { MultiSelect } from '../ui/multi-select';
export interface IDataPipelineSelectNode {
id?: string;
name?: string;
avatar?: string;
}
interface IProps {
toDataPipeline?: () => void;
formFieldName: string;
isMult?: boolean;
setDataList?: (data: IDataPipelineSelectNode[]) => void;
}
export function DataFlowSelect(props: IProps) {
const { toDataPipeline, formFieldName, isMult = false, setDataList } = props;
const { t } = useTranslate('knowledgeConfiguration');
const form = useFormContext();
const toDataPipLine = () => {
toDataPipeline?.();
};
const { data: dataPipelineOptions } = useFetchAgentList({
canvas_category: AgentCategory.DataflowCanvas,
});
const options = useMemo(() => {
const option = buildSelectOptions(
dataPipelineOptions?.canvas,
'id',
'title',
);
return option || [];
}, [dataPipelineOptions]);
const nodes = useMemo(() => {
return (
dataPipelineOptions?.canvas?.map((item) => {
return {
id: item?.id,
name: item?.title,
avatar: item?.avatar,
};
}) || []
);
}, [dataPipelineOptions]);
useEffect(() => {
setDataList?.(nodes);
}, [nodes, setDataList]);
return (
<FormField
control={form.control}
name={formFieldName}
render={({ field }) => (
<FormItem className=" items-center space-y-0 ">
<div className="flex flex-col gap-1">
<div className="flex gap-2 justify-between ">
<FormLabel
tooltip={t('dataFlowTip')}
className="text-sm text-text-primary whitespace-wrap "
>
{t('dataPipeline')}
</FormLabel>
{toDataPipeline && (
<div
className="text-sm flex text-text-primary cursor-pointer"
onClick={toDataPipLine}
>
{t('buildItFromScratch')}
<ArrowUpRight size={14} />
</div>
)}
</div>
<div className="text-muted-foreground">
<FormControl>
<>
{!isMult && (
<SelectWithSearch
{...field}
placeholder={t('dataFlowPlaceholder')}
options={options}
/>
)}
{isMult && (
<MultiSelect
{...field}
onValueChange={field.onChange}
placeholder={t('dataFlowPlaceholder')}
options={options}
/>
)}
</>
</FormControl>
</div>
</div>
<div className="flex pt-1">
<FormMessage />
</div>
</FormItem>
)}
/>
);
}

13
web/src/components/delimiter-form-field.tsx
View File

@ -16,11 +16,17 @@ interface IProps {
}
export const DelimiterInput = forwardRef<HTMLInputElement, InputProps & IProps>(
({ value, onChange, maxLength, defaultValue }, ref) => {
const nextValue = value?.replaceAll('\n', '\\n');
({ value, onChange, maxLength, defaultValue, ...props }, ref) => {
const nextValue = value
?.replaceAll('\n', '\\n')
.replaceAll('\t', '\\t')
.replaceAll('\r', '\\r');
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const val = e.target.value;
const nextValue = val.replaceAll('\\n', '\n');
const nextValue = val
.replaceAll('\\n', '\n')
.replaceAll('\\t', '\t')
.replaceAll('\\r', '\r');
onChange?.(nextValue);
};
return (
@ -30,6 +36,7 @@ export const DelimiterInput = forwardRef<HTMLInputElement, InputProps & IProps>(
maxLength={maxLength}
defaultValue={defaultValue}
ref={ref}
{...props}
></Input>
);
},

2
web/src/components/entity-types-form-field.tsx
View File

@ -26,7 +26,7 @@ export function EntityTypesFormField({
return (
<FormItem className=" items-center space-y-0 ">
<div className="flex items-center">
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
<FormLabel className="text-sm whitespace-nowrap w-1/4">
<span className="text-red-600">*</span> {t('entityTypes')}
</FormLabel>
<div className="w-3/4">

31
web/src/components/file-status-badge.tsx
View File

@ -1,24 +1,29 @@
// src/pages/dataset/file-logs/file-status-badge.tsx
import { RunningStatus } from '@/pages/dataset/dataset/constant';
import { FC } from 'react';
/**
* params: status: 0 not run yet 1 running, 2 cancel, 3 success, 4 fail
*/
interface StatusBadgeProps {
status: 'Success' | 'Failed' | 'Running' | 'Pending';
// status: 'Success' | 'Failed' | 'Running' | 'Pending';
status: RunningStatus;
name?: string;
}
const FileStatusBadge: FC<StatusBadgeProps> = ({ status }) => {
const FileStatusBadge: FC<StatusBadgeProps> = ({ status, name }) => {
const getStatusColor = () => {
// #3ba05c → rgb(59, 160, 92) // state-success
// #d8494b → rgb(216, 73, 75) // state-error
// #00beb4 → rgb(0, 190, 180) // accent-primary
// #faad14 → rgb(250, 173, 20) // state-warning
switch (status) {
case 'Success':
case RunningStatus.DONE:
return `bg-[rgba(59,160,92,0.1)] text-state-success`;
case 'Failed':
case RunningStatus.FAIL:
return `bg-[rgba(216,73,75,0.1)] text-state-error`;
case 'Running':
case RunningStatus.RUNNING:
return `bg-[rgba(0,190,180,0.1)] text-accent-primary`;
case 'Pending':
case RunningStatus.UNSTART:
return `bg-[rgba(250,173,20,0.1)] text-state-warning`;
default:
return 'bg-gray-500/10 text-white';
@ -31,13 +36,13 @@ const FileStatusBadge: FC<StatusBadgeProps> = ({ status }) => {
// #00beb4 → rgb(0, 190, 180) // accent-primary
// #faad14 → rgb(250, 173, 20) // state-warning
switch (status) {
case 'Success':
case RunningStatus.DONE:
return `bg-[rgba(59,160,92,1)] text-state-success`;
case 'Failed':
case RunningStatus.FAIL:
return `bg-[rgba(216,73,75,1)] text-state-error`;
case 'Running':
case RunningStatus.RUNNING:
return `bg-[rgba(0,190,180,1)] text-accent-primary`;
case 'Pending':
case RunningStatus.UNSTART:
return `bg-[rgba(250,173,20,1)] text-state-warning`;
default:
return 'bg-gray-500/10 text-white';
@ -46,10 +51,10 @@ const FileStatusBadge: FC<StatusBadgeProps> = ({ status }) => {
return (
<span
className={`inline-flex items-center w-[75px] px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(0.1)}`}
className={`inline-flex items-center w-[75px] px-2 py-1 rounded-full text-xs font-medium ${getStatusColor()}`}
>
<div className={`w-1 h-1 mr-1 rounded-full ${getBgStatusColor()}`}></div>
{status}
{name || ''}
</span>
);
};

20
web/src/components/home-card.tsx
View File

@ -13,8 +13,15 @@ interface IProps {
onClick?: () => void;
moreDropdown: React.ReactNode;
sharedBadge?: ReactNode;
icon?: React.ReactNode;
}
export function HomeCard({ data, onClick, moreDropdown, sharedBadge }: IProps) {
export function HomeCard({
data,
onClick,
moreDropdown,
sharedBadge,
icon,
}: IProps) {
return (
<Card
className="bg-bg-card border-colors-outline-neutral-standard"
@ -32,10 +39,13 @@ export function HomeCard({ data, onClick, moreDropdown, sharedBadge }: IProps) {
/>
</div>
<div className="flex flex-col justify-between gap-1 flex-1 h-full w-[calc(100%-50px)]">
<section className="flex justify-between">
<div className="text-[20px] font-bold w-80% leading-5 text-ellipsis overflow-hidden">
{data.name}
</div>
<section className="flex justify-between w-full">
<section className="flex gap-1 items-center w-full">
<div className="text-[20px] font-bold w-80% leading-5 text-ellipsis overflow-hidden">
{data.name}
</div>
{icon}
</section>
{moreDropdown}
</section>

18
web/src/components/icon-font.tsx
View File

@ -4,6 +4,7 @@ import { getExtension } from '@/utils/document-util';
type IconFontType = {
name: string;
className?: string;
};
@ -13,6 +14,23 @@ export const IconFont = ({ name, className }: IconFontType) => (
</svg>
);
export function IconFontFill({
name,
className,
isFill = true,
}: IconFontType & { isFill?: boolean }) {
return (
<span className={cn('size-4', className)}>
<svg
className={cn('size-4', className)}
style={{ fill: isFill ? 'currentColor' : '' }}
>
<use xlinkHref={`#icon-${name}`} />
</svg>
</span>
);
}
export function FileIcon({
name,
className,

66
web/src/components/layout-recognize-form-field.tsx
View File

@ -1,9 +1,11 @@
import { LlmModelType } from '@/constants/knowledge';
import { useTranslate } from '@/hooks/common-hooks';
import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
import { cn } from '@/lib/utils';
import { camelCase } from 'lodash';
import { useMemo } from 'react';
import { ReactNode, useMemo } from 'react';
import { useFormContext } from 'react-hook-form';
import { SelectWithSearch } from './originui/select-with-search';
import {
FormControl,
FormField,
@ -11,24 +13,36 @@ import {
FormLabel,
FormMessage,
} from './ui/form';
import { RAGFlowSelect } from './ui/select';
export const enum DocumentType {
export const enum ParseDocumentType {
DeepDOC = 'DeepDOC',
PlainText = 'Plain Text',
}
export function LayoutRecognizeFormField() {
export function LayoutRecognizeFormField({
name = 'parser_config.layout_recognize',
horizontal = true,
optionsWithoutLLM,
label,
}: {
name?: string;
horizontal?: boolean;
optionsWithoutLLM?: { value: string; label: string }[];
label?: ReactNode;
}) {
const form = useFormContext();
const { t } = useTranslate('knowledgeDetails');
const allOptions = useSelectLlmOptionsByModelType();
const options = useMemo(() => {
const list = [DocumentType.DeepDOC, DocumentType.PlainText].map((x) => ({
label: x === DocumentType.PlainText ? t(camelCase(x)) : 'DeepDoc',
value: x,
}));
const list = optionsWithoutLLM
? optionsWithoutLLM
: [ParseDocumentType.DeepDOC, ParseDocumentType.PlainText].map((x) => ({
label:
x === ParseDocumentType.PlainText ? t(camelCase(x)) : 'DeepDoc',
value: x,
}));
const image2TextList = allOptions[LlmModelType.Image2text].map((x) => {
return {
@ -48,38 +62,40 @@ export function LayoutRecognizeFormField() {
});
return [...list, ...image2TextList];
}, [allOptions, t]);
}, [allOptions, optionsWithoutLLM, t]);
return (
<FormField
control={form.control}
name="parser_config.layout_recognize"
name={name}
render={({ field }) => {
if (typeof field.value === 'undefined') {
// default value set
form.setValue(
'parser_config.layout_recognize',
form.formState.defaultValues?.parser_config?.layout_recognize ??
'DeepDOC',
);
}
return (
<FormItem className=" items-center space-y-0 ">
<div className="flex items-center">
<FormItem className={'items-center space-y-0 '}>
<div
className={cn('flex', {
'flex-col ': !horizontal,
'items-center': horizontal,
})}
>
<FormLabel
tooltip={t('layoutRecognizeTip')}
className="text-sm text-muted-foreground whitespace-wrap w-1/4"
className={cn('text-sm text-muted-foreground whitespace-wrap', {
['w-1/4']: horizontal,
})}
>
{t('layoutRecognize')}
{label || t('layoutRecognize')}
</FormLabel>
<div className="w-3/4">
<div className={horizontal ? 'w-3/4' : 'w-full'}>
<FormControl>
<RAGFlowSelect {...field} options={options}></RAGFlowSelect>
<SelectWithSearch
{...field}
options={options}
></SelectWithSearch>
</FormControl>
</div>
</div>
<div className="flex pt-1">
<div className="w-1/4"></div>
<div className={horizontal ? 'w-1/4' : 'w-full'}></div>
<FormMessage />
</div>
</FormItem>

25
web/src/components/llm-setting-items/llm-form-field.tsx Normal file
View File

@ -0,0 +1,25 @@
import { LlmModelType } from '@/constants/knowledge';
import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
import { useTranslation } from 'react-i18next';
import { SelectWithSearch } from '../originui/select-with-search';
import { RAGFlowFormItem } from '../ragflow-form';
type LLMFormFieldProps = {
options?: any[];
name?: string;
};
export function LLMFormField({ options, name }: LLMFormFieldProps) {
const { t } = useTranslation();
const modelOptions = useComposeLlmOptionsByModelTypes([
LlmModelType.Chat,
LlmModelType.Image2text,
]);
return (
<RAGFlowFormItem name={name || 'llm_id'} label={t('chat.model')}>
<SelectWithSearch options={options || modelOptions}></SelectWithSearch>
</RAGFlowFormItem>
);
}

27
web/src/components/llm-setting-items/next.tsx
View File

@ -1,11 +1,9 @@
import { LlmModelType, ModelVariableType } from '@/constants/knowledge';
import { ModelVariableType } from '@/constants/knowledge';
import { useTranslate } from '@/hooks/common-hooks';
import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
import { camelCase } from 'lodash';
import { useCallback } from 'react';
import { useFormContext } from 'react-hook-form';
import { z } from 'zod';
import { SelectWithSearch } from '../originui/select-with-search';
import {
FormControl,
FormField,
@ -20,6 +18,7 @@ import {
SelectTrigger,
SelectValue,
} from '../ui/select';
import { LLMFormField } from './llm-form-field';
import { SliderInputSwitchFormField } from './slider';
import { useHandleFreedomChange } from './use-watch-change';
@ -61,11 +60,6 @@ export function LlmSettingFieldItems({
const form = useFormContext();
const { t } = useTranslate('chat');
const modelOptions = useComposeLlmOptionsByModelTypes([
LlmModelType.Chat,
LlmModelType.Image2text,
]);
const getFieldWithPrefix = useCallback(
(name: string) => {
return prefix ? `${prefix}.${name}` : name;
@ -82,22 +76,7 @@ export function LlmSettingFieldItems({
return (
<div className="space-y-5">
<FormField
control={form.control}
name={'llm_id'}
render={({ field }) => (
<FormItem>
<FormLabel>{t('model')}</FormLabel>
<FormControl>
<SelectWithSearch
options={options || modelOptions}
{...field}
></SelectWithSearch>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<LLMFormField options={options}></LLMFormField>
<FormField
control={form.control}
name={'parameter'}

58
web/src/components/originui/select-with-search.tsx
View File

@ -45,8 +45,26 @@ export type SelectWithSearchFlagProps = {
onChange?(value: string): void;
triggerClassName?: string;
allowClear?: boolean;
disabled?: boolean;
placeholder?: string;
};
function findLabelWithoutOptions(
options: SelectWithSearchFlagOptionType[],
value: string,
) {
return options.find((opt) => opt.value === value)?.label || '';
}
function findLabelWithOptions(
options: SelectWithSearchFlagOptionType[],
value: string,
) {
return options
.map((group) => group?.options?.find((item) => item.value === value))
.filter(Boolean)[0]?.label;
}
export const SelectWithSearch = forwardRef<
React.ElementRef<typeof Button>,
SelectWithSearchFlagProps
@ -58,6 +76,8 @@ export const SelectWithSearch = forwardRef<
options = [],
triggerClassName,
allowClear = false,
disabled = false,
placeholder = t('common.selectPlaceholder'),
},
ref,
) => {
@ -65,6 +85,28 @@ export const SelectWithSearch = forwardRef<
const [open, setOpen] = useState<boolean>(false);
const [value, setValue] = useState<string>('');
const selectLabel = useMemo(() => {
if (options.every((x) => x.options === undefined)) {
return findLabelWithoutOptions(options, value);
} else if (options.every((x) => Array.isArray(x.options))) {
return findLabelWithOptions(options, value);
} else {
// Some have options, some don't
const optionsWithOptions = options.filter((x) =>
Array.isArray(x.options),
);
const optionsWithoutOptions = options.filter(
(x) => x.options === undefined,
);
const label = findLabelWithOptions(optionsWithOptions, value);
if (label) {
return label;
}
return findLabelWithoutOptions(optionsWithoutOptions, value);
}
}, [options, value]);
const handleSelect = useCallback(
(val: string) => {
setValue(val);
@ -86,16 +128,7 @@ export const SelectWithSearch = forwardRef<
useEffect(() => {
setValue(val);
}, [val]);
const selectLabel = useMemo(() => {
const optionTemp = options[0];
if (optionTemp?.options) {
return options
.map((group) => group?.options?.find((item) => item.value === value))
.filter(Boolean)[0]?.label;
} else {
return options.find((opt) => opt.value === value)?.label || '';
}
}, [options, value]);
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
@ -105,6 +138,7 @@ export const SelectWithSearch = forwardRef<
role="combobox"
aria-expanded={open}
ref={ref}
disabled={disabled}
className={cn(
'bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px] [&_svg]:pointer-events-auto',
triggerClassName,
@ -115,9 +149,7 @@ export const SelectWithSearch = forwardRef<
<span className="leading-none truncate">{selectLabel}</span>
</span>
) : (
<span className="text-muted-foreground">
{t('common.selectPlaceholder')}
</span>
<span className="text-muted-foreground">{placeholder}</span>
)}
<div className="flex items-center justify-between">
{value && allowClear && (

20
web/src/components/originui/timeline.tsx
View File

@ -1,7 +1,8 @@
'use client';
import { cn } from '@/lib/utils';
import { parseColorToRGBA } from '@/utils/common-util';
import { TimelineNodeType } from '@/pages/dataflow-result/constant';
import { parseColorToRGB } from '@/utils/common-util';
import { Slot } from '@radix-ui/react-slot';
import * as React from 'react';
@ -220,6 +221,8 @@ interface TimelineNode
completed?: boolean;
clickable?: boolean;
activeStyle?: TimelineIndicatorNodeProps;
detail?: any;
type?: TimelineNodeType;
}
interface CustomTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
@ -243,7 +246,7 @@ const CustomTimeline = ({
orientation = 'horizontal',
lineStyle = 'solid',
lineColor = 'var(--text-secondary)',
indicatorColor = 'var(--accent-primary)',
indicatorColor = 'rgb(var(--accent-primary))',
defaultValue = 1,
className,
activeStyle,
@ -251,8 +254,7 @@ const CustomTimeline = ({
}: CustomTimelineProps) => {
const [internalActiveStep, setInternalActiveStep] =
React.useState(defaultValue);
const _lineColor = `rgb(${parseColorToRGBA(lineColor)})`;
console.log(lineColor, _lineColor);
const _lineColor = `rgb(${parseColorToRGB(lineColor)})`;
const currentActiveStep = activeStep ?? internalActiveStep;
const handleStepChange = (step: number, id: string | number) => {
@ -261,7 +263,7 @@ const CustomTimeline = ({
}
onStepChange?.(step, id);
};
const [r, g, b] = parseColorToRGBA(indicatorColor);
const [r, g, b] = parseColorToRGB(indicatorColor);
return (
<Timeline
value={currentActiveStep}
@ -284,8 +286,6 @@ const CustomTimeline = ({
typeof _nodeSizeTemp === 'number'
? `${_nodeSizeTemp}px`
: _nodeSizeTemp;
console.log('icon-size', nodeSize, node.nodeSize, _nodeSize);
// const activeStyle = _activeStyle || {};
return (
<TimelineItem
@ -372,11 +372,10 @@ const CustomTimeline = ({
)}
</TimelineIndicator>
<TimelineHeader>
{node.date && <TimelineDate>{node.date}</TimelineDate>}
<TimelineHeader className="transform -translate-x-[40%] text-center">
<TimelineTitle
className={cn(
'text-sm font-medium',
'text-sm font-medium -ml-1',
isActive && _activeStyle.textColor
? `text-${_activeStyle.textColor}`
: '',
@ -387,6 +386,7 @@ const CustomTimeline = ({
>
{node.title}
</TimelineTitle>
{node.date && <TimelineDate>{node.date}</TimelineDate>}
</TimelineHeader>
{node.content && <TimelineContent>{node.content}</TimelineContent>}
</TimelineItem>

53
web/src/components/parse-configuration/graph-rag-form-fields.tsx
View File

@ -1,6 +1,11 @@
import { DocumentParserType } from '@/constants/knowledge';
import { useTranslate } from '@/hooks/common-hooks';
import { cn } from '@/lib/utils';
import {
GenerateLogButton,
GenerateType,
IGenerateLogButtonProps,
} from '@/pages/dataset/dataset/generate-button/generate';
import { upperFirst } from 'lodash';
import { useCallback, useMemo } from 'react';
import { useFormContext, useWatch } from 'react-hook-form';
@ -47,9 +52,17 @@ export const showGraphRagItems = (parserId: DocumentParserType | undefined) => {
type GraphRagItemsProps = {
marginBottom?: boolean;
className?: string;
data: IGenerateLogButtonProps;
onDelete?: () => void;
};
export function UseGraphRagFormField() {
export function UseGraphRagFormField({
data,
onDelete,
}: {
data: IGenerateLogButtonProps;
onDelete?: () => void;
}) {
const form = useFormContext();
const { t } = useTranslate('knowledgeConfiguration');
@ -62,16 +75,23 @@ export function UseGraphRagFormField() {
<div className="flex items-center gap-1">
<FormLabel
tooltip={t('useGraphRagTip')}
className="text-sm text-muted-foreground whitespace-break-spaces w-1/4"
className="text-sm whitespace-break-spaces w-1/4"
>
{t('useGraphRag')}
</FormLabel>
<div className="w-3/4">
<FormControl>
<Switch
{/* <Switch
checked={field.value}
onCheckedChange={field.onChange}
></Switch>
></Switch> */}
<GenerateLogButton
{...data}
onDelete={onDelete}
className="w-full text-text-secondary"
status={1}
type={GenerateType.KnowledgeGraph}
/>
</FormControl>
</div>
</div>
@ -89,6 +109,8 @@ export function UseGraphRagFormField() {
const GraphRagItems = ({
marginBottom = false,
className = 'p-10',
data,
onDelete,
}: GraphRagItemsProps) => {
const { t } = useTranslate('knowledgeConfiguration');
const form = useFormContext();
@ -114,7 +136,10 @@ const GraphRagItems = ({
return (
<FormContainer className={cn({ 'mb-4': marginBottom }, className)}>
<UseGraphRagFormField></UseGraphRagFormField>
<UseGraphRagFormField
data={data}
onDelete={onDelete}
></UseGraphRagFormField>
{useRaptor && (
<>
<EntityTypesFormField name="parser_config.graphrag.entity_types"></EntityTypesFormField>
@ -125,7 +150,7 @@ const GraphRagItems = ({
<FormItem className=" items-center space-y-0 ">
<div className="flex items-center">
<FormLabel
className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
className="text-sm whitespace-nowrap w-1/4"
tooltip={renderWideTooltip(
<div
dangerouslySetInnerHTML={{
@ -161,7 +186,7 @@ const GraphRagItems = ({
<div className="flex items-center">
<FormLabel
tooltip={renderWideTooltip('resolutionTip')}
className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
className="text-sm whitespace-nowrap w-1/4"
>
{t('resolution')}
</FormLabel>
@ -190,7 +215,7 @@ const GraphRagItems = ({
<div className="flex items-center">
<FormLabel
tooltip={renderWideTooltip('communityTip')}
className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
className="text-sm whitespace-nowrap w-1/4"
>
{t('community')}
</FormLabel>
@ -210,6 +235,18 @@ const GraphRagItems = ({
</FormItem>
)}
/>
{/* {showGenerateItem && (
<div className="w-full flex items-center">
<div className="text-sm whitespace-nowrap w-1/4">
{t('extractKnowledgeGraph')}
</div>
<GenerateLogButton
className="w-3/4 text-text-secondary"
status={1}
type={GenerateType.KnowledgeGraph}
/>
</div>
)} */}
</>
)}
</FormContainer>

61
web/src/components/parse-configuration/raptor-form-fields.tsx
View File

@ -1,12 +1,16 @@
import { FormLayout } from '@/constants/form';
import { DocumentParserType } from '@/constants/knowledge';
import { useTranslate } from '@/hooks/common-hooks';
import {
GenerateLogButton,
GenerateType,
IGenerateLogButtonProps,
} from '@/pages/dataset/dataset/generate-button/generate';
import random from 'lodash/random';
import { Plus } from 'lucide-react';
import { Shuffle } from 'lucide-react';
import { useCallback } from 'react';
import { useFormContext, useWatch } from 'react-hook-form';
import { SliderInputFormField } from '../slider-input-form-field';
import { Button } from '../ui/button';
import {
FormControl,
FormField,
@ -14,8 +18,7 @@ import {
FormLabel,
FormMessage,
} from '../ui/form';
import { Input } from '../ui/input';
import { Switch } from '../ui/switch';
import { ExpandedInput } from '../ui/input';
import { Textarea } from '../ui/textarea';
export const excludedParseMethods = [
@ -53,7 +56,13 @@ const Prompt = 'parser_config.raptor.prompt';
// The three types "table", "resume" and "one" do not display this configuration.
const RaptorFormFields = () => {
const RaptorFormFields = ({
data,
onDelete,
}: {
data: IGenerateLogButtonProps;
onDelete: () => void;
}) => {
const form = useFormContext();
const { t } = useTranslate('knowledgeConfiguration');
const useRaptor = useWatch({ name: UseRaptorField });
@ -93,7 +102,7 @@ const RaptorFormFields = () => {
<div className="flex items-center gap-1">
<FormLabel
tooltip={t('useRaptorTip')}
className="text-sm text-muted-foreground w-1/4 whitespace-break-spaces"
className="text-sm w-1/4 whitespace-break-spaces"
>
<div className="w-auto xl:w-20 2xl:w-24 3xl:w-28 4xl:w-auto ">
{t('useRaptor')}
@ -101,13 +110,13 @@ const RaptorFormFields = () => {
</FormLabel>
<div className="w-3/4">
<FormControl>
<Switch
checked={field.value}
onCheckedChange={(e) => {
changeRaptor(e);
field.onChange(e);
}}
></Switch>
<GenerateLogButton
{...data}
onDelete={onDelete}
className="w-full text-text-secondary"
status={1}
type={GenerateType.Raptor}
/>
</FormControl>
</div>
</div>
@ -130,7 +139,7 @@ const RaptorFormFields = () => {
<div className="flex items-start">
<FormLabel
tooltip={t('promptTip')}
className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
className="text-sm whitespace-nowrap w-1/4"
>
{t('prompt')}
</FormLabel>
@ -185,21 +194,23 @@ const RaptorFormFields = () => {
render={({ field }) => (
<FormItem className=" items-center space-y-0 ">
<div className="flex items-center">
<FormLabel className="text-sm text-muted-foreground whitespace-wrap w-1/4">
<FormLabel className="text-sm whitespace-wrap w-1/4">
{t('randomSeed')}
</FormLabel>
<div className="w-3/4">
<FormControl defaultValue={0}>
<div className="flex gap-4 items-center">
<Input {...field} defaultValue={0} type="number" />
<Button
size={'sm'}
onClick={handleGenerate}
type={'button'}
>
<Plus />
</Button>
</div>
<ExpandedInput
{...field}
className="w-full"
defaultValue={0}
type="number"
suffix={
<Shuffle
className="size-3.5 cursor-pointer"
onClick={handleGenerate}
/>
}
/>
</FormControl>
</div>
</div>

20
web/src/components/ragflow-form.tsx
View File

@ -11,11 +11,12 @@ import { ControllerRenderProps, useFormContext } from 'react-hook-form';
type RAGFlowFormItemProps = {
name: string;
label: ReactNode;
label?: ReactNode;
tooltip?: ReactNode;
children: ReactNode | ((field: ControllerRenderProps) => ReactNode);
horizontal?: boolean;
required?: boolean;
labelClassName?: string;
};
export function RAGFlowFormItem({
@ -25,6 +26,7 @@ export function RAGFlowFormItem({
children,
horizontal = false,
required = false,
labelClassName,
}: RAGFlowFormItemProps) {
const form = useFormContext();
return (
@ -37,13 +39,15 @@ export function RAGFlowFormItem({
'flex items-center': horizontal,
})}
>
<FormLabel
required={required}
tooltip={tooltip}
className={cn({ 'w-1/4': horizontal })}
>
{label}
</FormLabel>
{label && (
<FormLabel
required={required}
tooltip={tooltip}
className={cn({ 'w-1/4': horizontal }, labelClassName)}
>
{label}
</FormLabel>
)}
<FormControl>
{typeof children === 'function'
? children(field)

3
web/src/components/slider-input-form-field.tsx
View File

@ -54,8 +54,7 @@ export function SliderInputFormField({
<FormLabel
tooltip={tooltip}
className={cn({
'text-sm text-muted-foreground whitespace-break-spaces w-1/4':
isHorizontal,
'text-sm whitespace-break-spaces w-1/4': isHorizontal,
})}
>
{label}

2
web/src/components/ui/dual-range-slider.tsx
View File

@ -28,7 +28,7 @@ const DualRangeSlider = React.forwardRef<
)}
{...props}
>
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-border-button">
<SliderPrimitive.Range className="absolute h-full bg-accent-primary" />
</SliderPrimitive.Track>
{initialValue.map((value, index) => (

14
web/src/components/ui/modal/modal.tsx
View File

@ -31,6 +31,7 @@ export interface ModalProps {
export interface ModalType extends FC<ModalProps> {
show: typeof modalIns.show;
hide: typeof modalIns.hide;
destroy: typeof modalIns.destroy;
}
const Modal: ModalType = ({
@ -76,20 +77,20 @@ const Modal: ModalType = ({
const handleCancel = useCallback(() => {
onOpenChange?.(false);
onCancel?.();
}, [onOpenChange, onCancel]);
}, [onCancel, onOpenChange]);
const handleOk = useCallback(() => {
onOpenChange?.(true);
onOk?.();
}, [onOpenChange, onOk]);
}, [onOk, onOpenChange]);
const handleChange = (open: boolean) => {
onOpenChange?.(open);
console.log('open', open, onOpenChange);
if (open) {
handleOk();
onOk?.();
}
if (!open) {
handleCancel();
onCancel?.();
}
};
const footEl = useMemo(() => {
@ -177,7 +178,7 @@ const Modal: ModalType = ({
<DialogPrimitive.Close asChild>
<button
type="button"
className="flex h-7 w-7 items-center justify-center rounded-full hover:bg-muted"
className="flex h-7 w-7 items-center justify-center rounded-full hover:bg-muted focus-visible:outline-none"
>
{closeIcon}
</button>
@ -187,7 +188,7 @@ const Modal: ModalType = ({
)}
{/* content */}
<div className="py-2 px-6 overflow-y-auto max-h-[80vh] focus-visible:!outline-none">
<div className="py-2 px-6 overflow-y-auto scrollbar-auto max-h-[80vh] focus-visible:!outline-none">
{destroyOnClose && !open ? null : children}
</div>
@ -208,5 +209,6 @@ Modal.show = modalIns
return modalIns.show;
};
Modal.hide = modalIns.hide;
Modal.destroy = modalIns.destroy;
export { Modal };

2
web/src/components/ui/radio.tsx
View File

@ -49,7 +49,7 @@ function Radio({ value, checked, disabled, onChange, children }: RadioProps) {
>
<span
className={cn(
'flex h-4 w-4 items-center justify-center rounded-full border border-input transition-colors',
'flex h-4 w-4 items-center justify-center rounded-full border border-border transition-colors',
'peer ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
isChecked && 'border-primary bg-primary/10',
mergedDisabled && 'border-muted',

9
web/src/components/ui/tooltip.tsx
View File

@ -33,7 +33,12 @@ export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
export const FormTooltip = ({ tooltip }: { tooltip: React.ReactNode }) => {
return (
<Tooltip>
<TooltipTrigger tabIndex={-1}>
<TooltipTrigger
tabIndex={-1}
onClick={(e) => {
e.preventDefault(); // Prevent clicking the tooltip from triggering form save
}}
>
<Info className="size-3 ml-2" />
</TooltipTrigger>
<TooltipContent>
@ -107,7 +112,7 @@ export const AntToolTip: React.FC<AntToolTipProps> = ({
{visible && title && (
<div
className={cn(
'absolute z-50 px-2.5 py-2 text-xs text-text-primary bg-muted rounded-sm shadow-sm whitespace-wrap',
'absolute z-50 px-2.5 py-2 text-xs text-text-primary bg-muted rounded-sm shadow-sm whitespace-wrap w-max',
getPlacementClasses(),
className,
)}

26
web/src/constants/agent.ts
View File

@ -1,3 +1,6 @@
import { setInitialChatVariableEnabledFieldValue } from '@/utils/chat';
import { ChatVariableEnabledField, variableEnabledFieldMap } from './chat';
export enum ProgrammingLanguage {
Python = 'python',
Javascript = 'javascript',
@ -26,3 +29,26 @@ export enum AgentGlobals {
}
export const AgentGlobalsSysQueryWithBrace = `{${AgentGlobals.SysQuery}}`;
export const variableCheckBoxFieldMap = Object.keys(
variableEnabledFieldMap,
).reduce<Record<string, boolean>>((pre, cur) => {
pre[cur] = setInitialChatVariableEnabledFieldValue(
cur as ChatVariableEnabledField,
);
return pre;
}, {});
export const initialLlmBaseValues = {
...variableCheckBoxFieldMap,
temperature: 0.1,
top_p: 0.3,
frequency_penalty: 0.7,
presence_penalty: 0.4,
max_tokens: 256,
};
export enum AgentCategory {
AgentCanvas = 'agent_canvas',
DataflowCanvas = 'dataflow_canvas',
}

9
web/src/constants/knowledge.ts
View File

@ -15,6 +15,14 @@ export enum RunningStatus {
FAIL = '4', // need to refresh
}
export const RunningStatusMap = {
[RunningStatus.UNSTART]: 'Pending',
[RunningStatus.RUNNING]: 'Running',
[RunningStatus.CANCEL]: 'Cancel',
[RunningStatus.DONE]: 'Success',
[RunningStatus.FAIL]: 'Failed',
};
export enum ModelVariableType {
Improvise = 'Improvise',
Precise = 'Precise',
@ -57,6 +65,7 @@ export enum LlmModelType {
export enum KnowledgeSearchParams {
DocumentId = 'doc_id',
KnowledgeId = 'id',
Type = 'type',
}
export enum DocumentType {

67
web/src/hooks/flow-hooks.ts
View File

@ -1,79 +1,14 @@
import { ResponseType } from '@/interfaces/database/base';
import { DSL, IFlow, IFlowTemplate } from '@/interfaces/database/flow';
import { DSL, IFlow } from '@/interfaces/database/flow';
import { IDebugSingleRequestBody } from '@/interfaces/request/flow';
import i18n from '@/locales/config';
import { useGetSharedChatSearchParams } from '@/pages/chat/shared-hooks';
import { BeginId } from '@/pages/flow/constant';
import flowService from '@/services/flow-service';
import { buildMessageListWithUuid } from '@/utils/chat';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { message } from 'antd';
import { set } from 'lodash';
import get from 'lodash/get';
import { useTranslation } from 'react-i18next';
import { useParams } from 'umi';
import { v4 as uuid } from 'uuid';
export const EmptyDsl = {
graph: {
nodes: [
{
id: BeginId,
type: 'beginNode',
position: {
x: 50,
y: 200,
},
data: {
label: 'Begin',
name: 'begin',
},
sourcePosition: 'left',
targetPosition: 'right',
},
],
edges: [],
},
components: {
begin: {
obj: {
component_name: 'Begin',
params: {},
},
downstream: ['Answer:China'], // other edge target is downstream, edge source is current node id
upstream: [], // edge source is upstream, edge target is current node id
},
},
messages: [],
reference: [],
history: [],
path: [],
answer: [],
};
export const useFetchFlowTemplates = (): ResponseType<IFlowTemplate[]> => {
const { t } = useTranslation();
const { data } = useQuery({
queryKey: ['fetchFlowTemplates'],
initialData: [],
queryFn: async () => {
const { data } = await flowService.listTemplates();
if (Array.isArray(data?.data)) {
data.data.unshift({
id: uuid(),
title: t('flow.blank'),
description: t('flow.createFromNothing'),
dsl: EmptyDsl,
});
}
return data;
},
});
return data;
};
export const useFetchFlowList = (): { data: IFlow[]; loading: boolean } => {
const { data, isFetching: loading } = useQuery({

31
web/src/hooks/logic-hooks/navigate-hooks.ts
View File

@ -1,3 +1,4 @@
import { NavigateToDataflowResultProps } from '@/pages/dataflow-result/interface';
import { Routes } from '@/routes';
import { useCallback } from 'react';
import { useNavigate, useParams, useSearchParams } from 'umi';
@ -18,7 +19,14 @@ export const useNavigatePage = () => {
const navigateToDataset = useCallback(
(id: string) => () => {
navigate(`${Routes.Dataset}/${id}`);
navigate(`${Routes.DatasetBase}${Routes.DataSetOverview}/${id}`);
},
[navigate],
);
const navigateToDataFile = useCallback(
(id: string) => () => {
navigate(`${Routes.DatasetBase}${Routes.DatasetBase}/${id}`);
},
[navigate],
);
@ -61,6 +69,13 @@ export const useNavigatePage = () => {
[navigate],
);
const navigateToDataflow = useCallback(
(id: string) => () => {
navigate(`${Routes.DataFlow}/${id}`);
},
[navigate],
);
const navigateToAgentLogs = useCallback(
(id: string) => () => {
navigate(`${Routes.AgentLogPage}/${id}`);
@ -86,8 +101,8 @@ export const useNavigatePage = () => {
const navigateToChunkParsedResult = useCallback(
(id: string, knowledgeId?: string) => () => {
navigate(
// `${Routes.ParsedResult}/${id}?${QueryStringMap.KnowledgeId}=${knowledgeId}`,
`${Routes.ParsedResult}/chunks?id=${knowledgeId}&doc_id=${id}`,
// `${Routes.DataflowResult}?id=${knowledgeId}&doc_id=${id}&type=chunk`,
);
},
[navigate],
@ -126,10 +141,16 @@ export const useNavigatePage = () => {
);
const navigateToDataflowResult = useCallback(
(id: string, knowledgeId?: string) => () => {
(props: NavigateToDataflowResultProps) => () => {
let params: string[] = [];
Object.keys(props).forEach((key) => {
if (props[key]) {
params.push(`${key}=${props[key]}`);
}
});
navigate(
// `${Routes.ParsedResult}/${id}?${QueryStringMap.KnowledgeId}=${knowledgeId}`,
`${Routes.DataflowResult}/${id}`,
`${Routes.DataflowResult}?${params.join('&')}`,
);
},
[navigate],
@ -155,5 +176,7 @@ export const useNavigatePage = () => {
navigateToAgentList,
navigateToOldProfile,
navigateToDataflowResult,
navigateToDataflow,
navigateToDataFile,
};
};

1
web/src/hooks/route-hook.ts
View File

@ -29,6 +29,7 @@ export const useGetKnowledgeSearchParams = () => {
const [currentQueryParameters] = useSearchParams();
return {
type: currentQueryParameters.get(KnowledgeSearchParams.Type) || '',
documentId:
currentQueryParameters.get(KnowledgeSearchParams.DocumentId) || '',
knowledgeId:

128
web/src/hooks/use-agent-request.ts
View File

@ -1,4 +1,5 @@
import { FileUploadProps } from '@/components/file-upload';
import { useHandleFilterSubmit } from '@/components/list-filter-bar/use-handle-filter-submit';
import message from '@/components/ui/message';
import { AgentGlobals } from '@/constants/agent';
import {
@ -7,6 +8,7 @@ import {
IAgentLogsResponse,
IFlow,
IFlowTemplate,
IPipeLineListRequest,
ITraceData,
} from '@/interfaces/database/agent';
import { IDebugSingleRequestBody } from '@/interfaces/request/agent';
@ -16,6 +18,7 @@ import { IInputs } from '@/pages/agent/interface';
import { useGetSharedChatSearchParams } from '@/pages/chat/shared-hooks';
import agentService, {
fetchAgentLogsByCanvasId,
fetchPipeLineList,
fetchTrace,
} from '@/services/agent-service';
import api from '@/utils/api';
@ -31,6 +34,7 @@ import {
} from './logic-hooks';
export const enum AgentApiAction {
FetchAgentListByPage = 'fetchAgentListByPage',
FetchAgentList = 'fetchAgentList',
UpdateAgentSetting = 'updateAgentSetting',
DeleteAgent = 'deleteAgent',
@ -50,6 +54,7 @@ export const enum AgentApiAction {
FetchExternalAgentInputs = 'fetchExternalAgentInputs',
SetAgentSetting = 'setAgentSetting',
FetchPrompt = 'fetchPrompt',
CancelDataflow = 'cancelDataflow',
}
export const EmptyDsl = {
@ -111,28 +116,47 @@ export const useFetchAgentListByPage = () => {
const { searchString, handleInputChange } = useHandleSearchChange();
const { pagination, setPagination } = useGetPaginationWithRouter();
const debouncedSearchString = useDebounce(searchString, { wait: 500 });
const { filterValue, handleFilterSubmit } = useHandleFilterSubmit();
const canvasCategory = Array.isArray(filterValue.canvasCategory)
? filterValue.canvasCategory
: [];
const owner = filterValue.owner;
const requestParams: Record<string, any> = {
keywords: debouncedSearchString,
page_size: pagination.pageSize,
page: pagination.current,
canvas_category:
canvasCategory.length === 1 ? canvasCategory[0] : undefined,
};
if (Array.isArray(owner) && owner.length > 0) {
requestParams.owner_ids = owner.join(',');
}
const { data, isFetching: loading } = useQuery<{
canvas: IFlow[];
total: number;
}>({
queryKey: [
AgentApiAction.FetchAgentList,
AgentApiAction.FetchAgentListByPage,
{
debouncedSearchString,
...pagination,
filterValue,
},
],
initialData: { canvas: [], total: 0 },
placeholderData: (previousData) => {
if (previousData === undefined) {
return { canvas: [], total: 0 };
}
return previousData;
},
gcTime: 0,
queryFn: async () => {
const { data } = await agentService.listCanvasTeam(
const { data } = await agentService.listCanvas(
{
params: {
keywords: debouncedSearchString,
page_size: pagination.pageSize,
page: pagination.current,
},
params: requestParams,
},
true,
);
@ -150,12 +174,14 @@ export const useFetchAgentListByPage = () => {
);
return {
data: data.canvas,
data: data?.canvas ?? [],
loading,
searchString,
handleInputChange: onInputChange,
pagination: { ...pagination, total: data?.total },
setPagination,
filterValue,
handleFilterSubmit,
};
};
@ -173,7 +199,7 @@ export const useUpdateAgentSetting = () => {
if (ret?.data?.code === 0) {
message.success('success');
queryClient.invalidateQueries({
queryKey: [AgentApiAction.FetchAgentList],
queryKey: [AgentApiAction.FetchAgentListByPage],
});
} else {
message.error(ret?.data?.data);
@ -197,7 +223,7 @@ export const useDeleteAgent = () => {
const { data } = await agentService.removeCanvas({ canvasIds });
if (data.code === 0) {
queryClient.invalidateQueries({
queryKey: [AgentApiAction.FetchAgentList],
queryKey: [AgentApiAction.FetchAgentListByPage],
});
}
return data?.data ?? [];
@ -271,6 +297,7 @@ export const useSetAgent = (showMessage: boolean = true) => {
title?: string;
dsl?: DSL;
avatar?: string;
canvas_category?: string;
}) => {
const { data = {} } = await agentService.setCanvas(params);
if (data.code === 0) {
@ -280,7 +307,7 @@ export const useSetAgent = (showMessage: boolean = true) => {
);
}
queryClient.invalidateQueries({
queryKey: [AgentApiAction.FetchAgentList],
queryKey: [AgentApiAction.FetchAgentListByPage],
});
}
return data;
@ -379,7 +406,7 @@ export const useUploadCanvasFileWithProgress = (
files.forEach((file) => {
onError(file, error as Error);
});
message.error(error?.message);
message.error((error as Error)?.message || 'Upload failed');
}
},
});
@ -387,13 +414,11 @@ export const useUploadCanvasFileWithProgress = (
return { data, loading, uploadCanvasFile: mutateAsync };
};
export const useFetchMessageTrace = (
isStopFetchTrace: boolean,
canvasId?: string,
) => {
export const useFetchMessageTrace = (canvasId?: string) => {
const { id } = useParams();
const queryId = id || canvasId;
const [messageId, setMessageId] = useState('');
const [isStopFetchTrace, setISStopFetchTrace] = useState(false);
const {
data,
@ -413,11 +438,19 @@ export const useFetchMessageTrace = (
message_id: messageId,
});
return data?.data ?? [];
return Array.isArray(data?.data) ? data?.data : [];
},
});
return { data, loading, refetch, setMessageId };
return {
data,
loading,
refetch,
setMessageId,
messageId,
isStopFetchTrace,
setISStopFetchTrace,
};
};
export const useTestDbConnect = () => {
@ -563,7 +596,6 @@ export const useFetchAgentLog = (searchParams: IAgentLogsRequest) => {
initialData: {} as IAgentLogsResponse,
gcTime: 0,
queryFn: async () => {
console.log('useFetchAgentLog', searchParams);
const { data } = await fetchAgentLogsByCanvasId(id as string, {
...searchParams,
});
@ -647,3 +679,59 @@ export const useFetchPrompt = () => {
return { data, loading, refetch };
};
export const useFetchAgentList = ({
canvas_category,
}: IPipeLineListRequest) => {
const { data, isFetching: loading } = useQuery<{
canvas: IFlow[];
total: number;
}>({
queryKey: [AgentApiAction.FetchAgentList],
initialData: { canvas: [], total: 0 },
gcTime: 0,
queryFn: async () => {
const { data } = await fetchPipeLineList({ canvas_category });
return data?.data ?? [];
},
});
return { data, loading };
};
export const useCancelDataflow = () => {
const {
data,
isPending: loading,
mutateAsync,
} = useMutation({
mutationKey: [AgentApiAction.CancelDataflow],
mutationFn: async (taskId: string) => {
const ret = await agentService.cancelDataflow(taskId);
if (ret?.data?.code === 0) {
message.success('success');
} else {
message.error(ret?.data?.data);
}
return ret?.data?.code;
},
});
return { data, loading, cancelDataflow: mutateAsync };
};
// export const useFetchKnowledgeList = () => {
// const { data, isFetching: loading } = useQuery<IFlow[]>({
// queryKey: [AgentApiAction.FetchAgentList],
// initialData: [],
// gcTime: 0, // https://tanstack.com/query/latest/docs/framework/react/guides/caching?from=reactQueryV3
// queryFn: async () => {
// const { data } = await agentService.listCanvas();
// return data?.data ?? [];
// },
// });
// return { list: data, loading };
// };

5
web/src/hooks/use-chunk-request.ts
View File

@ -13,7 +13,9 @@ import {
} from './logic-hooks';
import { useGetKnowledgeSearchParams } from './route-hook';
export const useFetchNextChunkList = (): ResponseGetType<{
export const useFetchNextChunkList = (
enabled = true,
): ResponseGetType<{
data: IChunk[];
total: number;
documentInfo: IKnowledgeFile;
@ -37,6 +39,7 @@ export const useFetchNextChunkList = (): ResponseGetType<{
placeholderData: (previousData: any) =>
previousData ?? { data: [], total: 0, documentInfo: {} }, // https://github.com/TanStack/query/issues/8183
gcTime: 0,
enabled,
queryFn: async () => {
const { data } = await kbService.chunk_list({
doc_id: documentId,

91
web/src/hooks/use-dataflow-request.ts Normal file
View File

@ -0,0 +1,91 @@
import message from '@/components/ui/message';
import { IFlow } from '@/interfaces/database/agent';
import dataflowService from '@/services/dataflow-service';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { useParams } from 'umi';
export const enum DataflowApiAction {
ListDataflow = 'listDataflow',
RemoveDataflow = 'removeDataflow',
FetchDataflow = 'fetchDataflow',
RunDataflow = 'runDataflow',
SetDataflow = 'setDataflow',
}
export const useRemoveDataflow = () => {
const queryClient = useQueryClient();
const { t } = useTranslation();
const {
data,
isPending: loading,
mutateAsync,
} = useMutation({
mutationKey: [DataflowApiAction.RemoveDataflow],
mutationFn: async (ids: string[]) => {
const { data } = await dataflowService.removeDataflow({
canvas_ids: ids,
});
if (data.code === 0) {
queryClient.invalidateQueries({
queryKey: [DataflowApiAction.ListDataflow],
});
message.success(t('message.deleted'));
}
return data.code;
},
});
return { data, loading, removeDataflow: mutateAsync };
};
export const useSetDataflow = () => {
const queryClient = useQueryClient();
const { t } = useTranslation();
const {
data,
isPending: loading,
mutateAsync,
} = useMutation({
mutationKey: [DataflowApiAction.SetDataflow],
mutationFn: async (params: Partial<IFlow>) => {
const { data } = await dataflowService.setDataflow(params);
if (data.code === 0) {
queryClient.invalidateQueries({
queryKey: [DataflowApiAction.FetchDataflow],
});
message.success(t(`message.${params.id ? 'modified' : 'created'}`));
}
return data?.code;
},
});
return { data, loading, setDataflow: mutateAsync };
};
export const useFetchDataflow = () => {
const { id } = useParams();
const {
data,
isFetching: loading,
refetch,
} = useQuery<IFlow>({
queryKey: [DataflowApiAction.FetchDataflow, id],
gcTime: 0,
initialData: {} as IFlow,
enabled: !!id,
refetchOnWindowFocus: false,
queryFn: async () => {
const { data } = await dataflowService.fetchDataflow(id);
return data?.data ?? ({} as IFlow);
},
});
return { data, loading, refetch };
};

3
web/src/hooks/use-document-request.ts
View File

@ -335,15 +335,18 @@ export const useSetDocumentParser = () => {
mutationKey: [DocumentApiAction.SetDocumentParser],
mutationFn: async ({
parserId,
pipelineId,
documentId,
parserConfig,
}: {
parserId: string;
pipelineId: string;
documentId: string;
parserConfig: IChangeParserConfigRequestBody;
}) => {
const { data } = await kbService.document_change_parser({
parser_id: parserId,
pipeline_id: pipelineId,
doc_id: documentId,
parser_config: parserConfig,
});

41
web/src/hooks/use-knowledge-request.ts
View File

@ -31,6 +31,7 @@ export const enum KnowledgeApiAction {
FetchKnowledgeDetail = 'fetchKnowledgeDetail',
FetchKnowledgeGraph = 'fetchKnowledgeGraph',
FetchMetadata = 'fetchMetadata',
FetchKnowledgeList = 'fetchKnowledgeList',
RemoveKnowledgeGraph = 'removeKnowledgeGraph',
}
@ -238,7 +239,11 @@ export const useUpdateKnowledge = (shouldFetchList = false) => {
return { data, loading, saveKnowledgeConfiguration: mutateAsync };
};
export const useFetchKnowledgeBaseConfiguration = (refreshCount?: number) => {
export const useFetchKnowledgeBaseConfiguration = (props?: {
isEdit?: boolean;
refreshCount?: number;
}) => {
const { isEdit = true, refreshCount } = props || { isEdit: true };
const { id } = useParams();
const [searchParams] = useSearchParams();
const knowledgeBaseId = searchParams.get('id') || id;
@ -255,10 +260,14 @@ export const useFetchKnowledgeBaseConfiguration = (refreshCount?: number) => {
initialData: {} as IKnowledge,
gcTime: 0,
queryFn: async () => {
const { data } = await kbService.get_kb_detail({
kb_id: knowledgeBaseId,
});
return data?.data ?? {};
if (isEdit) {
const { data } = await kbService.get_kb_detail({
kb_id: knowledgeBaseId,
});
return data?.data ?? {};
} else {
return {};
}
},
});
@ -323,3 +332,25 @@ export const useRemoveKnowledgeGraph = () => {
return { data, loading, removeKnowledgeGraph: mutateAsync };
};
export const useFetchKnowledgeList = (
shouldFilterListWithoutDocument: boolean = false,
): {
list: IKnowledge[];
loading: boolean;
} => {
const { data, isFetching: loading } = useQuery({
queryKey: [KnowledgeApiAction.FetchKnowledgeList],
initialData: [],
gcTime: 0, // https://tanstack.com/query/latest/docs/framework/react/guides/caching?from=reactQueryV3
queryFn: async () => {
const { data } = await listDataset();
const list = data?.data?.kbs ?? [];
return shouldFilterListWithoutDocument
? list.filter((x: IKnowledge) => x.chunk_num > 0)
: list;
},
});
return { list: data, loading };
};

11
web/src/interfaces/database/agent.ts
View File

@ -30,6 +30,7 @@ export interface ISwitchForm {
no: string;
}
import { AgentCategory } from '@/constants/agent';
import { Edge, Node } from '@xyflow/react';
import { IReference, Message } from './chat';
@ -74,6 +75,7 @@ export declare interface IFlow {
permission: string;
nickname: string;
operator_permission: number;
canvas_category: string;
}
export interface IFlowTemplate {
@ -265,3 +267,12 @@ export interface IAgentLogMessage {
role: 'user' | 'assistant';
id: string;
}
export interface IPipeLineListRequest {
page?: number;
page_size?: number;
keywords?: string;
orderby?: string;
desc?: boolean;
canvas_category?: AgentCategory;
}

4
web/src/interfaces/database/document.ts
View File

@ -5,12 +5,15 @@ export interface IDocumentInfo {
create_date: string;
create_time: number;
created_by: string;
nickname: string;
id: string;
kb_id: string;
location: string;
name: string;
parser_config: IParserConfig;
parser_id: string;
pipeline_id: string;
pipeline_name: string;
process_begin_at?: string;
process_duration: number;
progress: number;
@ -19,6 +22,7 @@ export interface IDocumentInfo {
size: number;
source_type: string;
status: string;
suffix: string;
thumbnail: string;
token_num: number;
type: string;

7
web/src/interfaces/database/knowledge.ts
View File

@ -14,6 +14,9 @@ export interface IKnowledge {
name: string;
parser_config: ParserConfig;
parser_id: string;
pipeline_id: string;
pipeline_name: string;
pipeline_avatar: string;
permission: string;
similarity_threshold: number;
status: string;
@ -26,6 +29,10 @@ export interface IKnowledge {
nickname: string;
operator_permission: number;
size: number;
raptor_task_finish_at?: string;
raptor_task_id?: string;
mindmap_task_finish_at?: string;
mindmap_task_id?: string;
}
export interface IKnowledgeResult {

1
web/src/interfaces/request/document.ts
View File

@ -7,6 +7,7 @@ export interface IChangeParserConfigRequestBody {
export interface IChangeParserRequestBody {
parser_id: string;
pipeline_id: string;
doc_id: string;
parser_config: IChangeParserConfigRequestBody;
}

25
web/src/layouts/next-header.tsx
View File

@ -1,3 +1,4 @@
import { IconFontFill } from '@/components/icon-font';
import { RAGFlowAvatar } from '@/components/ragflow-avatar';
import { useTheme } from '@/components/theme-provider';
import { Button } from '@/components/ui/button';
@ -20,7 +21,6 @@ import {
CircleHelp,
Cpu,
File,
Github,
House,
Library,
MessageSquareText,
@ -114,15 +114,6 @@ export function Header() {
className="size-10 mr-[12] cursor-pointer"
onClick={handleLogoClick}
/>
<a
className="flex items-center gap-1.5 text-text-secondary"
target="_blank"
href="https://github.com/infiniflow/ragflow"
rel="noreferrer"
>
<Github className="size-4" />
{/* <span className=" text-base">21.5k stars</span> */}
</a>
</div>
<Segmented
options={options}
@ -130,6 +121,20 @@ export function Header() {
onChange={handleChange}
></Segmented>
<div className="flex items-center gap-5 text-text-badge">
<a
target="_blank"
href="https://discord.com/invite/NjYzJD3GM3"
rel="noreferrer"
>
<IconFontFill name="a-DiscordIconSVGVectorIcon"></IconFontFill>
</a>
<a
target="_blank"
href="https://github.com/infiniflow/ragflow"
rel="noreferrer"
>
<IconFontFill name="GitHub"></IconFontFill>
</a>
<DropdownMenu>
<DropdownMenuTrigger>
<div className="flex items-center gap-1">

2
web/src/less/mixins.less
View File

@ -5,7 +5,7 @@
.chunkText() {
em {
color: red;
color: var(--accent-primary);
font-style: normal;
}
table {

191
web/src/locales/en.ts
View File

@ -102,16 +102,24 @@ export default {
noMoreData: `That's all. Nothing more.`,
},
knowledgeDetails: {
fileSize: 'File Size',
fileType: 'File Type',
uploadedBy: 'Uploaded by',
notGenerated: 'Not generated',
generatedOn: 'Generated on',
subbarFiles: 'Files',
generateKnowledgeGraph:
'This will extract entities and relationships from all your documents in this dataset. The process may take a while to complete.',
generateRaptor:
'This will extract entities and relationships from all your documents in this dataset. The process may take a while to complete.',
generate: 'Generate',
raptor: 'Raptor',
knowledgeGraph: 'Knowledge Graph',
processingType: 'Processing Type',
dataPipeline: 'Data Pipeline',
operations: 'Operations',
taskId: 'Task ID',
duration: 'Duration',
details: 'Details',
status: 'Status',
task: 'Task',
startDate: 'Start Date',
@ -123,7 +131,7 @@ export default {
success: 'Success',
failed: 'Failed',
completed: 'Completed',
processLog: 'Process Log',
datasetLog: 'Dataset Log',
created: 'Created',
learnMore: 'Learn More',
general: 'General',
@ -138,12 +146,12 @@ export default {
testing: 'Retrieval testing',
files: 'files',
configuration: 'Configuration',
knowledgeGraph: 'Knowledge graph',
knowledgeGraph: 'Knowledge Graph',
name: 'Name',
namePlaceholder: 'Please input name!',
doc: 'Docs',
datasetDescription:
'😉 Please wait for your files to finish parsing before starting an AI-powered chat.',
'Please wait for your files to finish parsing before starting an AI-powered chat.',
addFile: 'Add file',
searchFiles: 'Search your files',
localFiles: 'Local files',
@ -261,13 +269,30 @@ export default {
reRankModelWaring: 'Re-rank model is very time consuming.',
},
knowledgeConfiguration: {
deleteGenerateModalContent: `
<p>Deleting the generated <strong class='text-text-primary'>{{type}}</strong> results
will remove all derived entities and relationships from this dataset.
Your original files will remain intact.<p>
<br/>
Do you want to continue?
`,
extractRaptor: 'Extract Raptor',
extractKnowledgeGraph: 'Extract Knowledge Graph',
filterPlaceholder: 'please input filter',
fileFilterTip: '',
fileFilter: 'File Filter',
setDefaultTip: '',
setDefault: 'Set as Default',
eidtLinkDataPipeline: 'Edit Data Pipeline',
linkPipelineSetTip: 'Manage data pipeline linkage with this dataset',
default: 'Default',
dataPipeline: 'Data Pipeline',
linkDataPipeline: 'Link Data Pipeline',
enableAutoGenerate: 'Enable Auto Generate',
teamPlaceholder: 'Please select a team.',
dataFlowPlaceholder: 'Please select a data flow.',
dataFlowPlaceholder: 'Please select a pipeline.',
buildItFromScratch: 'Build it from scratch',
useRAPTORToEnhanceRetrieval: 'Use RAPTOR to Enhance Retrieval',
extractKnowledgeGraph: 'Extract Knowledge Graph',
dataFlow: 'Data Flow',
dataFlow: 'Pipeline',
parseType: 'Parse Type',
manualSetup: 'Manual Setup',
builtIn: 'Built-in',
@ -395,7 +420,7 @@ export default {
<p>In a Tag column, <b>comma</b> is used to separate tags.</p>
<i>Lines of texts that fail to follow the above rules will be ignored.</i>
`,
useRaptor: 'Use RAPTOR to enhance retrieval',
useRaptor: 'RAPTOR',
useRaptorTip:
'Enable RAPTOR for multi-hop question-answering tasks. See https://ragflow.io/docs/dev/enable_raptor for details.',
prompt: 'Prompt',
@ -441,7 +466,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
topnTags: 'Top-N Tags',
tags: 'Tags',
addTag: 'Add tag',
useGraphRag: 'Extract knowledge graph',
useGraphRag: 'Knowledge graph',
useGraphRagTip:
'Construct a knowledge graph over file chunks of the current knowledge base to enhance multi-hop question-answering involving nested logic. See https://ragflow.io/docs/dev/construct_knowledge_graph for details.',
graphRagMethod: 'Method',
@ -449,7 +474,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
General: Use prompts provided by github.com/microsoft/graphrag to extract entities and relationships`,
resolution: 'Entity resolution',
resolutionTip: `An entity deduplication switch. When enabled, the LLM will combine similar entities - e.g., '2025' and 'the year of 2025', or 'IT' and 'Information Technology' - to construct a more accurate graph`,
community: 'Community reports generation',
community: 'Community reports',
communityTip:
'In a knowledge graph, a community is a cluster of entities linked by relationships. You can have the LLM generate an abstract for each community, known as a community report. See here for more information: https://www.microsoft.com/en-us/research/blog/graphrag-improving-global-search-via-dynamic-community-selection/',
theDocumentBeingParsedCannotBeDeleted:
@ -1040,7 +1065,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
{input}
The above is the content you need to summarize.`,
createGraph: 'Create agent',
createFromTemplates: 'Create from templates',
createFromTemplates: 'Create from template',
retrieval: 'Retrieval',
generate: 'Generate',
answer: 'Interact',
@ -1560,6 +1585,13 @@ This delimiter is used to split the input text into several text pieces echo of
sqlStatementTip:
'Write your SQL query here. You can use variables, raw SQL, or mix both using variable syntax.',
frameworkPrompts: 'Framework',
release: 'Publish',
createFromBlank: 'Create from blank',
createFromTemplate: 'Create from template',
importJsonFile: 'Import JSON file',
ceateAgent: 'Agent flow',
createPipeline: 'Data pipeline',
chooseAgentType: 'Choose Agent Type',
},
llmTools: {
bad_calculator: {
@ -1583,6 +1615,9 @@ This delimiter is used to split the input text into several text pieces echo of
serverType: 'Server Type',
addMCP: 'Add MCP',
editMCP: 'Edit MCP',
toolsAvailable: 'tools available',
mcpServers: 'MCP Servers',
customizeTheListOfMcpServers: 'Customize the list of MCP servers',
},
search: {
searchApps: 'Search Apps',
@ -1630,14 +1665,138 @@ This delimiter is used to split the input text into several text pieces echo of
parseSummaryTip: 'Parser：deepdoc',
rerunFromCurrentStep: 'Rerun From Current Step',
rerunFromCurrentStepTip: 'Changes detected. Click to re-run.',
confirmRerun: 'Confirm Rerun Process',
confirmRerunModalContent: `
<p class="text-sm text-text-disabled font-medium mb-2">
You are about to rerun the process starting from the <strong class="text-text-primary">{{step}}</strong> step.
</p>
<p class="text-sm mb-3 text-text-secondary">This will:</p>
<ul class="list-disc list-inside space-y-1 text-sm text-text-secondary">
<li>Overwrite existing results from the current step onwards</li>
<li>Create a new log entry for tracking</li>
<li>Previous steps will remain unchanged</li>
</ul>`,
changeStepModalTitle: 'Step Switch Warning',
changeStepModalContent: `
<p>You are currently editing the results of this stage.</p>
<p>If you switch to a later stage, your changes will be lost. </p>
<p>To keep them, please click Rerun to re-run the current stage.</p> `,
changeStepModalConfirmText: 'Switch Anyway',
changeStepModalCancelText: 'Cancel',
unlinkPipelineModalTitle: 'Unlink data pipeline',
unlinkPipelineModalContent: `
<p>Once unlinked, this Dataset will no longer be connected to the current Data Pipeline.</p>
<p>Files that are already being parsed will continue until completion</p>
<p>Files that are not yet parsed will no longer be processed</p> <br/>
<p>Are you sure you want to proceed?</p> `,
unlinkPipelineModalConfirmText: 'Unlink',
},
dataflow: {
parser: 'Parser',
parserDescription: 'Parser',
chunker: 'Chunker',
chunkerDescription: 'Chunker',
parserDescription:
'Extracts raw text and structure from files for downstream processing.',
tokenizer: 'Tokenizer',
tokenizerDescription: 'Tokenizer',
tokenizerDescription:
'Transforms text into the required data structure (e.g., vector embeddings for Embedding Search) depending on the chosen search method.',
splitter: 'Token Splitter',
splitterDescription:
'Split text into chunks by token length with optional delimiters and overlap.',
hierarchicalMergerDescription:
'Split documents into sections by title hierarchy with regex rules for finer control.',
hierarchicalMerger: 'Title Splitter',
extractor: 'Context Generator',
extractorDescription:
'Use an LLM to extract structured insights from document chunks—such as summaries, classifications, etc.',
outputFormat: 'Output format',
lang: 'Language',
fileFormats: 'File formats',
fields: 'Fields',
addParser: 'Add Parser',
hierarchy: 'Hierarchy',
regularExpressions: 'Regular Expressions',
overlappedPercent: 'Overlapped percent',
searchMethod: 'Search method',
begin: 'File',
parserMethod: 'Parser method',
systemPrompt: 'System Prompt',
systemPromptPlaceholder:
'Enter system prompt for image analysis, if empty the system default value will be used',
exportJson: 'Export JSON',
viewResult: 'View Result',
running: 'Running',
summary: 'Augmented Context',
keywords: 'Keywords',
questions: 'Questions',
metadata: 'Metadata',
fieldName: 'Result Destination',
prompts: {
system: {
keywords: `Role
You are a text analyzer.
Task
Extract the most important keywords/phrases of a given piece of text content.
Requirements
- Summarize the text content, and give the top 5 important keywords/phrases.
- The keywords MUST be in the same language as the given piece of text content.
- The keywords are delimited by ENGLISH COMMA.
- Output keywords ONLY.`,
questions: `Role
You are a text analyzer.
Task
Propose 3 questions about a given piece of text content.
Requirements
- Understand and summarize the text content, and propose the top 3 important questions.
- The questions SHOULD NOT have overlapping meanings.
- The questions SHOULD cover the main content of the text as much as possible.
- The questions MUST be in the same language as the given piece of text content.
- One question per line.
- Output questions ONLY.`,
summary: `Act as a precise summarizer. Your task is to create a summary of the provided content that is both concise and faithful to the original.
Key Instructions:
1. Accuracy: Strictly base the summary on the information given. Do not introduce any new facts, conclusions, or interpretations that are not explicitly stated.
2. Language: Write the summary in the same language as the source text.
3. Objectivity: Present the key points without bias, preserving the original intent and tone of the content. Do not editorialize.
4. Conciseness: Focus on the most important ideas, omitting minor details and fluff.`,
metadata: `Extract important structured information from the given content. Output ONLY a valid JSON string with no additional text. If no important structured information is found, output an empty JSON object: {}.
Important structured information may include: names, dates, locations, events, key facts, numerical data, or other extractable entities.`,
},
user: {
keywords: `Text Content
[Insert text here]`,
questions: `Text Content
[Insert text here]`,
summary: `Text to Summarize:
[Insert text here]`,
metadata: `Content: [INSERT CONTENT HERE]`,
},
},
cancel: 'Cancel',
swicthPromptMessage:
'The prompt word will change. Please confirm whether to abandon the existing prompt word?',
tokenizerSearchMethodOptions: {
full_text: 'Full-text',
embedding: 'Embedding',
},
filenameEmbeddingWeight: 'Filename embedding weight',
tokenizerFieldsOptions: {
text: 'Text',
keywords: 'Keywords',
questions: 'Questions',
summary: 'Augmented Context',
},
},
datasetOverview: {
downloadTip: 'Files being downloaded from data sources. ',
processingTip: 'Files being processed by data flows.',
totalFiles: 'Total Files',
downloading: 'Downloading',
processing: 'Processing',
},
},
};

172
web/src/locales/zh.ts
View File

@ -94,12 +94,20 @@ export default {
noMoreData: '没有更多数据了',
},
knowledgeDetails: {
fileSize: '文件大小',
fileType: '文件类型',
uploadedBy: '创建者',
notGenerated: '未生成',
generatedOn: '生成于',
subbarFiles: '文件列表',
generate: '生成',
raptor: 'Raptor',
knowledgeGraph: '知识图谱',
processingType: '处理类型',
dataPipeline: '数据管道',
operations: '操作',
taskId: '任务ID',
duration: '耗时',
details: '详情',
status: '状态',
task: '任务',
startDate: '开始时间',
@ -111,7 +119,7 @@ export default {
success: '成功',
failed: '失败',
completed: '已完成',
processLog: '处理进度日志',
datasetLog: '知识库日志',
created: '创建于',
learnMore: '了解更多',
general: '通用',
@ -130,7 +138,7 @@ export default {
name: '名称',
namePlaceholder: '请输入名称',
doc: '文档',
datasetDescription: '😉 解析成功后才能问答哦。',
datasetDescription: '解析成功后才能问答哦。',
addFile: '新增文件',
searchFiles: '搜索文件',
localFiles: '本地文件',
@ -246,12 +254,29 @@ export default {
theDocumentBeingParsedCannotBeDeleted: '正在解析的文档不能被删除',
},
knowledgeConfiguration: {
deleteGenerateModalContent: `
<p>删除生成的 <strong class='text-text-primary'>{{type}}</strong> 结果
将从此数据集中移除所有派生实体和关系。
您的原始文件将保持不变。<p>
<br/>
是否要继续？
`,
extractRaptor: '从文档中提取Raptor',
extractKnowledgeGraph: '从文档中提取知识图谱',
filterPlaceholder: '请输入',
fileFilterTip: '',
fileFilter: '正则匹配表达式',
setDefaultTip: '',
setDefault: '设置默认',
eidtLinkDataPipeline: '编辑数据流',
linkPipelineSetTip: '管理与此数据集的数据管道链接',
default: '默认',
dataPipeline: '数据流',
linkDataPipeline: '关联数据流',
enableAutoGenerate: '是否启用自动生成',
teamPlaceholder: '请选择团队',
dataFlowPlaceholder: '请选择数据流',
buildItFromScratch: '去Scratch构建',
useRAPTORToEnhanceRetrieval: '使用 RAPTOR 提升检索效果',
extractKnowledgeGraph: '知识图谱提取',
dataFlow: '数据流',
parseType: '切片方法',
manualSetup: '手动设置',
@ -1471,6 +1496,11 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
sqlStatementTip:
'在此处编写您的 SQL 查询。您可以使用变量、原始 SQL，或使用变量语法混合使用两者。',
frameworkPrompts: '框架',
release: '发布',
createFromBlank: '从空白创建',
createFromTemplate: '从模板创建',
importJsonFile: '导入 JSON 文件',
chooseAgentType: '选择智能体类型',
},
footer: {
profile: 'All rights reserved @ React',
@ -1494,6 +1524,17 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
okText: '确认',
cancelText: '取消',
},
mcp: {
export: '导出',
import: '导入',
url: 'URL',
serverType: '服务器类型',
addMCP: '添加 MCP',
editMCP: '编辑 MCP',
toolsAvailable: '可用的工具',
mcpServers: 'MCP 服务器',
customizeTheListOfMcpServers: '自定义 MCP 服务器列表',
},
search: {
searchApps: '搜索',
createSearch: '创建查询',
@ -1540,14 +1581,127 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
parseSummaryTip: '解析器: deepdoc',
rerunFromCurrentStep: '从当前步骤重新运行',
rerunFromCurrentStepTip: '已修改，点击重新运行。',
confirmRerun: '确认重新运行流程',
confirmRerunModalContent: `
<p class="text-sm text-text-disabled font-medium mb-2">
您即将从 <strong class="text-text-primary">{{step}}</strong> 步骤开始重新运行该过程
</p>
<p class="text-sm mb-3 text-text-secondary">这将:</p>
<ul class="list-disc list-inside space-y-1 text-sm text-text-secondary">
<li>从当前步骤开始覆盖现有结果</li>
<li>创建新的日志条目进行跟踪</li>
<li>之前的步骤将保持不变</li>
</ul>`,
changeStepModalTitle: '切换步骤警告',
changeStepModalContent: `
<p>您目前正在编辑此阶段的结果。</p>
<p>如果您切换到后续阶段，您的更改将会丢失。</p>
<p>要保留这些更改，请点击“重新运行”以重新运行当前阶段。</p> `,
changeStepModalConfirmText: '继续切换',
changeStepModalCancelText: '取消',
unlinkPipelineModalTitle: '解绑数据流',
unlinkPipelineModalContent: `
<p>一旦取消链接，该数据集将不再连接到当前数据管道。</p>
<p>正在解析的文件将继续解析，直到完成。</p>
<p>尚未解析的文件将不再被处理。</p> <br/>
<p>你确定要继续吗?</p> `,
unlinkPipelineModalConfirmText: '解绑',
},
dataflow: {
parser: '解析器',
parserDescription: '解析器',
chunker: '分块器',
chunkerDescription: '分块器',
parserDescription: '从文件中提取原始文本和结构以供下游处理。',
tokenizer: '分词器',
tokenizerDescription: '分词器',
tokenizerDescription:
'根据所选的搜索方法，将文本转换为所需的数据结构（例如，用于嵌入搜索的向量嵌入）。',
splitter: '分词器拆分器',
splitterDescription:
'根据分词器长度将文本拆分成块，并带有可选的分隔符和重叠。',
hierarchicalMergerDescription:
'使用正则表达式规则按标题层次结构将文档拆分成多个部分，以实现更精细的控制。',
hierarchicalMerger: '标题拆分器',
extractor: '提取器',
extractorDescription:
'使用 LLM 从文档块（例如摘要、分类等）中提取结构化见解。',
outputFormat: '输出格式',
lang: '语言',
fileFormats: '文件格式',
fields: '字段',
addParser: '增加解析器',
hierarchy: '层次结构',
regularExpressions: '正则表达式',
overlappedPercent: '重叠百分比',
searchMethod: '搜索方法',
filenameEmbdWeight: '文件名嵌入权重',
begin: '文件',
parserMethod: '解析方法',
systemPrompt: '系统提示词',
systemPromptPlaceholder:
'请输入用于图像分析的系统提示词，若为空则使用系统缺省值',
exportJson: '导出 JSON',
viewResult: '查看结果',
running: '运行中',
summary: '增强上下文',
keywords: '关键词',
questions: '问题',
metadata: '元数据',
fieldName: '结果目的地',
prompts: {
system: {
keywords: `角色
你是一名文本分析员。
任务
从给定的文本内容中提取最重要的关键词/短语。
要求
- 总结文本内容，并给出最重要的5个关键词/短语。
- 关键词必须与给定的文本内容使用相同的语言。
- 关键词之间用英文逗号分隔。
- 仅输出关键词。`,
questions: `角色
你是一名文本分析员。
任务
针对给定的文本内容提出3个问题。
要求
- 理解并总结文本内容，并提出最重要的3个问题。
- 问题的含义不应重叠。
- 问题应尽可能涵盖文本的主要内容。
- 问题必须与给定的文本内容使用相同的语言。
- 每行一个问题。
- 仅输出问题。`,
summary: `扮演一个精准的摘要者。你的任务是为提供的内容创建一个简洁且忠实于原文的摘要。
关键说明：
1. 准确性：摘要必须严格基于所提供的信息。请勿引入任何未明确说明的新事实、结论或解释。
2. 语言：摘要必须使用与原文相同的语言。
3. 客观性：不带偏见地呈现要点，保留内容的原始意图和语气。请勿进行编辑。
4. 简洁性：专注于最重要的思想，省略细节和多余的内容。`,
metadata: `从给定内容中提取重要的结构化信息。仅输出有效的 JSON 字符串，不包含任何附加文本。如果未找到重要的结构化信息，则输出一个空的 JSON 对象：{}。
重要的结构化信息可能包括：姓名、日期、地点、事件、关键事实、数字数据或其他可提取实体。`,
},
user: {
keywords: `文本内容
[在此处插入文本]`,
questions: `文本内容
[在此处插入文本]`,
summary: `要总结的文本：
[在此处插入文本]`,
metadata: `内容：[在此处插入内容]`,
},
},
cancel: '取消',
filenameEmbeddingWeight: '文件名嵌入权重',
switchPromptMessage: '提示词将发生变化，请确认是否放弃已有提示词？',
},
datasetOverview: {
downloadTip: '正在从数据源下载文件。',
processingTip: '正在由数据流处理文件。',
totalFiles: '文件总数',
downloading: '正在下载',
processing: '正在处理',
},
},
};

6
web/src/pages/agent/canvas/edge/index.tsx
View File

@ -43,7 +43,9 @@ function InnerButtonEdge({
targetPosition,
});
const selectedStyle = useMemo(() => {
return selected ? { strokeWidth: 1, stroke: 'var(--accent-primary)' } : {};
return selected
? { strokeWidth: 1, stroke: 'rgb(var(--accent-primary))' }
: {};
}, [selected]);
const placeholderHighlightStyle = useMemo(() => {
@ -67,7 +69,7 @@ function InnerButtonEdge({
let index = idx - 1;
while (index >= 0) {
if (path[index] === source) {
return { strokeWidth: 1, stroke: 'var(--accent-primary)' };
return { strokeWidth: 1, stroke: 'rgb(var(--accent-primary))' };
}
index--;
}

24
web/src/pages/agent/constant.tsx
View File

@ -7,6 +7,7 @@ import {
AgentGlobalsSysQueryWithBrace,
CodeTemplateStrMap,
ProgrammingLanguage,
initialLlmBaseValues,
} from '@/constants/agent';
export enum AgentDialogueMode {
@ -14,13 +15,8 @@ export enum AgentDialogueMode {
Task = 'task',
}
import {
ChatVariableEnabledField,
variableEnabledFieldMap,
} from '@/constants/chat';
import { ModelVariableType } from '@/constants/knowledge';
import i18n from '@/locales/config';
import { setInitialChatVariableEnabledFieldValue } from '@/utils/chat';
import { t } from 'i18next';
// DuckDuckGo's channel options
@ -276,24 +272,6 @@ export const initialBeginValues = {
prologue: `Hi! I'm your assistant. What can I do for you?`,
};
export const variableCheckBoxFieldMap = Object.keys(
variableEnabledFieldMap,
).reduce<Record<string, boolean>>((pre, cur) => {
pre[cur] = setInitialChatVariableEnabledFieldValue(
cur as ChatVariableEnabledField,
);
return pre;
}, {});
const initialLlmBaseValues = {
...variableCheckBoxFieldMap,
temperature: 0.1,
top_p: 0.3,
frequency_penalty: 0.7,
presence_penalty: 0.4,
max_tokens: 256,
};
export const initialGenerateValues = {
...initialLlmBaseValues,
prompt: i18n.t('flow.promptText'),

2
web/src/pages/agent/debug-content/uploader.tsx
View File

@ -86,7 +86,7 @@ export function FileUploadDirectUpload({
</div>
<p className="font-medium text-sm">Drag & drop files here</p>
<p className="text-muted-foreground text-xs">
Or click to browse (max 2 files)
Or click to browse (max 1 files)
</p>
</div>
<FileUploadTrigger asChild>

4
web/src/pages/agent/form/components/prompt-editor/index.tsx
View File

@ -55,7 +55,7 @@ type IProps = {
onChange?: (value?: string) => void;
placeholder?: ReactNode;
} & PromptContentProps &
Pick<VariablePickerMenuPluginProps, 'extraOptions'>;
Pick<VariablePickerMenuPluginProps, 'extraOptions' | 'baseOptions'>;
function PromptContent({
showToolbar = true,
@ -126,6 +126,7 @@ export function PromptEditor({
showToolbar,
multiLine = true,
extraOptions,
baseOptions,
}: IProps) {
const { t } = useTranslation();
const initialConfig: InitialConfigType = {
@ -177,6 +178,7 @@ export function PromptEditor({
<VariablePickerMenuPlugin
value={value}
extraOptions={extraOptions}
baseOptions={baseOptions}
></VariablePickerMenuPlugin>
<PasteHandlerPlugin />
<VariableOnChangePlugin

67
web/src/pages/agent/form/components/prompt-editor/variable-picker-plugin.tsx
View File

@ -10,7 +10,6 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
import {
LexicalTypeaheadMenuPlugin,
MenuOption,
useBasicTypeaheadTriggerMatch,
} from '@lexical/react/LexicalTypeaheadMenuPlugin';
import {
$createParagraphNode,
@ -109,29 +108,56 @@ function VariablePickerMenuItem({
);
}
export type VariablePickerMenuOptionType = {
label: string;
title: string;
value?: string;
options: Array<{
label: string;
value: string;
icon: ReactNode;
}>;
};
export type VariablePickerMenuPluginProps = {
value?: string;
extraOptions?: Array<{
label: string;
title: string;
options: Array<{ label: string; value: string; icon?: ReactNode }>;
}>;
extraOptions?: VariablePickerMenuOptionType[];
baseOptions?: VariablePickerMenuOptionType[];
};
export default function VariablePickerMenuPlugin({
value,
extraOptions,
baseOptions,
}: VariablePickerMenuPluginProps): JSX.Element {
const [editor] = useLexicalComposerContext();
const isFirstRender = useRef(true);
const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
minLength: 0,
});
// const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
// minLength: 0,
// });
const testTriggerFn = React.useCallback((text: string) => {
const lastChar = text.slice(-1);
if (lastChar === '/') {
console.log('Found trigger character "/"');
return {
leadOffset: text.length - 1,
matchingString: '',
replaceableString: '/',
};
}
return null;
}, []);
const previousValue = useRef<string | undefined>();
const [queryString, setQueryString] = React.useState<string | null>('');
let options = useBuildQueryVariableOptions();
if (baseOptions) {
options = baseOptions as typeof options;
}
const buildNextOptions = useCallback(() => {
let filteredOptions = [...options, ...(extraOptions ?? [])];
if (queryString) {
@ -267,8 +293,8 @@ export default function VariablePickerMenuPlugin({
);
useEffect(() => {
if (editor && value && isFirstRender.current) {
isFirstRender.current = false;
if (editor && value && value !== previousValue.current) {
previousValue.current = value;
editor.update(
() => {
parseTextToVariableNodes(value);
@ -278,6 +304,21 @@ export default function VariablePickerMenuPlugin({
}
}, [parseTextToVariableNodes, editor, value]);
// Fixed the issue where the cursor would go to the end when changing its own data
useEffect(() => {
return editor.registerUpdateListener(({ editorState, tags }) => {
// If we trigger the programmatic update ourselves, we should not write back to avoid an infinite loop.
if (tags.has(ProgrammaticTag)) return;
editorState.read(() => {
const text = $getRoot().getTextContent();
if (text !== previousValue.current) {
previousValue.current = text;
}
});
});
}, [editor]);
return (
<LexicalTypeaheadMenuPlugin<VariableOption | VariableInnerOption>
onQueryChange={setQueryString}
@ -288,7 +329,7 @@ export default function VariablePickerMenuPlugin({
closeMenu,
)
}
triggerFn={checkForTriggerMatch}
triggerFn={testTriggerFn}
options={buildNextOptions()}
menuRenderFn={(anchorElementRef, { selectOptionAndCleanUp }) => {
const nextOptions = buildNextOptions();

2
web/src/pages/agent/form/iteration-form/use-build-options.ts
View File

@ -1,7 +1,7 @@
import { buildOutputOptions } from '@/utils/canvas-util';
import { isEmpty } from 'lodash';
import { useMemo } from 'react';
import { Operator } from '../../constant';
import { buildOutputOptions } from '../../hooks/use-get-begin-query';
import useGraphStore from '../../store';
export function useBuildSubNodeOutputOptions(nodeId?: string) {

80
web/src/pages/agent/hooks/use-get-begin-query.tsx
View File

@ -1,19 +1,11 @@
import { AgentGlobals } from '@/constants/agent';
import { useFetchAgent } from '@/hooks/use-agent-request';
import { RAGFlowNodeType } from '@/interfaces/database/flow';
import { Edge } from '@xyflow/react';
import { buildNodeOutputOptions } from '@/utils/canvas-util';
import { DefaultOptionType } from 'antd/es/select';
import { t } from 'i18next';
import { isEmpty } from 'lodash';
import get from 'lodash/get';
import {
ReactNode,
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from 'react';
import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import {
AgentDialogueMode,
BeginId,
@ -83,72 +75,18 @@ export const useGetBeginNodeDataQueryIsSafe = () => {
return isBeginNodeDataQuerySafe;
};
function filterAllUpstreamNodeIds(edges: Edge[], nodeIds: string[]) {
return nodeIds.reduce<string[]>((pre, nodeId) => {
const currentEdges = edges.filter((x) => x.target === nodeId);
const upstreamNodeIds: string[] = currentEdges.map((x) => x.source);
const ids = upstreamNodeIds.concat(
filterAllUpstreamNodeIds(edges, upstreamNodeIds),
);
ids.forEach((x) => {
if (pre.every((y) => y !== x)) {
pre.push(x);
}
});
return pre;
}, []);
}
export function buildOutputOptions(
outputs: Record<string, any> = {},
nodeId?: string,
parentLabel?: string | ReactNode,
icon?: ReactNode,
) {
return Object.keys(outputs).map((x) => ({
label: x,
value: `${nodeId}@${x}`,
parentLabel,
icon,
type: outputs[x]?.type,
}));
}
export function useBuildNodeOutputOptions(nodeId?: string) {
const nodes = useGraphStore((state) => state.nodes);
const edges = useGraphStore((state) => state.edges);
const nodeOutputOptions = useMemo(() => {
if (!nodeId) {
return [];
}
const upstreamIds = filterAllUpstreamNodeIds(edges, [nodeId]);
const nodeWithOutputList = nodes.filter(
(x) =>
upstreamIds.some((y) => y === x.id) && !isEmpty(x.data?.form?.outputs),
);
return nodeWithOutputList
.filter((x) => x.id !== nodeId)
.map((x) => ({
label: x.data.name,
value: x.id,
title: x.data.name,
options: buildOutputOptions(
x.data.form.outputs,
x.id,
x.data.name,
<OperatorIcon name={x.data.label as Operator} />,
),
}));
return useMemo(() => {
return buildNodeOutputOptions({
nodes,
edges,
nodeId,
Icon: ({ name }) => <OperatorIcon name={name as Operator}></OperatorIcon>,
});
}, [edges, nodeId, nodes]);
return nodeOutputOptions;
}
// exclude nodes with branches

16
web/src/pages/agent/log-sheet/workflow-timeline.tsx
View File

@ -23,7 +23,7 @@ import { ITraceData } from '@/interfaces/database/agent';
import { cn } from '@/lib/utils';
import { t } from 'i18next';
import { get, isEmpty, isEqual, uniqWith } from 'lodash';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo } from 'react';
import JsonView from 'react18-json-view';
import { Operator } from '../constant';
import { useCacheChatLog } from '../hooks/use-cache-chat-log';
@ -116,12 +116,12 @@ export const WorkFlowTimeline = ({
isShare,
}: LogFlowTimelineProps) => {
// const getNode = useGraphStore((state) => state.getNode);
const [isStopFetchTrace, setISStopFetchTrace] = useState(false);
const { data: traceData, setMessageId } = useFetchMessageTrace(
isStopFetchTrace,
canvasId,
);
const {
data: traceData,
setMessageId,
setISStopFetchTrace,
} = useFetchMessageTrace(canvasId);
useEffect(() => {
setMessageId(currentMessageId);
@ -133,7 +133,7 @@ export const WorkFlowTimeline = ({
useEffect(() => {
setISStopFetchTrace(!sendLoading);
}, [sendLoading]);
}, [sendLoading, setISStopFetchTrace]);
const startedNodeList = useMemo(() => {
const finish = currentEventListWithoutMessage?.some(
@ -151,7 +151,7 @@ export const WorkFlowTimeline = ({
}
return pre;
}, []);
}, [currentEventListWithoutMessage, sendLoading]);
}, [currentEventListWithoutMessage, sendLoading, setISStopFetchTrace]);
const getElapsedTime = (nodeId: string) => {
if (nodeId === 'begin') {

2
web/src/pages/agent/run-sheet/index.tsx
View File

@ -51,7 +51,7 @@ const RunSheet = ({
);
return (
<Sheet onOpenChange={hideModal} open>
<Sheet onOpenChange={hideModal} open modal={false}>
<SheetContent className={cn('top-20 p-2')}>
<SheetHeader>
<SheetTitle>{t('flow.testRun')}</SheetTitle>

18
web/src/pages/agents/agent-card.tsx
View File

@ -1,8 +1,11 @@
import { HomeCard } from '@/components/home-card';
import { MoreButton } from '@/components/more-button';
import { SharedBadge } from '@/components/shared-badge';
import { Button } from '@/components/ui/button';
import { AgentCategory } from '@/constants/agent';
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import { IFlow } from '@/interfaces/database/agent';
import { Route } from 'lucide-react';
import { AgentDropdown } from './agent-dropdown';
import { useRenameAgent } from './use-rename-agent';
@ -11,7 +14,7 @@ export type DatasetCardProps = {
} & Pick<ReturnType<typeof useRenameAgent>, 'showAgentRenameModal'>;
export function AgentCard({ data, showAgentRenameModal }: DatasetCardProps) {
const { navigateToAgent } = useNavigatePage();
const { navigateToAgent, navigateToDataflow } = useNavigatePage();
return (
<HomeCard
@ -22,7 +25,18 @@ export function AgentCard({ data, showAgentRenameModal }: DatasetCardProps) {
</AgentDropdown>
}
sharedBadge={<SharedBadge>{data.nickname}</SharedBadge>}
onClick={navigateToAgent(data?.id)}
onClick={
data.canvas_category === AgentCategory.DataflowCanvas
? navigateToDataflow(data.id)
: navigateToAgent(data?.id)
}
icon={
data.canvas_category === AgentCategory.DataflowCanvas && (
<Button variant={'ghost'} size={'sm'}>
<Route />
</Button>
)
}
/>
);
}

2
web/src/pages/agents/create-agent-dialog.tsx
View File

@ -22,7 +22,7 @@ export function CreateAgentDialog({
return (
<Dialog open onOpenChange={hideModal}>
<DialogContent className="sm:max-w-[425px]">
<DialogContent>
<DialogHeader>
<DialogTitle>{t('flow.createGraph')}</DialogTitle>
</DialogHeader>

13
web/src/pages/agents/create-agent-form.tsx
View File

@ -25,6 +25,7 @@ type FlowTypeCardProps = {
onChange?: (value: FlowType) => void;
};
function FlowTypeCards({ value, onChange }: FlowTypeCardProps) {
const { t } = useTranslation();
const handleChange = useCallback(
(value: FlowType) => () => {
onChange?.(value);
@ -59,7 +60,11 @@ function FlowTypeCards({ value, onChange }: FlowTypeCardProps) {
) : (
<Route className="size-6" />
)}
<p>{val}</p>
<p>
{t(
`flow.${val === FlowType.Agent ? 'createAgent' : 'createPipeline'}`,
)}
</p>
</div>
{isActive && <Check />}
</CardContent>
@ -106,7 +111,11 @@ export function CreateAgentForm({
id={TagRenameId}
>
{shouldChooseAgent && (
<RAGFlowFormItem required name="type" label={t('common.type')}>
<RAGFlowFormItem
required
name="type"
label={t('flow.chooseAgentType')}
>
<FlowTypeCards></FlowTypeCards>
</RAGFlowFormItem>
)}

98
web/src/pages/agents/hooks/use-create-agent.ts
View File

@ -1,10 +1,81 @@
import { AgentCategory } from '@/constants/agent';
import { useSetModalState } from '@/hooks/common-hooks';
import { EmptyDsl, useSetAgent } from '@/hooks/use-agent-request';
import { DSL } from '@/interfaces/database/agent';
import {
BeginId,
Operator,
initialParserValues,
} from '@/pages/data-flow/constant';
import { useCallback } from 'react';
import { FlowType } from '../constant';
import { FormSchemaType } from '../create-agent-form';
export const DataflowEmptyDsl = {
graph: {
nodes: [
{
id: BeginId,
type: 'beginNode',
position: {
x: 50,
y: 200,
},
data: {
label: Operator.Begin,
name: Operator.Begin,
},
sourcePosition: 'left',
targetPosition: 'right',
},
{
data: {
form: initialParserValues,
label: 'Parser',
name: 'Parser_0',
},
dragging: false,
id: 'Parser:HipSignsRhyme',
measured: {
height: 57,
width: 200,
},
position: {
x: 316.99524094206413,
y: 195.39629819663406,
},
selected: true,
sourcePosition: 'right',
targetPosition: 'left',
type: 'parserNode',
},
],
edges: [
{
id: 'xy-edge__Filestart-Parser:HipSignsRhymeend',
source: BeginId,
sourceHandle: 'start',
target: 'Parser:HipSignsRhyme',
targetHandle: 'end',
},
],
},
components: {
[Operator.Begin]: {
obj: {
component_name: Operator.Begin,
params: {},
},
downstream: [], // other edge target is downstream, edge source is current node id
upstream: [], // edge source is upstream, edge target is current node id
},
},
retrieval: [], // reference
history: [],
path: [],
globals: {},
};
export function useCreateAgentOrPipeline() {
const { loading, setAgent } = useSetAgent();
const {
@ -13,27 +84,26 @@ export function useCreateAgentOrPipeline() {
showModal: showCreatingModal,
} = useSetModalState();
const createAgent = useCallback(
async (name: string) => {
return setAgent({ title: name, dsl: EmptyDsl as DSL });
},
[setAgent],
);
const handleCreateAgentOrPipeline = useCallback(
async (data: FormSchemaType) => {
if (data.type === FlowType.Agent) {
const ret = await createAgent(data.name);
if (ret.code === 0) {
hideCreatingModal();
}
const isAgent = data.type === FlowType.Agent;
const ret = await setAgent({
title: data.name,
dsl: isAgent ? (EmptyDsl as DSL) : (DataflowEmptyDsl as DSL),
canvas_category: isAgent
? AgentCategory.AgentCanvas
: AgentCategory.DataflowCanvas,
});
if (ret.code === 0) {
hideCreatingModal();
}
},
[createAgent, hideCreatingModal],
[hideCreatingModal, setAgent],
);
return {
loading,
loading: loading,
creatingVisible,
hideCreatingModal,
showCreatingModal,

23
web/src/pages/agents/hooks/use-selelct-filters.ts Normal file
View File

@ -0,0 +1,23 @@
import { FilterCollection } from '@/components/list-filter-bar/interface';
import { useFetchAgentList } from '@/hooks/use-agent-request';
import { buildOwnersFilter, groupListByType } from '@/utils/list-filter-util';
import { useMemo } from 'react';
export function useSelectFilters() {
const { data } = useFetchAgentList({});
const canvasCategory = useMemo(() => {
return groupListByType(data.canvas, 'canvas_category', 'canvas_category');
}, [data.canvas]);
const filters: FilterCollection[] = [
buildOwnersFilter(data.canvas),
{
field: 'canvasCategory',
list: canvasCategory,
label: 'Canvas category',
},
];
return filters;
}

23
web/src/pages/agents/index.tsx
View File

@ -17,13 +17,21 @@ import { useCallback } from 'react';
import { AgentCard } from './agent-card';
import { CreateAgentDialog } from './create-agent-dialog';
import { useCreateAgentOrPipeline } from './hooks/use-create-agent';
import { useSelectFilters } from './hooks/use-selelct-filters';
import { UploadAgentDialog } from './upload-agent-dialog';
import { useHandleImportJsonFile } from './use-import-json';
import { useRenameAgent } from './use-rename-agent';
export default function Agents() {
const { data, pagination, setPagination, searchString, handleInputChange } =
useFetchAgentListByPage();
const {
data,
pagination,
setPagination,
searchString,
handleInputChange,
filterValue,
handleFilterSubmit,
} = useFetchAgentListByPage();
const { navigateToAgentTemplates } = useNavigatePage();
const {
@ -50,6 +58,8 @@ export default function Agents() {
hideFileUploadModal,
} = useHandleImportJsonFile();
const filters = useSelectFilters();
const handlePageChange = useCallback(
(page: number, pageSize?: number) => {
setPagination({ page, pageSize });
@ -65,6 +75,9 @@ export default function Agents() {
searchString={searchString}
onSearchChange={handleInputChange}
icon="agent"
filters={filters}
onChange={handleFilterSubmit}
value={filterValue}
>
<DropdownMenu>
<DropdownMenuTrigger>
@ -79,21 +92,21 @@ export default function Agents() {
onClick={showCreatingModal}
>
<Clipboard />
Create from Blank
{t('flow.createFromBlank')}
</DropdownMenuItem>
<DropdownMenuItem
justifyBetween={false}
onClick={navigateToAgentTemplates}
>
<ClipboardPlus />
Create from Template
{t('flow.createFromTemplate')}
</DropdownMenuItem>
<DropdownMenuItem
justifyBetween={false}
onClick={handleImportJson}
>
<FileInput />
Import json file
{t('flow.importJsonFile')}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

7
web/src/pages/agents/name-form-field.tsx
View File

@ -16,12 +16,7 @@ export const NameFormSchema = {
export function NameFormField() {
const { t } = useTranslation();
return (
<RAGFlowFormItem
name="name"
required
label={t('common.name')}
tooltip={t('flow.sqlStatementTip')}
>
<RAGFlowFormItem name="name" required label={t('common.name')}>
<Input placeholder={t('common.namePlaceholder')} autoComplete="off" />
</RAGFlowFormItem>
);

4
web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx
View File

@ -72,7 +72,7 @@ const Chunk = () => {
chunkUpdatingVisible,
documentId,
} = useUpdateChunk();
const { navigateToDataset, getQueryString, navigateToDatasetList } =
const { navigateToDataFile, getQueryString, navigateToDatasetList } =
useNavigatePage();
const fileUrl = useGetDocumentUrl();
useEffect(() => {
@ -188,7 +188,7 @@ const Chunk = () => {
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink
onClick={navigateToDataset(
onClick={navigateToDataFile(
getQueryString(QueryStringMap.id) as string,
)}
>

44
web/src/pages/data-flow/canvas/edge/index.tsx
View File

@ -11,7 +11,7 @@ import useGraphStore from '../../store';
import { useFetchAgent } from '@/hooks/use-agent-request';
import { cn } from '@/lib/utils';
import { useMemo } from 'react';
import { NodeHandleId, Operator } from '../../constant';
import { Operator } from '../../constant';
function InnerButtonEdge({
id,
@ -27,7 +27,6 @@ function InnerButtonEdge({
markerEnd,
selected,
data,
sourceHandleId,
}: EdgeProps<Edge<{ isHovered: boolean }>>) {
const deleteEdgeById = useGraphStore((state) => state.deleteEdgeById);
const [edgePath, labelX, labelY] = getBezierPath({
@ -49,47 +48,32 @@ function InnerButtonEdge({
// highlight the nodes that the workflow passes through
const { data: flowDetail } = useFetchAgent();
const graphPath = useMemo(() => {
// TODO: this will be called multiple times
const showHighlight = useMemo(() => {
const path = flowDetail?.dsl?.path ?? [];
// The second to last
const previousGraphPath: string[] = path.at(-2) ?? [];
let graphPath: string[] = path.at(-1) ?? [];
// The last of the second to last article
const previousLatestElement = previousGraphPath.at(-1);
if (previousGraphPath.length > 0 && previousLatestElement) {
graphPath = [previousLatestElement, ...graphPath];
}
return Array.isArray(graphPath) ? graphPath : [];
}, [flowDetail.dsl?.path]);
const highlightStyle = useMemo(() => {
const idx = graphPath.findIndex((x) => x === source);
const idx = path.findIndex((x) => x === target);
if (idx !== -1) {
// The set of elements following source
const slicedGraphPath = graphPath.slice(idx + 1);
if (slicedGraphPath.some((x) => x === target)) {
return { strokeWidth: 1, stroke: 'red' };
let index = idx - 1;
while (index >= 0) {
if (path[index] === source) {
return { strokeWidth: 1, stroke: 'var(--accent-primary)' };
}
index--;
}
return {};
}
return {};
}, [source, target, graphPath]);
}, [flowDetail?.dsl?.path, source, target]);
const visible = useMemo(() => {
return (
data?.isHovered &&
sourceHandleId !== NodeHandleId.Tool &&
sourceHandleId !== NodeHandleId.AgentBottom && // The connection between the agent node and the tool node does not need to display the delete button
!target.startsWith(Operator.Tool)
);
}, [data?.isHovered, sourceHandleId, target]);
return data?.isHovered && source !== Operator.Begin;
}, [data?.isHovered, source]);
return (
<>
<BaseEdge
path={edgePath}
markerEnd={markerEnd}
style={{ ...style, ...selectedStyle, ...highlightStyle }}
style={{ ...style, ...selectedStyle, ...showHighlight }}
className="text-text-secondary"
/>

75
web/src/pages/data-flow/canvas/index.tsx
View File

@ -12,6 +12,7 @@ import {
ControlButton,
Controls,
NodeTypes,
OnConnectEnd,
Position,
ReactFlow,
ReactFlowInstance,
@ -30,58 +31,34 @@ import { useBeforeDelete } from '../hooks/use-before-delete';
import { useMoveNote } from '../hooks/use-move-note';
import { useDropdownManager } from './context';
import { useRunDataflow } from '../hooks/use-run-dataflow';
import {
useHideFormSheetOnNodeDeletion,
useShowDrawer,
} from '../hooks/use-show-drawer';
import RunSheet from '../run-sheet';
import useGraphStore from '../store';
import { ButtonEdge } from './edge';
import styles from './index.less';
import { RagNode } from './node';
import { AgentNode } from './node/agent-node';
import { BeginNode } from './node/begin-node';
import { CategorizeNode } from './node/categorize-node';
import ChunkerNode from './node/chunker-node';
import { InnerNextStepDropdown } from './node/dropdown/next-step-dropdown';
import { GenerateNode } from './node/generate-node';
import { InvokeNode } from './node/invoke-node';
import { IterationNode, IterationStartNode } from './node/iteration-node';
import { KeywordNode } from './node/keyword-node';
import { LogicNode } from './node/logic-node';
import { MessageNode } from './node/message-node';
import { NextStepDropdown } from './node/dropdown/next-step-dropdown';
import { ExtractorNode } from './node/extractor-node';
import { HierarchicalMergerNode } from './node/hierarchical-merger-node';
import NoteNode from './node/note-node';
import ParserNode from './node/parser-node';
import { RelevantNode } from './node/relevant-node';
import { RetrievalNode } from './node/retrieval-node';
import { RewriteNode } from './node/rewrite-node';
import { SwitchNode } from './node/switch-node';
import { TemplateNode } from './node/template-node';
import { SplitterNode } from './node/splitter-node';
import TokenizerNode from './node/tokenizer-node';
import { ToolNode } from './node/tool-node';
export const nodeTypes: NodeTypes = {
ragNode: RagNode,
categorizeNode: CategorizeNode,
beginNode: BeginNode,
relevantNode: RelevantNode,
logicNode: LogicNode,
noteNode: NoteNode,
switchNode: SwitchNode,
generateNode: GenerateNode,
retrievalNode: RetrievalNode,
messageNode: MessageNode,
rewriteNode: RewriteNode,
keywordNode: KeywordNode,
invokeNode: InvokeNode,
templateNode: TemplateNode,
// emailNode: EmailNode,
group: IterationNode,
iterationStartNode: IterationStartNode,
agentNode: AgentNode,
toolNode: ToolNode,
parserNode: ParserNode,
chunkerNode: ChunkerNode,
tokenizerNode: TokenizerNode,
splitterNode: SplitterNode,
hierarchicalMergerNode: HierarchicalMergerNode,
contextNode: ExtractorNode,
};
const edgeTypes = {
@ -91,9 +68,10 @@ const edgeTypes = {
interface IProps {
drawerVisible: boolean;
hideDrawer(): void;
showLogSheet(): void;
}
function DataFlowCanvas({ drawerVisible, hideDrawer }: IProps) {
function DataFlowCanvas({ drawerVisible, hideDrawer, showLogSheet }: IProps) {
const { t } = useTranslation();
const {
nodes,
@ -121,7 +99,6 @@ function DataFlowCanvas({ drawerVisible, hideDrawer }: IProps) {
chatVisible,
runVisible,
hideRunOrChatDrawer,
showChatModal,
showFormDrawer,
} = useShowDrawer({
drawerVisible,
@ -141,6 +118,7 @@ function DataFlowCanvas({ drawerVisible, hideDrawer }: IProps) {
useHideFormSheetOnNodeDeletion({ hideFormDrawer });
const { visible, hideModal, showModal } = useSetModalState();
const [dropdownPosition, setDropdownPosition] = useState({ x: 0, y: 0 });
const isConnectedRef = useRef(false);
@ -153,6 +131,8 @@ function DataFlowCanvas({ drawerVisible, hideDrawer }: IProps) {
const { setActiveDropdown, clearActiveDropdown } = useDropdownManager();
const { hasChildNode } = useGraphStore((state) => state);
const onPaneClick = useCallback(() => {
hideFormDrawer();
if (visible && !preventCloseRef.current) {
@ -174,12 +154,17 @@ function DataFlowCanvas({ drawerVisible, hideDrawer }: IProps) {
clearActiveDropdown,
]);
const { run, loading: running } = useRunDataflow(
showLogSheet!,
hideRunOrChatDrawer,
);
const onConnect = (connection: Connection) => {
originalOnConnect(connection);
isConnectedRef.current = true;
};
const OnConnectStart = (event: any, params: any) => {
const onConnectStart = (event: any, params: any) => {
isConnectedRef.current = false;
if (params && params.nodeId && params.handleId) {
@ -192,7 +177,12 @@ function DataFlowCanvas({ drawerVisible, hideDrawer }: IProps) {
}
};
const OnConnectEnd = (event: MouseEvent | TouchEvent) => {
const onConnectEnd: OnConnectEnd = (event, connectionState) => {
const nodeId = connectionState.fromNode?.id;
// Events triggered by Handle are directly interrupted
if (connectionState.toNode !== null || (nodeId && hasChildNode(nodeId))) {
return;
}
if ('clientX' in event && 'clientY' in event) {
const { clientX, clientY } = event;
setDropdownPosition({ x: clientX, y: clientY });
@ -240,8 +230,8 @@ function DataFlowCanvas({ drawerVisible, hideDrawer }: IProps) {
onConnect={onConnect}
nodeTypes={nodeTypes}
edgeTypes={edgeTypes}
onConnectStart={OnConnectStart}
onConnectEnd={OnConnectEnd}
onConnectStart={onConnectStart}
onConnectEnd={onConnectEnd}
onNodeClick={onNodeClick}
onPaneClick={onPaneClick}
onInit={setReactFlowInstance}
@ -288,7 +278,7 @@ function DataFlowCanvas({ drawerVisible, hideDrawer }: IProps) {
isFromConnectionDrag: true,
}}
>
<InnerNextStepDropdown
<NextStepDropdown
hideModal={() => {
hideModal();
clearActiveDropdown();
@ -296,7 +286,7 @@ function DataFlowCanvas({ drawerVisible, hideDrawer }: IProps) {
position={dropdownPosition}
>
<span></span>
</InnerNextStepDropdown>
</NextStepDropdown>
</HandleContext.Provider>
)}
</AgentInstanceContext.Provider>
@ -322,7 +312,8 @@ function DataFlowCanvas({ drawerVisible, hideDrawer }: IProps) {
{runVisible && (
<RunSheet
hideModal={hideRunOrChatDrawer}
showModal={showChatModal}
run={run}
loading={running}
></RunSheet>
)}
</div>

116
web/src/pages/data-flow/canvas/node/agent-node.tsx
View File

@ -1,116 +0,0 @@
import LLMLabel from '@/components/llm-select/llm-label';
import { IAgentNode } from '@/interfaces/database/flow';
import { Handle, NodeProps, Position } from '@xyflow/react';
import { get } from 'lodash';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { AgentExceptionMethod, NodeHandleId } from '../../constant';
import useGraphStore from '../../store';
import { isBottomSubAgent } from '../../utils';
import { CommonHandle } from './handle';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import styles from './index.less';
import NodeHeader from './node-header';
import { NodeWrapper } from './node-wrapper';
import { ToolBar } from './toolbar';
function InnerAgentNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<IAgentNode>) {
const edges = useGraphStore((state) => state.edges);
const { t } = useTranslation();
const isHeadAgent = useMemo(() => {
return !isBottomSubAgent(edges, id);
}, [edges, id]);
const exceptionMethod = useMemo(() => {
return get(data, 'form.exception_method');
}, [data]);
const isGotoMethod = useMemo(() => {
return exceptionMethod === AgentExceptionMethod.Goto;
}, [exceptionMethod]);
return (
<ToolBar selected={selected} id={id} label={data.label}>
<NodeWrapper selected={selected}>
{isHeadAgent && (
<>
<CommonHandle
type="target"
position={Position.Left}
isConnectable={isConnectable}
style={LeftHandleStyle}
nodeId={id}
id={NodeHandleId.End}
></CommonHandle>
<CommonHandle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
style={RightHandleStyle}
nodeId={id}
id={NodeHandleId.Start}
isConnectableEnd={false}
></CommonHandle>
</>
)}
<Handle
type="target"
position={Position.Top}
isConnectable={false}
id={NodeHandleId.AgentTop}
></Handle>
<Handle
type="source"
position={Position.Bottom}
isConnectable={false}
id={NodeHandleId.AgentBottom}
style={{ left: 180 }}
></Handle>
<Handle
type="source"
position={Position.Bottom}
isConnectable={false}
id={NodeHandleId.Tool}
style={{ left: 20 }}
></Handle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
<section className="flex flex-col gap-2">
<div className={'bg-bg-card rounded-sm p-1'}>
<LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
</div>
{(isGotoMethod ||
exceptionMethod === AgentExceptionMethod.Comment) && (
<div className="bg-bg-card rounded-sm p-1 flex justify-between gap-2">
<span className="text-text-secondary">{t('flow.onFailure')}</span>
<span className="truncate flex-1 text-right">
{t(`flow.${exceptionMethod}`)}
</span>
</div>
)}
</section>
{isGotoMethod && (
<CommonHandle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className="!bg-state-error"
style={{ ...RightHandleStyle, top: 94 }}
nodeId={id}
id={NodeHandleId.AgentException}
isConnectableEnd={false}
></CommonHandle>
)}
</NodeWrapper>
</ToolBar>
);
}
export const AgentNode = memo(InnerAgentNode);

2
web/src/pages/data-flow/canvas/node/begin-node.tsx
View File

@ -36,7 +36,7 @@ function InnerBeginNode({ data, id, selected }: NodeProps<IBeginNode>) {
<section className="flex items-center gap-2">
<OperatorIcon name={data.label as Operator}></OperatorIcon>
<div className="truncate text-center font-semibold text-sm">
{t(`flow.begin`)}
{t(`dataflow.begin`)}
</div>
</section>
<section className={cn(styles.generateParameters, 'flex gap-2 flex-col')}>

62
web/src/pages/data-flow/canvas/node/categorize-node.tsx
View File

@ -1,62 +0,0 @@
import LLMLabel from '@/components/llm-select/llm-label';
import { ICategorizeNode } from '@/interfaces/database/flow';
import { NodeProps, Position } from '@xyflow/react';
import { get } from 'lodash';
import { memo } from 'react';
import { NodeHandleId } from '../../constant';
import { CommonHandle } from './handle';
import { RightHandleStyle } from './handle-icon';
import NodeHeader from './node-header';
import { NodeWrapper } from './node-wrapper';
import { ToolBar } from './toolbar';
import { useBuildCategorizeHandlePositions } from './use-build-categorize-handle-positions';
export function InnerCategorizeNode({
id,
data,
selected,
}: NodeProps<ICategorizeNode>) {
const { positions } = useBuildCategorizeHandlePositions({ data, id });
return (
<ToolBar selected={selected} id={id} label={data.label}>
<NodeWrapper selected={selected}>
<CommonHandle
type="target"
position={Position.Left}
isConnectable
id={NodeHandleId.End}
nodeId={id}
></CommonHandle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
<section className="flex flex-col gap-2">
<div className={'bg-bg-card rounded-sm px-1'}>
<LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
</div>
{positions.map((position) => {
return (
<div key={position.uuid}>
<div className={'bg-bg-card rounded-sm p-1 truncate'}>
{position.name}
</div>
<CommonHandle
// key={position.text}
id={position.uuid}
type="source"
position={Position.Right}
isConnectable
style={{ ...RightHandleStyle, top: position.top }}
nodeId={id}
isConnectableEnd={false}
></CommonHandle>
</div>
);
})}
</section>
</NodeWrapper>
</ToolBar>
);
}
export const CategorizeNode = memo(InnerCategorizeNode);

49
web/src/pages/data-flow/canvas/node/chunker-node.tsx
View File

@ -1,49 +0,0 @@
import { IRagNode } from '@/interfaces/database/flow';
import { NodeProps, Position } from '@xyflow/react';
import { memo } from 'react';
import { NodeHandleId } from '../../constant';
import { needsSingleStepDebugging } from '../../utils';
import { CommonHandle } from './handle';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import NodeHeader from './node-header';
import { NodeWrapper } from './node-wrapper';
import { ToolBar } from './toolbar';
function ChunkerNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<IRagNode>) {
return (
<ToolBar
selected={selected}
id={id}
label={data.label}
showRun={needsSingleStepDebugging(data.label)}
>
<NodeWrapper selected={selected}>
<CommonHandle
id={NodeHandleId.End}
type="target"
position={Position.Left}
isConnectable={isConnectable}
style={LeftHandleStyle}
nodeId={id}
></CommonHandle>
<CommonHandle
type="source"
position={Position.Right}
isConnectable={isConnectable}
id={NodeHandleId.Start}
style={RightHandleStyle}
nodeId={id}
isConnectableEnd={false}
></CommonHandle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
</NodeWrapper>
</ToolBar>
);
}
export default memo(ChunkerNode);

112
web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx
View File

@ -1,9 +1,3 @@
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import {
DropdownMenu,
DropdownMenuContent,
@ -18,6 +12,7 @@ import {
} from '@/components/ui/tooltip';
import { IModalProps } from '@/interfaces/common';
import { useGetNodeDescription, useGetNodeName } from '@/pages/data-flow/hooks';
import useGraphStore from '@/pages/data-flow/store';
import { Position } from '@xyflow/react';
import { t } from 'i18next';
import {
@ -26,9 +21,10 @@ import {
memo,
useContext,
useEffect,
useMemo,
useRef,
} from 'react';
import { Operator } from '../../../constant';
import { Operator, SingleOperators } from '../../../constant';
import { AgentInstanceContext, HandleContext } from '../../../context';
import OperatorIcon from '../../../operator-icon';
@ -116,6 +112,20 @@ function OperatorItemList({
return <ul className="space-y-2">{operators.map(renderOperatorItem)}</ul>;
}
// Limit the number of operators of a certain type on the canvas to only one
function useRestrictSingleOperatorOnCanvas() {
const list: Operator[] = [];
const { findNodeByName } = useGraphStore((state) => state);
SingleOperators.forEach((operator) => {
if (!findNodeByName(operator)) {
list.push(operator);
}
});
return list;
}
function AccordionOperators({
isCustomDropdown = false,
mousePosition,
@ -123,83 +133,19 @@ function AccordionOperators({
isCustomDropdown?: boolean;
mousePosition?: { x: number; y: number };
}) {
const singleOperators = useRestrictSingleOperatorOnCanvas();
const operators = useMemo(() => {
const list = [...singleOperators];
list.push(Operator.Extractor);
return list;
}, [singleOperators]);
return (
<Accordion
type="multiple"
className="px-2 text-text-title max-h-[45vh] overflow-auto"
defaultValue={['item-1', 'item-2', 'item-3', 'item-4', 'item-5']}
>
<AccordionItem value="item-1">
<AccordionTrigger className="text-xl">
{t('flow.foundation')}
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<OperatorItemList
operators={[
Operator.Agent,
Operator.Retrieval,
Operator.Parser,
Operator.Chunker,
Operator.Tokenizer,
]}
isCustomDropdown={isCustomDropdown}
mousePosition={mousePosition}
></OperatorItemList>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger className="text-xl">
{t('flow.dialog')}
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<OperatorItemList
operators={[Operator.Message, Operator.UserFillUp]}
isCustomDropdown={isCustomDropdown}
mousePosition={mousePosition}
></OperatorItemList>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger className="text-xl">
{t('flow.flow')}
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<OperatorItemList
operators={[
Operator.Switch,
Operator.Iteration,
Operator.Categorize,
]}
isCustomDropdown={isCustomDropdown}
mousePosition={mousePosition}
></OperatorItemList>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-4">
<AccordionTrigger className="text-xl">
{t('flow.dataManipulation')}
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<OperatorItemList
operators={[Operator.Code, Operator.StringTransform]}
isCustomDropdown={isCustomDropdown}
mousePosition={mousePosition}
></OperatorItemList>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-5">
<AccordionTrigger className="text-xl">
{t('flow.tools')}
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<OperatorItemList
operators={[Operator.ExeSQL, Operator.Email, Operator.Invoke]}
isCustomDropdown={isCustomDropdown}
mousePosition={mousePosition}
></OperatorItemList>
</AccordionContent>
</AccordionItem>
</Accordion>
<OperatorItemList
operators={operators}
isCustomDropdown={isCustomDropdown}
mousePosition={mousePosition}
></OperatorItemList>
);
}

80
web/src/pages/data-flow/canvas/node/email-node.tsx
View File

@ -1,80 +0,0 @@
import { IEmailNode } from '@/interfaces/database/flow';
import { Handle, NodeProps, Position } from '@xyflow/react';
import { Flex } from 'antd';
import classNames from 'classnames';
import { memo, useState } from 'react';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import styles from './index.less';
import NodeHeader from './node-header';
export function InnerEmailNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<IEmailNode>) {
const [showDetails, setShowDetails] = useState(false);
return (
<section
className={classNames(styles.ragNode, {
[styles.selectedNode]: selected,
})}
>
<Handle
id="c"
type="source"
position={Position.Left}
isConnectable={isConnectable}
className={styles.handle}
style={LeftHandleStyle}
></Handle>
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
style={RightHandleStyle}
id="b"
></Handle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
<Flex vertical gap={8} className={styles.emailNodeContainer}>
<div
className={styles.emailConfig}
onClick={() => setShowDetails(!showDetails)}
>
<div className={styles.configItem}>
<span className={styles.configLabel}>SMTP:</span>
<span className={styles.configValue}>{data.form?.smtp_server}</span>
</div>
<div className={styles.configItem}>
<span className={styles.configLabel}>Port:</span>
<span className={styles.configValue}>{data.form?.smtp_port}</span>
</div>
<div className={styles.configItem}>
<span className={styles.configLabel}>From:</span>
<span className={styles.configValue}>{data.form?.email}</span>
</div>
<div className={styles.expandIcon}>{showDetails ? '▼' : '▶'}</div>
</div>
{showDetails && (
<div className={styles.jsonExample}>
<div className={styles.jsonTitle}>Expected Input JSON:</div>
<pre className={styles.jsonContent}>
{`{
"to_email": "...",
"cc_email": "...",
"subject": "...",
"content": "..."
}`}
</pre>
</div>
)}
</Flex>
</section>
);
}
export const EmailNode = memo(InnerEmailNode);

1
web/src/pages/data-flow/canvas/node/extractor-node.tsx Normal file
View File

@ -0,0 +1 @@
export { RagNode as ExtractorNode } from './index';

60
web/src/pages/data-flow/canvas/node/generate-node.tsx
View File

@ -1,60 +0,0 @@
import LLMLabel from '@/components/llm-select/llm-label';
import { useTheme } from '@/components/theme-provider';
import { IGenerateNode } from '@/interfaces/database/flow';
import { Handle, NodeProps, Position } from '@xyflow/react';
import classNames from 'classnames';
import { get } from 'lodash';
import { memo } from 'react';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import styles from './index.less';
import NodeHeader from './node-header';
export function InnerGenerateNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<IGenerateNode>) {
const { theme } = useTheme();
return (
<section
className={classNames(
styles.logicNode,
theme === 'dark' ? styles.dark : '',
{
[styles.selectedNode]: selected,
},
)}
>
<Handle
id="c"
type="source"
position={Position.Left}
isConnectable={isConnectable}
className={styles.handle}
style={LeftHandleStyle}
></Handle>
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
style={RightHandleStyle}
id="b"
></Handle>
<NodeHeader
id={id}
name={data.name}
label={data.label}
className={styles.nodeHeader}
></NodeHeader>
<div className={styles.nodeText}>
<LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
</div>
</section>
);
}
export const GenerateNode = memo(InnerGenerateNode);

13
web/src/pages/data-flow/canvas/node/handle.tsx
View File

@ -4,8 +4,9 @@ import { Handle, HandleProps } from '@xyflow/react';
import { Plus } from 'lucide-react';
import { useMemo } from 'react';
import { HandleContext } from '../../context';
import useGraphStore from '../../store';
import { useDropdownManager } from '../context';
import { InnerNextStepDropdown } from './dropdown/next-step-dropdown';
import { NextStepDropdown } from './dropdown/next-step-dropdown';
export function CommonHandle({
className,
@ -17,6 +18,8 @@ export function CommonHandle({
const { canShowDropdown, setActiveDropdown, clearActiveDropdown } =
useDropdownManager();
const { hasChildNode } = useGraphStore((state) => state);
const value = useMemo(
() => ({
nodeId,
@ -39,6 +42,10 @@ export function CommonHandle({
onClick={(e) => {
e.stopPropagation();
if (hasChildNode(nodeId)) {
return;
}
if (!canShowDropdown()) {
return;
}
@ -49,14 +56,14 @@ export function CommonHandle({
>
<Plus className="size-3 pointer-events-none text-text-title-invert" />
{visible && (
<InnerNextStepDropdown
<NextStepDropdown
hideModal={() => {
hideModal();
clearActiveDropdown();
}}
>
<span></span>
</InnerNextStepDropdown>
</NextStepDropdown>
)}
</Handle>
</HandleContext.Provider>

1
web/src/pages/data-flow/canvas/node/hierarchical-merger-node.tsx Normal file
View File

@ -0,0 +1 @@
export { RagNode as HierarchicalMergerNode } from './index';

22
web/src/pages/data-flow/canvas/node/index.tsx
View File

@ -1,8 +1,8 @@
import { IRagNode } from '@/interfaces/database/flow';
import { NodeProps, Position } from '@xyflow/react';
import { memo } from 'react';
import { NodeHandleId } from '../../constant';
import { needsSingleStepDebugging } from '../../utils';
import { memo, useMemo } from 'react';
import { NodeHandleId, SingleOperators } from '../../constant';
import useGraphStore from '../../store';
import { CommonHandle } from './handle';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import NodeHeader from './node-header';
@ -15,13 +15,17 @@ function InnerRagNode({
isConnectable = true,
selected,
}: NodeProps<IRagNode>) {
const getOperatorTypeFromId = useGraphStore(
(state) => state.getOperatorTypeFromId,
);
const showCopy = useMemo(() => {
const operatorName = getOperatorTypeFromId(id);
return SingleOperators.every((x) => x !== operatorName);
}, [getOperatorTypeFromId, id]);
return (
<ToolBar
selected={selected}
id={id}
label={data.label}
showRun={needsSingleStepDebugging(data.label)}
>
<ToolBar selected={selected} id={id} label={data.label} showCopy={showCopy}>
<NodeWrapper selected={selected}>
<CommonHandle
id={NodeHandleId.End}

62
web/src/pages/data-flow/canvas/node/invoke-node.tsx
View File

@ -1,62 +0,0 @@
import { useTheme } from '@/components/theme-provider';
import { IInvokeNode } from '@/interfaces/database/flow';
import { Handle, NodeProps, Position } from '@xyflow/react';
import { Flex } from 'antd';
import classNames from 'classnames';
import { get } from 'lodash';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import styles from './index.less';
import NodeHeader from './node-header';
function InnerInvokeNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<IInvokeNode>) {
const { t } = useTranslation();
const { theme } = useTheme();
const url = get(data, 'form.url');
return (
<section
className={classNames(
styles.ragNode,
theme === 'dark' ? styles.dark : '',
{
[styles.selectedNode]: selected,
},
)}
>
<Handle
id="c"
type="source"
position={Position.Left}
isConnectable={isConnectable}
className={styles.handle}
style={LeftHandleStyle}
></Handle>
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
id="b"
style={RightHandleStyle}
></Handle>
<NodeHeader
id={id}
name={data.name}
label={data.label}
className={styles.nodeHeader}
></NodeHeader>
<Flex vertical>
<div>{t('flow.url')}</div>
<div className={styles.nodeText}>{url}</div>
</Flex>
</section>
);
}
export const InvokeNode = memo(InnerInvokeNode);

93
web/src/pages/data-flow/canvas/node/iteration-node.tsx
View File

@ -1,93 +0,0 @@
import {
IIterationNode,
IIterationStartNode,
} from '@/interfaces/database/flow';
import { cn } from '@/lib/utils';
import { NodeProps, NodeResizeControl, Position } from '@xyflow/react';
import { memo } from 'react';
import { NodeHandleId, Operator } from '../../constant';
import OperatorIcon from '../../operator-icon';
import { CommonHandle } from './handle';
import { RightHandleStyle } from './handle-icon';
import styles from './index.less';
import NodeHeader from './node-header';
import { NodeWrapper } from './node-wrapper';
import { ResizeIcon, controlStyle } from './resize-icon';
import { ToolBar } from './toolbar';
export function InnerIterationNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<IIterationNode>) {
return (
<ToolBar selected={selected} id={id} label={data.label} showRun={false}>
<section
className={cn('h-full bg-transparent rounded-b-md ', {
[styles.selectedHeader]: selected,
})}
>
<NodeResizeControl style={controlStyle} minWidth={100} minHeight={50}>
<ResizeIcon />
</NodeResizeControl>
<CommonHandle
id={NodeHandleId.End}
type="target"
position={Position.Left}
isConnectable={isConnectable}
className={styles.handle}
nodeId={id}
></CommonHandle>
<CommonHandle
id={NodeHandleId.Start}
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
nodeId={id}
></CommonHandle>
<NodeHeader
id={id}
name={data.name}
label={data.label}
wrapperClassName={cn(
'bg-background-header-bar p-2 rounded-t-[10px] absolute w-full top-[-44px] left-[-0.3px]',
{
[styles.selectedHeader]: selected,
},
)}
></NodeHeader>
</section>
</ToolBar>
);
}
function InnerIterationStartNode({
isConnectable = true,
id,
selected,
}: NodeProps<IIterationStartNode>) {
return (
<NodeWrapper className="w-20" selected={selected}>
<CommonHandle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
style={RightHandleStyle}
isConnectableEnd={false}
id={NodeHandleId.Start}
nodeId={id}
></CommonHandle>
<div>
<OperatorIcon name={Operator.Begin}></OperatorIcon>
</div>
</NodeWrapper>
);
}
export const IterationStartNode = memo(InnerIterationStartNode);
export const IterationNode = memo(InnerIterationNode);

60
web/src/pages/data-flow/canvas/node/keyword-node.tsx
View File

@ -1,60 +0,0 @@
import LLMLabel from '@/components/llm-select/llm-label';
import { useTheme } from '@/components/theme-provider';
import { IKeywordNode } from '@/interfaces/database/flow';
import { Handle, NodeProps, Position } from '@xyflow/react';
import classNames from 'classnames';
import { get } from 'lodash';
import { memo } from 'react';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import styles from './index.less';
import NodeHeader from './node-header';
export function InnerKeywordNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<IKeywordNode>) {
const { theme } = useTheme();
return (
<section
className={classNames(
styles.logicNode,
theme === 'dark' ? styles.dark : '',
{
[styles.selectedNode]: selected,
},
)}
>
<Handle
id="c"
type="source"
position={Position.Left}
isConnectable={isConnectable}
className={styles.handle}
style={LeftHandleStyle}
></Handle>
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
style={RightHandleStyle}
id="b"
></Handle>
<NodeHeader
id={id}
name={data.name}
label={data.label}
className={styles.nodeHeader}
></NodeHeader>
<div className={styles.nodeText}>
<LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
</div>
</section>
);
}
export const KeywordNode = memo(InnerKeywordNode);

41
web/src/pages/data-flow/canvas/node/logic-node.tsx
View File

@ -1,41 +0,0 @@
import { ILogicNode } from '@/interfaces/database/flow';
import { NodeProps, Position } from '@xyflow/react';
import { memo } from 'react';
import { CommonHandle } from './handle';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import NodeHeader from './node-header';
import { NodeWrapper } from './node-wrapper';
import { ToolBar } from './toolbar';
export function InnerLogicNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<ILogicNode>) {
return (
<ToolBar selected={selected} id={id} label={data.label}>
<NodeWrapper selected={selected}>
<CommonHandle
id="c"
type="source"
position={Position.Left}
isConnectable={isConnectable}
style={LeftHandleStyle}
nodeId={id}
></CommonHandle>
<CommonHandle
type="source"
position={Position.Right}
isConnectable={isConnectable}
style={RightHandleStyle}
id="b"
nodeId={id}
></CommonHandle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
</NodeWrapper>
</ToolBar>
);
}
export const LogicNode = memo(InnerLogicNode);

65
web/src/pages/data-flow/canvas/node/message-node.tsx
View File

@ -1,65 +0,0 @@
import { IMessageNode } from '@/interfaces/database/flow';
import { NodeProps, Position } from '@xyflow/react';
import { Flex } from 'antd';
import classNames from 'classnames';
import { get } from 'lodash';
import { memo } from 'react';
import { NodeHandleId } from '../../constant';
import { CommonHandle } from './handle';
import { LeftHandleStyle } from './handle-icon';
import styles from './index.less';
import NodeHeader from './node-header';
import { NodeWrapper } from './node-wrapper';
import { ToolBar } from './toolbar';
function InnerMessageNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<IMessageNode>) {
const messages: string[] = get(data, 'form.messages', []);
return (
<ToolBar selected={selected} id={id} label={data.label}>
<NodeWrapper selected={selected}>
<CommonHandle
type="target"
position={Position.Left}
isConnectable={isConnectable}
style={LeftHandleStyle}
nodeId={id}
id={NodeHandleId.End}
></CommonHandle>
{/* <CommonHandle
type="source"
position={Position.Right}
isConnectable={isConnectable}
style={RightHandleStyle}
id={NodeHandleId.Start}
nodeId={id}
isConnectableEnd={false}
></CommonHandle> */}
<NodeHeader
id={id}
name={data.name}
label={data.label}
className={classNames({
[styles.nodeHeader]: messages.length > 0,
})}
></NodeHeader>
<Flex vertical gap={8} className={styles.messageNodeContainer}>
{messages.map((message, idx) => {
return (
<div className={styles.nodeText} key={idx}>
{message}
</div>
);
})}
</Flex>
</NodeWrapper>
</ToolBar>
);
}
export const MessageNode = memo(InnerMessageNode);

49
web/src/pages/data-flow/canvas/node/parser-node.tsx
View File

@ -2,12 +2,10 @@ import { IRagNode } from '@/interfaces/database/flow';
import { NodeProps, Position } from '@xyflow/react';
import { memo } from 'react';
import { NodeHandleId } from '../../constant';
import { needsSingleStepDebugging } from '../../utils';
import { CommonHandle } from './handle';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import NodeHeader from './node-header';
import { NodeWrapper } from './node-wrapper';
import { ToolBar } from './toolbar';
function ParserNode({
id,
@ -16,33 +14,26 @@ function ParserNode({
selected,
}: NodeProps<IRagNode>) {
return (
<ToolBar
selected={selected}
id={id}
label={data.label}
showRun={needsSingleStepDebugging(data.label)}
>
<NodeWrapper selected={selected}>
<CommonHandle
id={NodeHandleId.End}
type="target"
position={Position.Left}
isConnectable={isConnectable}
style={LeftHandleStyle}
nodeId={id}
></CommonHandle>
<CommonHandle
type="source"
position={Position.Right}
isConnectable={isConnectable}
id={NodeHandleId.Start}
style={RightHandleStyle}
nodeId={id}
isConnectableEnd={false}
></CommonHandle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
</NodeWrapper>
</ToolBar>
<NodeWrapper selected={selected}>
<CommonHandle
id={NodeHandleId.End}
type="target"
position={Position.Left}
isConnectable={isConnectable}
style={LeftHandleStyle}
nodeId={id}
></CommonHandle>
<CommonHandle
type="source"
position={Position.Right}
isConnectable={isConnectable}
id={NodeHandleId.Start}
style={RightHandleStyle}
nodeId={id}
isConnectableEnd={false}
></CommonHandle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
</NodeWrapper>
);
}

73
web/src/pages/data-flow/canvas/node/relevant-node.tsx
View File

@ -1,73 +0,0 @@
import { Handle, NodeProps, Position } from '@xyflow/react';
import { Flex } from 'antd';
import classNames from 'classnames';
import { RightHandleStyle } from './handle-icon';
import { useTheme } from '@/components/theme-provider';
import { IRelevantNode } from '@/interfaces/database/flow';
import { get } from 'lodash';
import { memo } from 'react';
import { useReplaceIdWithName } from '../../hooks';
import styles from './index.less';
import NodeHeader from './node-header';
function InnerRelevantNode({ id, data, selected }: NodeProps<IRelevantNode>) {
const yes = get(data, 'form.yes');
const no = get(data, 'form.no');
const replaceIdWithName = useReplaceIdWithName();
const { theme } = useTheme();
return (
<section
className={classNames(
styles.logicNode,
theme === 'dark' ? styles.dark : '',
{
[styles.selectedNode]: selected,
},
)}
>
<Handle
type="target"
position={Position.Left}
isConnectable
className={styles.handle}
id={'a'}
></Handle>
<Handle
type="source"
position={Position.Right}
isConnectable
className={styles.handle}
id={'yes'}
style={{ ...RightHandleStyle, top: 57 + 20 }}
></Handle>
<Handle
type="source"
position={Position.Right}
isConnectable
className={styles.handle}
id={'no'}
style={{ ...RightHandleStyle, top: 115 + 20 }}
></Handle>
<NodeHeader
id={id}
name={data.name}
label={data.label}
className={styles.nodeHeader}
></NodeHeader>
<Flex vertical gap={10}>
<Flex vertical>
<div className={styles.relevantLabel}>Yes</div>
<div className={styles.nodeText}>{replaceIdWithName(yes)}</div>
</Flex>
<Flex vertical>
<div className={styles.relevantLabel}>No</div>
<div className={styles.nodeText}>{replaceIdWithName(no)}</div>
</Flex>
</Flex>
</section>
);
}
export const RelevantNode = memo(InnerRelevantNode);

84
web/src/pages/data-flow/canvas/node/retrieval-node.tsx
View File

@ -1,84 +0,0 @@
import { RAGFlowAvatar } from '@/components/ragflow-avatar';
import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
import { IRetrievalNode } from '@/interfaces/database/flow';
import { NodeProps, Position } from '@xyflow/react';
import classNames from 'classnames';
import { get } from 'lodash';
import { memo } from 'react';
import { NodeHandleId } from '../../constant';
import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
import { CommonHandle } from './handle';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import styles from './index.less';
import NodeHeader from './node-header';
import { NodeWrapper } from './node-wrapper';
import { ToolBar } from './toolbar';
function InnerRetrievalNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<IRetrievalNode>) {
const knowledgeBaseIds: string[] = get(data, 'form.kb_ids', []);
const { list: knowledgeList } = useFetchKnowledgeList(true);
const getLabel = useGetVariableLabelByValue(id);
return (
<ToolBar selected={selected} id={id} label={data.label}>
<NodeWrapper selected={selected}>
<CommonHandle
id={NodeHandleId.End}
type="target"
position={Position.Left}
isConnectable={isConnectable}
className={styles.handle}
style={LeftHandleStyle}
nodeId={id}
></CommonHandle>
<CommonHandle
id={NodeHandleId.Start}
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
style={RightHandleStyle}
nodeId={id}
isConnectableEnd={false}
></CommonHandle>
<NodeHeader
id={id}
name={data.name}
label={data.label}
className={classNames({
[styles.nodeHeader]: knowledgeBaseIds.length > 0,
})}
></NodeHeader>
<section className="flex flex-col gap-2">
{knowledgeBaseIds.map((id) => {
const item = knowledgeList.find((y) => id === y.id);
const label = getLabel(id);
return (
<div className={styles.nodeText} key={id}>
<div className="flex items-center gap-1.5">
<RAGFlowAvatar
className="size-6 rounded-lg"
avatar={id}
name={item?.name || (label as string) || 'CN'}
isPerson={true}
/>
<div className={'truncate flex-1'}>{label || item?.name}</div>
</div>
</div>
);
})}
</section>
</NodeWrapper>
</ToolBar>
);
}
export const RetrievalNode = memo(InnerRetrievalNode);

60
web/src/pages/data-flow/canvas/node/rewrite-node.tsx
View File

@ -1,60 +0,0 @@
import LLMLabel from '@/components/llm-select/llm-label';
import { useTheme } from '@/components/theme-provider';
import { IRewriteNode } from '@/interfaces/database/flow';
import { Handle, NodeProps, Position } from '@xyflow/react';
import classNames from 'classnames';
import { get } from 'lodash';
import { memo } from 'react';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import styles from './index.less';
import NodeHeader from './node-header';
function InnerRewriteNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<IRewriteNode>) {
const { theme } = useTheme();
return (
<section
className={classNames(
styles.logicNode,
theme === 'dark' ? styles.dark : '',
{
[styles.selectedNode]: selected,
},
)}
>
<Handle
id="c"
type="source"
position={Position.Left}
isConnectable={isConnectable}
className={styles.handle}
style={LeftHandleStyle}
></Handle>
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
style={RightHandleStyle}
id="b"
></Handle>
<NodeHeader
id={id}
name={data.name}
label={data.label}
className={styles.nodeHeader}
></NodeHeader>
<div className={styles.nodeText}>
<LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
</div>
</section>
);
}
export const RewriteNode = memo(InnerRewriteNode);

1
web/src/pages/data-flow/canvas/node/splitter-node.tsx Normal file
View File

@ -0,0 +1 @@
export { RagNode as SplitterNode } from './index';

118
web/src/pages/data-flow/canvas/node/switch-node.tsx
View File

@ -1,118 +0,0 @@
import { Card, CardContent } from '@/components/ui/card';
import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow';
import { NodeProps, Position } from '@xyflow/react';
import { memo, useCallback } from 'react';
import { NodeHandleId, SwitchOperatorOptions } from '../../constant';
import { LogicalOperatorIcon } from '../../form/switch-form';
import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
import { CommonHandle } from './handle';
import { RightHandleStyle } from './handle-icon';
import NodeHeader from './node-header';
import { NodeWrapper } from './node-wrapper';
import { ToolBar } from './toolbar';
import { useBuildSwitchHandlePositions } from './use-build-switch-handle-positions';
const getConditionKey = (idx: number, length: number) => {
if (idx === 0 && length !== 1) {
return 'If';
} else if (idx === length - 1) {
return 'Else';
}
return 'ElseIf';
};
const ConditionBlock = ({
condition,
nodeId,
}: { condition: ISwitchCondition } & { nodeId: string }) => {
const items = condition?.items ?? [];
const getLabel = useGetVariableLabelByValue(nodeId);
const renderOperatorIcon = useCallback((operator?: string) => {
const item = SwitchOperatorOptions.find((x) => x.value === operator);
if (item) {
return (
<LogicalOperatorIcon
icon={item?.icon}
value={item?.value}
></LogicalOperatorIcon>
);
}
return <></>;
}, []);
return (
<Card>
<CardContent className="p-0 divide-y divide-background-card">
{items.map((x, idx) => (
<div key={idx}>
<section className="flex justify-between gap-2 items-center text-xs p-1">
<div className="flex-1 truncate text-accent-primary">
{getLabel(x?.cpn_id)}
</div>
<span>{renderOperatorIcon(x?.operator)}</span>
<div className="flex-1 truncate">{x?.value}</div>
</section>
</div>
))}
</CardContent>
</Card>
);
};
function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
const { positions } = useBuildSwitchHandlePositions({ data, id });
return (
<ToolBar selected={selected} id={id} label={data.label} showRun={false}>
<NodeWrapper selected={selected}>
<CommonHandle
type="target"
position={Position.Left}
isConnectable
nodeId={id}
id={NodeHandleId.End}
></CommonHandle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
<section className="gap-2.5 flex flex-col">
{positions.map((position, idx) => {
return (
<div key={idx}>
<section className="flex flex-col text-xs">
<div className="text-right">
<span>{getConditionKey(idx, positions.length)}</span>
<div className="text-text-secondary">
{idx < positions.length - 1 && position.text}
</div>
</div>
<span className="text-accent-primary">
{idx < positions.length - 1 &&
position.condition?.logical_operator?.toUpperCase()}
</span>
{position.condition && (
<ConditionBlock
condition={position.condition}
nodeId={id}
></ConditionBlock>
)}
</section>
<CommonHandle
key={position.text}
id={position.text}
type="source"
position={Position.Right}
isConnectable
style={{ ...RightHandleStyle, top: position.top }}
nodeId={id}
isConnectableEnd={false}
></CommonHandle>
</div>
);
})}
</section>
</NodeWrapper>
</ToolBar>
);
}
export const SwitchNode = memo(InnerSwitchNode);

78
web/src/pages/data-flow/canvas/node/template-node.tsx
View File

@ -1,78 +0,0 @@
import { useTheme } from '@/components/theme-provider';
import { Handle, NodeProps, Position } from '@xyflow/react';
import { Flex } from 'antd';
import classNames from 'classnames';
import { get } from 'lodash';
import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query';
import { IGenerateParameter } from '../../interface';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import NodeHeader from './node-header';
import { ITemplateNode } from '@/interfaces/database/flow';
import { memo } from 'react';
import styles from './index.less';
function InnerTemplateNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<ITemplateNode>) {
const parameters: IGenerateParameter[] = get(data, 'form.parameters', []);
const getLabel = useGetComponentLabelByValue(id);
const { theme } = useTheme();
return (
<section
className={classNames(
styles.logicNode,
theme === 'dark' ? styles.dark : '',
{
[styles.selectedNode]: selected,
},
)}
>
<Handle
id="c"
type="source"
position={Position.Left}
isConnectable={isConnectable}
className={styles.handle}
style={LeftHandleStyle}
></Handle>
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
style={RightHandleStyle}
id="b"
></Handle>
<NodeHeader
id={id}
name={data.name}
label={data.label}
className={styles.nodeHeader}
></NodeHeader>
<Flex gap={8} vertical className={styles.generateParameters}>
{parameters.map((x) => (
<Flex
key={x.id}
align="center"
gap={6}
className={styles.conditionBlock}
>
<label htmlFor="">{x.key}</label>
<span className={styles.parameterValue}>
{getLabel(x.component_id)}
</span>
</Flex>
))}
</Flex>
</section>
);
}
export const TemplateNode = memo(InnerTemplateNode);

15
web/src/pages/data-flow/canvas/node/tokenizer-node.tsx
View File

@ -2,9 +2,8 @@ import { IRagNode } from '@/interfaces/database/flow';
import { NodeProps, Position } from '@xyflow/react';
import { memo } from 'react';
import { NodeHandleId } from '../../constant';
import { needsSingleStepDebugging } from '../../utils';
import { CommonHandle } from './handle';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import { LeftHandleStyle } from './handle-icon';
import NodeHeader from './node-header';
import { NodeWrapper } from './node-wrapper';
import { ToolBar } from './toolbar';
@ -20,7 +19,8 @@ function TokenizerNode({
selected={selected}
id={id}
label={data.label}
showRun={needsSingleStepDebugging(data.label)}
showRun={false}
showCopy={false}
>
<NodeWrapper selected={selected}>
<CommonHandle
@ -31,15 +31,6 @@ function TokenizerNode({
style={LeftHandleStyle}
nodeId={id}
></CommonHandle>
<CommonHandle
type="source"
position={Position.Right}
isConnectable={isConnectable}
id={NodeHandleId.Start}
style={RightHandleStyle}
nodeId={id}
isConnectableEnd={false}
></CommonHandle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
</NodeWrapper>
</ToolBar>

83
web/src/pages/data-flow/canvas/node/tool-node.tsx
View File

@ -1,83 +0,0 @@
import { IAgentForm, IToolNode } from '@/interfaces/database/agent';
import { Handle, NodeProps, Position } from '@xyflow/react';
import { get } from 'lodash';
import { MouseEventHandler, memo, useCallback } from 'react';
import { NodeHandleId, Operator } from '../../constant';
import { ToolCard } from '../../form/agent-form/agent-tools';
import { useFindMcpById } from '../../hooks/use-find-mcp-by-id';
import OperatorIcon from '../../operator-icon';
import useGraphStore from '../../store';
import { NodeWrapper } from './node-wrapper';
function InnerToolNode({
id,
isConnectable = true,
selected,
}: NodeProps<IToolNode>) {
const { edges, getNode } = useGraphStore((state) => state);
const upstreamAgentNodeId = edges.find((x) => x.target === id)?.source;
const upstreamAgentNode = getNode(upstreamAgentNodeId);
const { findMcpById } = useFindMcpById();
const handleClick = useCallback(
(operator: string): MouseEventHandler<HTMLLIElement> =>
(e) => {
if (operator === Operator.Code) {
e.preventDefault();
e.stopPropagation();
}
},
[],
);
const tools: IAgentForm['tools'] = get(
upstreamAgentNode,
'data.form.tools',
[],
);
const mcpList: IAgentForm['mcp'] = get(
upstreamAgentNode,
'data.form.mcp',
[],
);
return (
<NodeWrapper selected={selected}>
<Handle
id={NodeHandleId.End}
type="target"
position={Position.Top}
isConnectable={isConnectable}
></Handle>
<ul className="space-y-2">
{tools.map((x) => (
<ToolCard
key={x.component_name}
onClick={handleClick(x.component_name)}
className="cursor-pointer"
data-tool={x.component_name}
>
<div className="flex gap-1 items-center pointer-events-none">
<OperatorIcon name={x.component_name as Operator}></OperatorIcon>
{x.component_name}
</div>
</ToolCard>
))}
{mcpList.map((x) => (
<ToolCard
key={x.mcp_id}
onClick={handleClick(x.mcp_id)}
className="cursor-pointer"
data-tool={x.mcp_id}
>
{findMcpById(x.mcp_id)?.name}
</ToolCard>
))}
</ul>
</NodeWrapper>
);
}
export const ToolNode = memo(InnerToolNode);

27
web/src/pages/data-flow/canvas/node/toolbar.tsx
View File

@ -11,7 +11,6 @@ import {
PropsWithChildren,
useCallback,
} from 'react';
import { Operator } from '../../constant';
import { useDuplicateNode } from '../../hooks';
import useGraphStore from '../../store';
@ -28,6 +27,7 @@ type ToolBarProps = {
label: string;
id: string;
showRun?: boolean;
showCopy?: boolean;
} & PropsWithChildren;
export function ToolBar({
@ -35,23 +35,17 @@ export function ToolBar({
children,
label,
id,
showRun = true,
showRun = false,
showCopy = true,
}: ToolBarProps) {
const deleteNodeById = useGraphStore((store) => store.deleteNodeById);
const deleteIterationNodeById = useGraphStore(
(store) => store.deleteIterationNodeById,
);
const deleteNode: MouseEventHandler<HTMLDivElement> = useCallback(
(e) => {
e.stopPropagation();
if (label === Operator.Iteration) {
deleteIterationNodeById(id);
} else {
deleteNodeById(id);
}
deleteNodeById(id);
},
[deleteIterationNodeById, deleteNodeById, id, label],
[deleteNodeById, id],
);
const duplicateNode = useDuplicateNode();
@ -74,10 +68,13 @@ export function ToolBar({
<IconWrapper>
<Play className="size-3.5" data-play />
</IconWrapper>
)}{' '}
<IconWrapper onClick={handleDuplicate}>
<Copy className="size-3.5" />
</IconWrapper>
)}
{showCopy && (
<IconWrapper onClick={handleDuplicate}>
<Copy className="size-3.5" />
</IconWrapper>
)}
<IconWrapper onClick={deleteNode}>
<Trash2 className="size-3.5" />
</IconWrapper>

48
web/src/pages/data-flow/canvas/node/use-build-categorize-handle-positions.ts
View File

@ -1,48 +0,0 @@
import { RAGFlowNodeType } from '@/interfaces/database/flow';
import { useUpdateNodeInternals } from '@xyflow/react';
import { get } from 'lodash';
import { useEffect, useMemo } from 'react';
import { z } from 'zod';
import { useCreateCategorizeFormSchema } from '../../form/categorize-form/use-form-schema';
export const useBuildCategorizeHandlePositions = ({
data,
id,
}: {
id: string;
data: RAGFlowNodeType['data'];
}) => {
const updateNodeInternals = useUpdateNodeInternals();
const FormSchema = useCreateCategorizeFormSchema();
type FormSchemaType = z.infer<typeof FormSchema>;
const items: Required<FormSchemaType['items']> = useMemo(() => {
return get(data, `form.items`, []);
}, [data]);
const positions = useMemo(() => {
const list: Array<{
top: number;
name: string;
uuid: string;
}> &
Required<FormSchemaType['items']> = [];
items.forEach((x, idx) => {
list.push({
...x,
top: idx === 0 ? 86 : list[idx - 1].top + 8 + 24,
});
});
return list;
}, [items]);
useEffect(() => {
updateNodeInternals(id);
}, [id, updateNodeInternals, items]);
return { positions };
};

59
web/src/pages/data-flow/canvas/node/use-build-switch-handle-positions.ts
View File

@ -1,59 +0,0 @@
import { ISwitchCondition, RAGFlowNodeType } from '@/interfaces/database/flow';
import { useUpdateNodeInternals } from '@xyflow/react';
import get from 'lodash/get';
import { useEffect, useMemo } from 'react';
import { SwitchElseTo } from '../../constant';
import { generateSwitchHandleText } from '../../utils';
export const useBuildSwitchHandlePositions = ({
data,
id,
}: {
id: string;
data: RAGFlowNodeType['data'];
}) => {
const updateNodeInternals = useUpdateNodeInternals();
const conditions: ISwitchCondition[] = useMemo(() => {
return get(data, 'form.conditions', []);
}, [data]);
const positions = useMemo(() => {
const list: Array<{
text: string;
top: number;
idx: number;
condition?: ISwitchCondition;
}> = [];
[...conditions, ''].forEach((x, idx) => {
let top = idx === 0 ? 53 : list[idx - 1].top + 10 + 14 + 16 + 16; // case number (Case 1) height + flex gap
if (idx >= 1) {
const previousItems = conditions[idx - 1]?.items ?? [];
if (previousItems.length > 0) {
// top += 12; // ConditionBlock padding
top += previousItems.length * 26; // condition variable height
// top += (previousItems.length - 1) * 25; // operator height
}
}
list.push({
text:
idx < conditions.length
? generateSwitchHandleText(idx)
: SwitchElseTo,
idx,
top,
condition: typeof x === 'string' ? undefined : x,
});
});
return list;
}, [conditions]);
useEffect(() => {
updateNodeInternals(id);
}, [id, updateNodeInternals, conditions]);
return { positions };
};

604
web/src/pages/data-flow/constant.tsx
View File

@ -1,21 +1,10 @@
import {
initialKeywordsSimilarityWeightValue,
initialSimilarityThresholdValue,
} from '@/components/similarity-slider';
import {
AgentGlobals,
CodeTemplateStrMap,
ProgrammingLanguage,
} from '@/constants/agent';
import { ParseDocumentType } from '@/components/layout-recognize-form-field';
import { initialLlmBaseValues } from '@/constants/agent';
import {
ChatVariableEnabledField,
variableEnabledFieldMap,
} from '@/constants/chat';
import { ModelVariableType } from '@/constants/knowledge';
import i18n from '@/locales/config';
import { setInitialChatVariableEnabledFieldValue } from '@/utils/chat';
import { t } from 'i18next';
import {
Circle,
@ -28,6 +17,89 @@ import {
WrapText,
} from 'lucide-react';
export enum FileType {
PDF = 'pdf',
Spreadsheet = 'spreadsheet',
Image = 'image',
Email = 'email',
TextMarkdown = 'text&markdown',
Docx = 'word',
PowerPoint = 'slides',
Video = 'video',
Audio = 'audio',
}
export enum PdfOutputFormat {
Json = 'json',
Markdown = 'markdown',
}
export enum SpreadsheetOutputFormat {
Json = 'json',
Html = 'html',
}
export enum ImageOutputFormat {
Text = 'text',
}
export enum EmailOutputFormat {
Json = 'json',
Text = 'text',
}
export enum TextMarkdownOutputFormat {
Text = 'text',
}
export enum DocxOutputFormat {
Markdown = 'markdown',
Json = 'json',
}
export enum PptOutputFormat {
Json = 'json',
}
export enum VideoOutputFormat {
Json = 'json',
}
export enum AudioOutputFormat {
Text = 'text',
}
export const OutputFormatMap = {
[FileType.PDF]: PdfOutputFormat,
[FileType.Spreadsheet]: SpreadsheetOutputFormat,
[FileType.Image]: ImageOutputFormat,
[FileType.Email]: EmailOutputFormat,
[FileType.TextMarkdown]: TextMarkdownOutputFormat,
[FileType.Docx]: DocxOutputFormat,
[FileType.PowerPoint]: PptOutputFormat,
[FileType.Video]: VideoOutputFormat,
[FileType.Audio]: AudioOutputFormat,
};
export const InitialOutputFormatMap = {
[FileType.PDF]: PdfOutputFormat.Json,
[FileType.Spreadsheet]: SpreadsheetOutputFormat.Html,
[FileType.Image]: ImageOutputFormat.Text,
[FileType.Email]: EmailOutputFormat.Text,
[FileType.TextMarkdown]: TextMarkdownOutputFormat.Text,
[FileType.Docx]: DocxOutputFormat.Json,
[FileType.PowerPoint]: PptOutputFormat.Json,
[FileType.Video]: VideoOutputFormat.Json,
[FileType.Audio]: AudioOutputFormat.Text,
};
export enum ContextGeneratorFieldName {
Summary = 'summary',
Keywords = 'keywords',
Questions = 'questions',
Metadata = 'metadata',
}
export enum PromptRole {
User = 'user',
Assistant = 'assistant',
@ -38,34 +110,16 @@ export enum AgentDialogueMode {
Task = 'task',
}
export const BeginId = 'begin';
export const BeginId = 'File';
export enum Operator {
Begin = 'Begin',
Retrieval = 'Retrieval',
Categorize = 'Categorize',
Message = 'Message',
Relevant = 'Relevant',
RewriteQuestion = 'RewriteQuestion',
KeywordExtract = 'KeywordExtract',
ExeSQL = 'ExeSQL',
Switch = 'Switch',
Concentrator = 'Concentrator',
Begin = 'File',
Note = 'Note',
Crawler = 'Crawler',
Invoke = 'Invoke',
Email = 'Email',
Iteration = 'Iteration',
IterationStart = 'IterationItem',
Code = 'CodeExec',
WaitingDialogue = 'WaitingDialogue',
Agent = 'Agent',
Tool = 'Tool',
UserFillUp = 'UserFillUp',
StringTransform = 'StringTransform',
Parser = 'Parser',
Chunker = 'Chunker',
Tokenizer = 'Tokenizer',
Splitter = 'Splitter',
HierarchicalMerger = 'HierarchicalMerger',
Extractor = 'Extractor',
}
export const SwitchLogicOperatorOptions = ['and', 'or'];
@ -74,20 +128,6 @@ export const CommonOperatorList = Object.values(Operator).filter(
(x) => x !== Operator.Note,
);
export const AgentOperatorList = [
Operator.Retrieval,
Operator.Categorize,
Operator.Message,
Operator.RewriteQuestion,
Operator.KeywordExtract,
Operator.Switch,
Operator.Concentrator,
Operator.Iteration,
Operator.WaitingDialogue,
Operator.Note,
Operator.Agent,
];
export const SwitchOperatorOptions = [
{ value: '=', label: 'equal', icon: 'equal' },
{ value: '≠', label: 'notEqual', icon: 'not-equals' },
@ -113,38 +153,45 @@ export const SwitchOperatorOptions = [
export const SwitchElseTo = 'end_cpn_ids';
const initialQueryBaseValues = {
query: [],
};
export enum TokenizerSearchMethod {
Embedding = 'embedding',
FullText = 'full_text',
}
export const initialRetrievalValues = {
query: AgentGlobals.SysQuery,
top_n: 8,
top_k: 1024,
kb_ids: [],
rerank_id: '',
empty_response: '',
...initialSimilarityThresholdValue,
...initialKeywordsSimilarityWeightValue,
use_kg: false,
cross_languages: [],
export enum ImageParseMethod {
OCR = 'ocr',
}
export enum TokenizerFields {
Text = 'text',
Questions = 'questions',
Summary = 'summary',
}
export enum ParserFields {
From = 'from',
To = 'to',
Cc = 'cc',
Bcc = 'bcc',
Date = 'date',
Subject = 'subject',
Body = 'body',
Attachments = 'attachments',
}
export const initialBeginValues = {
outputs: {
formalized_content: {
name: {
type: 'string',
value: '',
},
json: {
type: 'Array<Object>',
value: [],
file: {
type: 'Object',
value: {},
},
},
};
export const initialBeginValues = {
mode: AgentDialogueMode.Conversational,
prologue: `Hi! I'm your assistant. What can I do for you?`,
};
export const variableCheckBoxFieldMap = Object.keys(
variableEnabledFieldMap,
).reduce<Record<string, boolean>>((pre, cur) => {
@ -154,215 +201,17 @@ export const variableCheckBoxFieldMap = Object.keys(
return pre;
}, {});
const initialLlmBaseValues = {
...variableCheckBoxFieldMap,
temperature: 0.1,
top_p: 0.3,
frequency_penalty: 0.7,
presence_penalty: 0.4,
max_tokens: 256,
};
export const initialGenerateValues = {
...initialLlmBaseValues,
prompt: i18n.t('flow.promptText'),
cite: true,
message_history_window_size: 12,
parameters: [],
};
export const initialRewriteQuestionValues = {
...initialLlmBaseValues,
language: '',
message_history_window_size: 6,
};
export const initialRelevantValues = {
...initialLlmBaseValues,
};
export const initialCategorizeValues = {
...initialLlmBaseValues,
query: AgentGlobals.SysQuery,
parameter: ModelVariableType.Precise,
message_history_window_size: 1,
items: [],
outputs: {
category_name: {
type: 'string',
},
},
};
export const initialMessageValues = {
content: [''],
};
export const initialKeywordExtractValues = {
...initialLlmBaseValues,
top_n: 3,
...initialQueryBaseValues,
};
export const initialExeSqlValues = {
sql: '',
db_type: 'mysql',
database: '',
username: '',
host: '',
port: 3306,
password: '',
max_records: 1024,
outputs: {
formalized_content: {
value: '',
type: 'string',
},
json: {
value: [],
type: 'Array<Object>',
},
},
};
export const initialSwitchValues = {
conditions: [
{
logical_operator: SwitchLogicOperatorOptions[0],
items: [
{
operator: SwitchOperatorOptions[0].value,
},
],
to: [],
},
],
[SwitchElseTo]: [],
};
export const initialConcentratorValues = {};
export const initialNoteValues = {
text: '',
};
export const initialCrawlerValues = {
extract_type: 'markdown',
query: '',
};
export const initialInvokeValues = {
url: '',
method: 'GET',
timeout: 60,
headers: `{
"Accept": "*/*",
"Cache-Control": "no-cache",
"Connection": "keep-alive"
}`,
proxy: '',
clean_html: false,
variables: [],
outputs: {
result: {
value: '',
type: 'string',
},
},
};
export const initialTemplateValues = {
content: '',
parameters: [],
};
export const initialEmailValues = {
smtp_server: '',
smtp_port: 465,
email: '',
password: '',
sender_name: '',
to_email: '',
cc_email: '',
subject: '',
content: '',
outputs: {
success: {
value: true,
type: 'boolean',
},
},
};
export const initialIterationValues = {
items_ref: '',
outputs: {},
};
export const initialIterationStartValues = {
outputs: {
item: {
type: 'unkown',
},
index: {
type: 'integer',
},
},
};
export const initialCodeValues = {
lang: ProgrammingLanguage.Python,
script: CodeTemplateStrMap[ProgrammingLanguage.Python],
arguments: {
arg1: '',
arg2: '',
},
outputs: {},
};
export const initialWaitingDialogueValues = {};
export const initialChunkerValues = { outputs: {} };
export const initialTokenizerValues = {};
export const initialAgentValues = {
...initialLlmBaseValues,
description: '',
user_prompt: '',
sys_prompt: t('flow.sysPromptDefultValue'),
prompts: [{ role: PromptRole.User, content: `{${AgentGlobals.SysQuery}}` }],
message_history_window_size: 12,
max_retries: 3,
delay_after_error: 1,
visual_files_var: '',
max_rounds: 1,
exception_method: '',
exception_goto: [],
exception_default_value: '',
tools: [],
mcp: [],
cite: true,
outputs: {
// structured_output: {
// topic: {
// type: 'string',
// description:
// 'default:general. The category of the search.news is useful for retrieving real-time updates, particularly about politics, sports, and major current events covered by mainstream media sources. general is for broader, more general-purpose searches that may include a wide range of sources.',
// enum: ['general', 'news'],
// default: 'general',
// },
// },
content: {
type: 'string',
value: '',
},
},
};
export const initialUserFillUpValues = {
enable_tips: true,
tips: '',
inputs: [],
export const initialTokenizerValues = {
search_method: [
TokenizerSearchMethod.Embedding,
TokenizerSearchMethod.FullText,
],
filename_embd_weight: 0.1,
fields: TokenizerFields.Text,
outputs: {},
};
@ -380,19 +229,84 @@ export enum StringTransformDelimiter {
Space = ' ',
}
export const initialStringTransformValues = {
method: StringTransformMethod.Merge,
split_ref: '',
script: '',
delimiters: [StringTransformDelimiter.Comma],
export const initialParserValues = {
outputs: {
result: {
type: 'string',
},
markdown: { type: 'string', value: '' },
text: { type: 'string', value: '' },
html: { type: 'string', value: '' },
json: { type: 'Array<object>', value: [] },
},
setups: [
{
fileFormat: FileType.PDF,
output_format: PdfOutputFormat.Json,
parse_method: ParseDocumentType.DeepDOC,
},
{
fileFormat: FileType.Spreadsheet,
output_format: SpreadsheetOutputFormat.Html,
},
{
fileFormat: FileType.Image,
output_format: ImageOutputFormat.Text,
parse_method: ImageParseMethod.OCR,
system_prompt: '',
},
{
fileFormat: FileType.Email,
fields: Object.values(ParserFields),
output_format: EmailOutputFormat.Text,
},
{
fileFormat: FileType.TextMarkdown,
output_format: TextMarkdownOutputFormat.Text,
},
{
fileFormat: FileType.Docx,
output_format: DocxOutputFormat.Json,
},
{
fileFormat: FileType.PowerPoint,
output_format: PptOutputFormat.Json,
},
],
};
export const initialParserValues = { outputs: {} };
export const initialSplitterValues = {
outputs: {
chunks: { type: 'Array<Object>', value: [] },
},
chunk_token_size: 512,
overlapped_percent: 0,
delimiters: [{ value: '\n' }],
};
export enum Hierarchy {
H1 = '1',
H2 = '2',
H3 = '3',
H4 = '4',
H5 = '5',
}
export const initialHierarchicalMergerValues = {
outputs: {
chunks: { type: 'Array<Object>', value: [] },
},
hierarchy: Hierarchy.H3,
levels: [
{ expressions: [{ expression: '^#[^#]' }] },
{ expressions: [{ expression: '^##[^#]' }] },
{ expressions: [{ expression: '^###[^#]' }] },
{ expressions: [{ expression: '^####[^#]' }] },
],
};
export const initialExtractorValues = {
...initialLlmBaseValues,
field_name: ContextGeneratorFieldName.Summary,
outputs: {},
};
export const CategorizeAnchorPointPositions = [
{ top: 1, right: 34 },
@ -411,72 +325,24 @@ export const CategorizeAnchorPointPositions = [
// key is the source of the edge, value is the target of the edge
// no connection lines are allowed between key and value
export const RestrictedUpstreamMap = {
[Operator.Begin]: [Operator.Relevant],
[Operator.Categorize]: [Operator.Begin, Operator.Categorize],
[Operator.Retrieval]: [Operator.Begin, Operator.Retrieval],
[Operator.Message]: [
Operator.Begin,
Operator.Message,
Operator.Retrieval,
Operator.RewriteQuestion,
Operator.Categorize,
],
[Operator.Relevant]: [Operator.Begin],
[Operator.RewriteQuestion]: [
Operator.Begin,
Operator.Message,
Operator.RewriteQuestion,
Operator.Relevant,
],
[Operator.KeywordExtract]: [
Operator.Begin,
Operator.Message,
Operator.Relevant,
],
[Operator.ExeSQL]: [Operator.Begin],
[Operator.Switch]: [Operator.Begin],
[Operator.Concentrator]: [Operator.Begin],
[Operator.Crawler]: [Operator.Begin],
[Operator.Note]: [],
[Operator.Invoke]: [Operator.Begin],
[Operator.Email]: [Operator.Begin],
[Operator.Iteration]: [Operator.Begin],
[Operator.IterationStart]: [Operator.Begin],
[Operator.Code]: [Operator.Begin],
[Operator.WaitingDialogue]: [Operator.Begin],
[Operator.Agent]: [Operator.Begin],
[Operator.StringTransform]: [Operator.Begin],
[Operator.UserFillUp]: [Operator.Begin],
[Operator.Tool]: [Operator.Begin],
export const RestrictedUpstreamMap: Record<Operator, Operator[]> = {
[Operator.Begin]: [] as Operator[],
[Operator.Parser]: [Operator.Begin],
[Operator.Splitter]: [Operator.Begin],
[Operator.HierarchicalMerger]: [Operator.Begin],
[Operator.Tokenizer]: [Operator.Begin],
[Operator.Extractor]: [Operator.Begin],
[Operator.Note]: [Operator.Begin],
};
export const NodeMap = {
[Operator.Begin]: 'beginNode',
[Operator.Categorize]: 'categorizeNode',
[Operator.Retrieval]: 'retrievalNode',
[Operator.Message]: 'messageNode',
[Operator.Relevant]: 'relevantNode',
[Operator.RewriteQuestion]: 'rewriteNode',
[Operator.KeywordExtract]: 'keywordNode',
[Operator.ExeSQL]: 'ragNode',
[Operator.Switch]: 'switchNode',
[Operator.Concentrator]: 'logicNode',
[Operator.Note]: 'noteNode',
[Operator.Crawler]: 'ragNode',
[Operator.Invoke]: 'ragNode',
[Operator.Email]: 'ragNode',
[Operator.Iteration]: 'group',
[Operator.IterationStart]: 'iterationStartNode',
[Operator.Code]: 'ragNode',
[Operator.WaitingDialogue]: 'ragNode',
[Operator.Agent]: 'agentNode',
[Operator.Tool]: 'toolNode',
[Operator.UserFillUp]: 'ragNode',
[Operator.StringTransform]: 'ragNode',
[Operator.Parser]: 'parserNode',
[Operator.Chunker]: 'chunkerNode',
[Operator.Tokenizer]: 'tokenizerNode',
[Operator.Splitter]: 'splitterNode',
[Operator.HierarchicalMerger]: 'hierarchicalMergerNode',
[Operator.Extractor]: 'contextNode',
};
export enum BeginQueryType {
@ -497,16 +363,7 @@ export const BeginQueryTypeIconMap = {
[BeginQueryType.Boolean]: ToggleLeft,
};
export const NoDebugOperatorsList = [
Operator.Begin,
Operator.Concentrator,
Operator.Message,
Operator.RewriteQuestion,
Operator.Switch,
Operator.Iteration,
Operator.UserFillUp,
Operator.IterationStart,
];
export const NoDebugOperatorsList = [Operator.Begin];
export enum NodeHandleId {
Start = 'start',
@ -527,3 +384,38 @@ export enum AgentExceptionMethod {
Comment = 'comment',
Goto = 'goto',
}
export const FileTypeSuffixMap = {
[FileType.PDF]: ['pdf'],
[FileType.Spreadsheet]: ['xls', 'xlsx', 'csv'],
[FileType.Image]: ['jpg', 'jpeg', 'png', 'gif'],
[FileType.Email]: ['eml', 'msg'],
[FileType.TextMarkdown]: ['md', 'markdown', 'mdx', 'txt'],
[FileType.Docx]: ['doc', 'docx'],
[FileType.PowerPoint]: ['pptx'],
[FileType.Video]: [],
[FileType.Audio]: [
'da',
'wave',
'wav',
'mp3',
'aac',
'flac',
'ogg',
'aiff',
'au',
'midi',
'wma',
'realaudio',
'vqf',
'oggvorbis',
'ape',
],
};
export const SingleOperators = [
Operator.Tokenizer,
Operator.Splitter,
Operator.HierarchicalMerger,
Operator.Parser,
];

8
web/src/pages/data-flow/context.ts
View File

@ -48,3 +48,11 @@ export type HandleContextType = {
export const HandleContext = createContext<HandleContextType>(
{} as HandleContextType,
);
export type LogContextType = {
messageId: string;
setMessageId: (messageId: string) => void;
setUploadedFileData: (data: Record<string, any>) => void;
};
export const LogContext = createContext<LogContextType>({} as LogContextType);

91
web/src/pages/data-flow/form-sheet/form-config-map.tsx
View File

@ -1,97 +1,30 @@
import { Operator } from '../constant';
import AgentForm from '../form/agent-form';
import BeginForm from '../form/begin-form';
import CategorizeForm from '../form/categorize-form';
import ChunkerForm from '../form/chunker-form';
import CodeForm from '../form/code-form';
import CrawlerForm from '../form/crawler-form';
import EmailForm from '../form/email-form';
import ExeSQLForm from '../form/exesql-form';
import InvokeForm from '../form/invoke-form';
import IterationForm from '../form/iteration-form';
import IterationStartForm from '../form/iteration-start-from';
import KeywordExtractForm from '../form/keyword-extract-form';
import MessageForm from '../form/message-form';
import ExtractorForm from '../form/extractor-form';
import HierarchicalMergerForm from '../form/hierarchical-merger-form';
import ParserForm from '../form/parser-form';
import RelevantForm from '../form/relevant-form';
import RetrievalForm from '../form/retrieval-form/next';
import RewriteQuestionForm from '../form/rewrite-question-form';
import StringTransformForm from '../form/string-transform-form';
import SwitchForm from '../form/switch-form';
import SplitterForm from '../form/splitter-form';
import TokenizerForm from '../form/tokenizer-form';
import UserFillUpForm from '../form/user-fill-up-form';
export const FormConfigMap = {
[Operator.Begin]: {
component: BeginForm,
},
[Operator.Retrieval]: {
component: RetrievalForm,
},
[Operator.Categorize]: {
component: CategorizeForm,
},
[Operator.Message]: {
component: MessageForm,
},
[Operator.Relevant]: {
component: RelevantForm,
},
[Operator.RewriteQuestion]: {
component: RewriteQuestionForm,
},
[Operator.Code]: {
component: CodeForm,
},
[Operator.WaitingDialogue]: {
component: CodeForm,
},
[Operator.Agent]: {
component: AgentForm,
},
[Operator.KeywordExtract]: {
component: KeywordExtractForm,
},
[Operator.ExeSQL]: {
component: ExeSQLForm,
},
[Operator.Switch]: {
component: SwitchForm,
},
[Operator.Crawler]: {
component: CrawlerForm,
},
[Operator.Invoke]: {
component: InvokeForm,
},
[Operator.Concentrator]: {
component: () => <></>,
},
[Operator.Note]: {
component: () => <></>,
},
[Operator.Email]: {
component: EmailForm,
},
[Operator.Iteration]: {
component: IterationForm,
},
[Operator.IterationStart]: {
component: IterationStartForm,
},
[Operator.UserFillUp]: {
component: UserFillUpForm,
},
[Operator.StringTransform]: {
component: StringTransformForm,
},
[Operator.Parser]: {
component: ParserForm,
},
[Operator.Chunker]: {
component: ChunkerForm,
},
[Operator.Tokenizer]: {
component: TokenizerForm,
},
[Operator.Splitter]: {
component: SplitterForm,
},
[Operator.HierarchicalMerger]: {
component: HierarchicalMergerForm,
},
[Operator.Extractor]: {
component: ExtractorForm,
},
};

Some files were not shown because too many files have changed in this diff Show More