mirror of
https://github.com/infiniflow/ragflow.git
synced 2026-02-04 09:35:06 +08:00
Compare commits
13 Commits
v0.23.1
...
5c1791d7f0
| Author | SHA1 | Date | |
|---|---|---|---|
| 5c1791d7f0 | |||
| e82617f6de | |||
| a7abc57f68 | |||
| cf1f523d03 | |||
| ccb255919a | |||
| b68c84b52e | |||
| 93cf0258c3 | |||
| b79fef1ca8 | |||
| 2b50de3186 | |||
| d8ef22db68 | |||
| 592f3b1555 | |||
| 3404469e2a | |||
| 63d7382dc9 |
File diff suppressed because one or more lines are too long
15
web/src/assets/svg/data-flow/data-icon-bri.svg
Normal file
15
web/src/assets/svg/data-flow/data-icon-bri.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
15
web/src/assets/svg/data-flow/data-icon.svg
Normal file
15
web/src/assets/svg/data-flow/data-icon.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
6
web/src/assets/svg/data-flow/processing-icon-bri.svg
Normal file
6
web/src/assets/svg/data-flow/processing-icon-bri.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
6
web/src/assets/svg/data-flow/processing-icon.svg
Normal file
6
web/src/assets/svg/data-flow/processing-icon.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 36 KiB |
6
web/src/assets/svg/data-flow/total-files-icon-bri.svg
Normal file
6
web/src/assets/svg/data-flow/total-files-icon-bri.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
6
web/src/assets/svg/data-flow/total-files-icon.svg
Normal file
6
web/src/assets/svg/data-flow/total-files-icon.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -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,7 +55,7 @@ export const CrossLanguageFormField = ({
|
||||
})}
|
||||
>
|
||||
<FormLabel tooltip={t('chat.crossLanguageTip')}>
|
||||
{t('chat.crossLanguage')}
|
||||
{label || t('chat.crossLanguage')}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<MultiSelect
|
||||
|
||||
100
web/src/components/data-pipeline-select/index.tsx
Normal file
100
web/src/components/data-pipeline-select/index.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
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 { 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';
|
||||
|
||||
interface IProps {
|
||||
toDataPipeline?: () => void;
|
||||
formFieldName: string;
|
||||
isMult?: boolean;
|
||||
}
|
||||
|
||||
const data = [
|
||||
{ id: '1', name: 'data-pipeline-1' },
|
||||
{ id: '2', name: 'data-pipeline-2' },
|
||||
{ id: '3', name: 'data-pipeline-3' },
|
||||
{ id: '4', name: 'data-pipeline-4' },
|
||||
];
|
||||
export function DataFlowSelect(props: IProps) {
|
||||
const { toDataPipeline, formFieldName, isMult = true } = props;
|
||||
const { t } = useTranslate('knowledgeConfiguration');
|
||||
const form = useFormContext();
|
||||
console.log('data-pipline form', form);
|
||||
const toDataPipLine = () => {
|
||||
toDataPipeline?.();
|
||||
};
|
||||
const { data: dataPipelineOptions, loading } = useFetchAgentList({
|
||||
canvas_category: 'dataflow_canvas',
|
||||
});
|
||||
const options = useMemo(() => {
|
||||
const option = buildSelectOptions(
|
||||
dataPipelineOptions?.canvas,
|
||||
'id',
|
||||
'title',
|
||||
);
|
||||
return option || [];
|
||||
}, [dataPipelineOptions]);
|
||||
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('dataFlow')}
|
||||
</FormLabel>
|
||||
<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>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -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">
|
||||
|
||||
@ -1,24 +1,28 @@
|
||||
// src/pages/dataset/file-logs/file-status-badge.tsx
|
||||
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: 0 | 1 | 2 | 3 | 4;
|
||||
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 3:
|
||||
return `bg-[rgba(59,160,92,0.1)] text-state-success`;
|
||||
case 'Failed':
|
||||
case 4:
|
||||
return `bg-[rgba(216,73,75,0.1)] text-state-error`;
|
||||
case 'Running':
|
||||
case 1:
|
||||
return `bg-[rgba(0,190,180,0.1)] text-accent-primary`;
|
||||
case 'Pending':
|
||||
case 0:
|
||||
return `bg-[rgba(250,173,20,0.1)] text-state-warning`;
|
||||
default:
|
||||
return 'bg-gray-500/10 text-white';
|
||||
@ -31,13 +35,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 3:
|
||||
return `bg-[rgba(59,160,92,1)] text-state-success`;
|
||||
case 'Failed':
|
||||
case 4:
|
||||
return `bg-[rgba(216,73,75,1)] text-state-error`;
|
||||
case 'Running':
|
||||
case 1:
|
||||
return `bg-[rgba(0,190,180,1)] text-accent-primary`;
|
||||
case 'Pending':
|
||||
case 0:
|
||||
return `bg-[rgba(250,173,20,1)] text-state-warning`;
|
||||
default:
|
||||
return 'bg-gray-500/10 text-white';
|
||||
@ -46,10 +50,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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
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 { useFormContext } from 'react-hook-form';
|
||||
@ -18,7 +19,13 @@ export const enum DocumentType {
|
||||
PlainText = 'Plain Text',
|
||||
}
|
||||
|
||||
export function LayoutRecognizeFormField() {
|
||||
export function LayoutRecognizeFormField({
|
||||
name = 'parser_config.layout_recognize',
|
||||
horizontal = true,
|
||||
}: {
|
||||
name?: string;
|
||||
horizontal?: boolean;
|
||||
}) {
|
||||
const form = useFormContext();
|
||||
|
||||
const { t } = useTranslate('knowledgeDetails');
|
||||
@ -53,33 +60,32 @@ export function LayoutRecognizeFormField() {
|
||||
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')}
|
||||
</FormLabel>
|
||||
<div className="w-3/4">
|
||||
<div className={horizontal ? 'w-3/4' : 'w-full'}>
|
||||
<FormControl>
|
||||
<RAGFlowSelect {...field} options={options}></RAGFlowSelect>
|
||||
</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
25
web/src/components/llm-setting-items/llm-form-field.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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'}
|
||||
|
||||
@ -45,6 +45,8 @@ export type SelectWithSearchFlagProps = {
|
||||
onChange?(value: string): void;
|
||||
triggerClassName?: string;
|
||||
allowClear?: boolean;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
};
|
||||
|
||||
export const SelectWithSearch = forwardRef<
|
||||
@ -58,6 +60,8 @@ export const SelectWithSearch = forwardRef<
|
||||
options = [],
|
||||
triggerClassName,
|
||||
allowClear = false,
|
||||
disabled = false,
|
||||
placeholder = t('common.selectPlaceholder'),
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
@ -105,6 +109,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 +120,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 && (
|
||||
|
||||
@ -62,7 +62,7 @@ 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>
|
||||
@ -125,7 +125,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 +161,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 +190,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>
|
||||
|
||||
@ -2,11 +2,10 @@ import { FormLayout } from '@/constants/form';
|
||||
import { DocumentParserType } from '@/constants/knowledge';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
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,7 +13,7 @@ import {
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '../ui/form';
|
||||
import { Input } from '../ui/input';
|
||||
import { ExpandedInput } from '../ui/input';
|
||||
import { Switch } from '../ui/switch';
|
||||
import { Textarea } from '../ui/textarea';
|
||||
|
||||
@ -93,7 +92,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')}
|
||||
@ -130,7 +129,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 +184,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>
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -187,7 +187,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>
|
||||
|
||||
|
||||
@ -57,6 +57,7 @@ export enum LlmModelType {
|
||||
export enum KnowledgeSearchParams {
|
||||
DocumentId = 'doc_id',
|
||||
KnowledgeId = 'id',
|
||||
Type = 'type',
|
||||
}
|
||||
|
||||
export enum DocumentType {
|
||||
|
||||
@ -18,7 +18,7 @@ export const useNavigatePage = () => {
|
||||
|
||||
const navigateToDataset = useCallback(
|
||||
(id: string) => () => {
|
||||
navigate(`${Routes.Dataset}/${id}`);
|
||||
navigate(`${Routes.DatasetBase}${Routes.DataSetOverview}/${id}`);
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
@ -61,6 +61,13 @@ export const useNavigatePage = () => {
|
||||
[navigate],
|
||||
);
|
||||
|
||||
const navigateToDataflow = useCallback(
|
||||
(id: string) => () => {
|
||||
navigate(`${Routes.DataFlow}/${id}`);
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
const navigateToAgentLogs = useCallback(
|
||||
(id: string) => () => {
|
||||
navigate(`${Routes.AgentLogPage}/${id}`);
|
||||
@ -87,7 +94,7 @@ export const useNavigatePage = () => {
|
||||
(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],
|
||||
@ -129,7 +136,7 @@ export const useNavigatePage = () => {
|
||||
(id: string, knowledgeId?: string) => () => {
|
||||
navigate(
|
||||
// `${Routes.ParsedResult}/${id}?${QueryStringMap.KnowledgeId}=${knowledgeId}`,
|
||||
`${Routes.DataflowResult}/${id}`,
|
||||
`${Routes.DataflowResult}?id=${knowledgeId}&doc_id=${id}&type=dataflow`,
|
||||
);
|
||||
},
|
||||
[navigate],
|
||||
@ -155,5 +162,6 @@ export const useNavigatePage = () => {
|
||||
navigateToAgentList,
|
||||
navigateToOldProfile,
|
||||
navigateToDataflowResult,
|
||||
navigateToDataflow,
|
||||
};
|
||||
};
|
||||
|
||||
@ -29,6 +29,7 @@ export const useGetKnowledgeSearchParams = () => {
|
||||
const [currentQueryParameters] = useSearchParams();
|
||||
|
||||
return {
|
||||
type: currentQueryParameters.get(KnowledgeSearchParams.Type) || '',
|
||||
documentId:
|
||||
currentQueryParameters.get(KnowledgeSearchParams.DocumentId) || '',
|
||||
knowledgeId:
|
||||
|
||||
@ -7,6 +7,7 @@ import {
|
||||
IAgentLogsResponse,
|
||||
IFlow,
|
||||
IFlowTemplate,
|
||||
IPipeLineListRequest,
|
||||
ITraceData,
|
||||
} from '@/interfaces/database/agent';
|
||||
import { IDebugSingleRequestBody } from '@/interfaces/request/agent';
|
||||
@ -16,6 +17,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';
|
||||
@ -123,7 +125,12 @@ export const useFetchAgentListByPage = () => {
|
||||
...pagination,
|
||||
},
|
||||
],
|
||||
initialData: { canvas: [], total: 0 },
|
||||
placeholderData: (previousData) => {
|
||||
if (previousData === undefined) {
|
||||
return { canvas: [], total: 0 };
|
||||
}
|
||||
return previousData;
|
||||
},
|
||||
gcTime: 0,
|
||||
queryFn: async () => {
|
||||
const { data } = await agentService.listCanvasTeam(
|
||||
@ -150,7 +157,7 @@ export const useFetchAgentListByPage = () => {
|
||||
);
|
||||
|
||||
return {
|
||||
data: data.canvas,
|
||||
data: data?.canvas ?? [],
|
||||
loading,
|
||||
searchString,
|
||||
handleInputChange: onInputChange,
|
||||
@ -271,6 +278,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) {
|
||||
@ -647,3 +655,26 @@ export const useFetchPrompt = () => {
|
||||
|
||||
return { data, loading, refetch };
|
||||
};
|
||||
|
||||
export const useFetchAgentList = ({
|
||||
canvas_category = 'agent_canvas',
|
||||
}: IPipeLineListRequest): {
|
||||
data: {
|
||||
canvas: IFlow[];
|
||||
total: number;
|
||||
};
|
||||
loading: boolean;
|
||||
} => {
|
||||
const { data, isFetching: loading } = useQuery({
|
||||
queryKey: ['fetchPipeLineList'],
|
||||
initialData: [],
|
||||
gcTime: 0,
|
||||
queryFn: async () => {
|
||||
const { data } = await fetchPipeLineList({ canvas_category });
|
||||
|
||||
return data?.data ?? [];
|
||||
},
|
||||
});
|
||||
|
||||
return { data, loading };
|
||||
};
|
||||
|
||||
91
web/src/hooks/use-dataflow-request.ts
Normal file
91
web/src/hooks/use-dataflow-request.ts
Normal 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 };
|
||||
};
|
||||
@ -236,7 +236,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;
|
||||
@ -253,10 +257,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 {};
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -74,6 +74,7 @@ export declare interface IFlow {
|
||||
permission: string;
|
||||
nickname: string;
|
||||
operator_permission: number;
|
||||
canvas_category: string;
|
||||
}
|
||||
|
||||
export interface IFlowTemplate {
|
||||
@ -265,3 +266,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?: 'agent_canvas' | 'dataflow_canvas';
|
||||
}
|
||||
|
||||
@ -261,12 +261,13 @@ export default {
|
||||
reRankModelWaring: 'Re-rank model is very time consuming.',
|
||||
},
|
||||
knowledgeConfiguration: {
|
||||
default: 'Default',
|
||||
dataPipeline: 'Data Pipeline',
|
||||
linkDataPipeline: 'Link Data Pipeline',
|
||||
enableAutoGenerate: 'Enable Auto Generate',
|
||||
teamPlaceholder: 'Please select a team.',
|
||||
dataFlowPlaceholder: 'Please select a data flow.',
|
||||
buildItFromScratch: 'Build it from scratch',
|
||||
useRAPTORToEnhanceRetrieval: 'Use RAPTOR to Enhance Retrieval',
|
||||
extractKnowledgeGraph: 'Extract Knowledge Graph',
|
||||
dataFlow: 'Data Flow',
|
||||
parseType: 'Parse Type',
|
||||
manualSetup: 'Manual Setup',
|
||||
@ -1635,6 +1636,15 @@ This delimiter is used to split the input text into several text pieces echo of
|
||||
chunkerDescription: 'Chunker',
|
||||
tokenizer: 'Tokenizer',
|
||||
tokenizerDescription: 'Tokenizer',
|
||||
splitter: 'Splitter',
|
||||
splitterDescription: 'Splitter',
|
||||
hierarchicalMergerDescription: 'Hierarchical merger',
|
||||
hierarchicalMerger: 'Hierarchical merger',
|
||||
outputFormat: 'Output format',
|
||||
lang: 'Language',
|
||||
fileFormats: 'File formats',
|
||||
fields: 'Fields',
|
||||
addParser: 'Add Parser',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -246,12 +246,13 @@ export default {
|
||||
theDocumentBeingParsedCannotBeDeleted: '正在解析的文档不能被删除',
|
||||
},
|
||||
knowledgeConfiguration: {
|
||||
default: '默认',
|
||||
dataPipeline: '数据流',
|
||||
linkDataPipeline: '关联数据流',
|
||||
enableAutoGenerate: '是否启用自动生成',
|
||||
teamPlaceholder: '请选择团队',
|
||||
dataFlowPlaceholder: '请选择数据流',
|
||||
buildItFromScratch: '去Scratch构建',
|
||||
useRAPTORToEnhanceRetrieval: '使用 RAPTOR 提升检索效果',
|
||||
extractKnowledgeGraph: '知识图谱提取',
|
||||
dataFlow: '数据流',
|
||||
parseType: '切片方法',
|
||||
manualSetup: '手动设置',
|
||||
@ -1543,6 +1544,15 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
|
||||
chunkerDescription: '分块器',
|
||||
tokenizer: '分词器',
|
||||
tokenizerDescription: '分词器',
|
||||
splitter: '拆分器',
|
||||
splitterDescription: '拆分器',
|
||||
hierarchicalMergerDesription: '分层合并',
|
||||
hierarchicalMerger: '分层合并',
|
||||
outputFormat: '输出格式',
|
||||
lang: '语言',
|
||||
fileFormats: '文件格式',
|
||||
fields: '字段',
|
||||
addParser: '增加解析器',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -946,3 +946,8 @@ export enum AgentExceptionMethod {
|
||||
Comment = 'comment',
|
||||
Goto = 'goto',
|
||||
}
|
||||
|
||||
export enum AgentCategory {
|
||||
AgentCanvas = 'agent_canvas',
|
||||
DataflowCanvas = 'dataflow_canvas',
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
|
||||
import { IFlow } from '@/interfaces/database/agent';
|
||||
import { DatabaseZap } from 'lucide-react';
|
||||
import { AgentCategory } from '../agent/constant';
|
||||
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'}>
|
||||
<DatabaseZap />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useSetModalState } from '@/hooks/common-hooks';
|
||||
import { EmptyDsl, useSetAgent } from '@/hooks/use-agent-request';
|
||||
import { DSL } from '@/interfaces/database/agent';
|
||||
import { AgentCategory } from '@/pages/agent/constant';
|
||||
import { useCallback } from 'react';
|
||||
import { FlowType } from '../constant';
|
||||
import { FormSchemaType } from '../create-agent-form';
|
||||
@ -13,27 +14,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 ret = await setAgent({
|
||||
title: data.name,
|
||||
dsl: EmptyDsl as DSL,
|
||||
canvas_category:
|
||||
data.type === FlowType.Agent
|
||||
? AgentCategory.AgentCanvas
|
||||
: AgentCategory.DataflowCanvas,
|
||||
});
|
||||
|
||||
if (ret.code === 0) {
|
||||
hideCreatingModal();
|
||||
}
|
||||
},
|
||||
[createAgent, hideCreatingModal],
|
||||
[hideCreatingModal, setAgent],
|
||||
);
|
||||
|
||||
return {
|
||||
loading,
|
||||
loading: loading,
|
||||
creatingVisible,
|
||||
hideCreatingModal,
|
||||
showCreatingModal,
|
||||
|
||||
@ -44,6 +44,7 @@ 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 { HierarchicalMergerNode } from './node/hierarchical-merger-node';
|
||||
import { InvokeNode } from './node/invoke-node';
|
||||
import { IterationNode, IterationStartNode } from './node/iteration-node';
|
||||
import { KeywordNode } from './node/keyword-node';
|
||||
@ -54,6 +55,7 @@ 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 { SplitterNode } from './node/splitter-node';
|
||||
import { SwitchNode } from './node/switch-node';
|
||||
import { TemplateNode } from './node/template-node';
|
||||
import TokenizerNode from './node/tokenizer-node';
|
||||
@ -82,6 +84,8 @@ export const nodeTypes: NodeTypes = {
|
||||
parserNode: ParserNode,
|
||||
chunkerNode: ChunkerNode,
|
||||
tokenizerNode: TokenizerNode,
|
||||
splitterNode: SplitterNode,
|
||||
hierarchicalMergerNode: HierarchicalMergerNode,
|
||||
};
|
||||
|
||||
const edgeTypes = {
|
||||
|
||||
@ -1,9 +1,3 @@
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from '@/components/ui/accordion';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@ -124,82 +118,16 @@ function AccordionOperators({
|
||||
mousePosition?: { x: number; y: number };
|
||||
}) {
|
||||
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={[
|
||||
Operator.Parser,
|
||||
Operator.Tokenizer,
|
||||
Operator.Splitter,
|
||||
Operator.HierarchicalMerger,
|
||||
]}
|
||||
isCustomDropdown={isCustomDropdown}
|
||||
mousePosition={mousePosition}
|
||||
></OperatorItemList>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1 @@
|
||||
export { RagNode as HierarchicalMergerNode } from './index';
|
||||
1
web/src/pages/data-flow/canvas/node/splitter-node.tsx
Normal file
1
web/src/pages/data-flow/canvas/node/splitter-node.tsx
Normal file
@ -0,0 +1 @@
|
||||
export { RagNode as SplitterNode } from './index';
|
||||
@ -66,6 +66,8 @@ export enum Operator {
|
||||
Parser = 'Parser',
|
||||
Chunker = 'Chunker',
|
||||
Tokenizer = 'Tokenizer',
|
||||
Splitter = 'Splitter',
|
||||
HierarchicalMerger = 'HierarchicalMerger',
|
||||
}
|
||||
|
||||
export const SwitchLogicOperatorOptions = ['and', 'or'];
|
||||
@ -74,20 +76,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' },
|
||||
@ -319,7 +307,11 @@ export const initialWaitingDialogueValues = {};
|
||||
|
||||
export const initialChunkerValues = { outputs: {} };
|
||||
|
||||
export const initialTokenizerValues = {};
|
||||
export const initialTokenizerValues = {
|
||||
search_method: [],
|
||||
filename_embd_weight: 0.1,
|
||||
outputs: {},
|
||||
};
|
||||
|
||||
export const initialAgentValues = {
|
||||
...initialLlmBaseValues,
|
||||
@ -388,7 +380,11 @@ export const initialStringTransformValues = {
|
||||
},
|
||||
};
|
||||
|
||||
export const initialParserValues = { outputs: {} };
|
||||
export const initialParserValues = { outputs: {}, parser: [] };
|
||||
|
||||
export const initialSplitterValues = { outputs: {}, chunk_token_size: 512 };
|
||||
|
||||
export const initialHierarchicalMergerValues = { outputs: {} };
|
||||
|
||||
export const CategorizeAnchorPointPositions = [
|
||||
{ top: 1, right: 34 },
|
||||
@ -409,42 +405,10 @@ export const CategorizeAnchorPointPositions = [
|
||||
// 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],
|
||||
[Operator.Parser]: [Operator.Begin],
|
||||
[Operator.Splitter]: [Operator.Begin],
|
||||
[Operator.HierarchicalMerger]: [Operator.Begin],
|
||||
[Operator.Tokenizer]: [Operator.Begin],
|
||||
};
|
||||
|
||||
export const NodeMap = {
|
||||
@ -473,6 +437,8 @@ export const NodeMap = {
|
||||
[Operator.Parser]: 'parserNode',
|
||||
[Operator.Chunker]: 'chunkerNode',
|
||||
[Operator.Tokenizer]: 'tokenizerNode',
|
||||
[Operator.Splitter]: 'splitterNode',
|
||||
[Operator.HierarchicalMerger]: 'hierarchicalMergerNode',
|
||||
};
|
||||
|
||||
export enum BeginQueryType {
|
||||
@ -523,3 +489,20 @@ export enum AgentExceptionMethod {
|
||||
Comment = 'comment',
|
||||
Goto = 'goto',
|
||||
}
|
||||
|
||||
export enum FileType {
|
||||
PDF = 'pdf',
|
||||
Spreadsheet = 'spreadsheet',
|
||||
Image = 'image',
|
||||
Email = 'email',
|
||||
TextMarkdown = 'text&markdown',
|
||||
Docx = 'docx',
|
||||
PowerPoint = 'ppt',
|
||||
Video = 'video',
|
||||
Audio = 'audio',
|
||||
}
|
||||
|
||||
export enum TokenizerSearchMethod {
|
||||
Embedding = 'embedding',
|
||||
FullText = 'full_text',
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@ 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 HierarchicalMergerForm from '../form/hierarchical-merger-form';
|
||||
import InvokeForm from '../form/invoke-form';
|
||||
import IterationForm from '../form/iteration-form';
|
||||
import IterationStartForm from '../form/iteration-start-from';
|
||||
@ -16,6 +17,7 @@ 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 SplitterForm from '../form/splitter-form';
|
||||
import StringTransformForm from '../form/string-transform-form';
|
||||
import SwitchForm from '../form/switch-form';
|
||||
import TokenizerForm from '../form/tokenizer-form';
|
||||
@ -94,4 +96,10 @@ export const FormConfigMap = {
|
||||
[Operator.Tokenizer]: {
|
||||
component: TokenizerForm,
|
||||
},
|
||||
[Operator.Splitter]: {
|
||||
component: SplitterForm,
|
||||
},
|
||||
[Operator.HierarchicalMerger]: {
|
||||
component: HierarchicalMergerForm,
|
||||
},
|
||||
};
|
||||
|
||||
160
web/src/pages/data-flow/form/hierarchical-merger-form/index.tsx
Normal file
160
web/src/pages/data-flow/form/hierarchical-merger-form/index.tsx
Normal file
@ -0,0 +1,160 @@
|
||||
import { SelectWithSearch } from '@/components/originui/select-with-search';
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import { BlockButton, Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Form } from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { X } from 'lucide-react';
|
||||
import { memo } from 'react';
|
||||
import { useFieldArray, useForm, useFormContext } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { initialHierarchicalMergerValues } from '../../constant';
|
||||
import { useFormValues } from '../../hooks/use-form-values';
|
||||
import { useWatchFormChange } from '../../hooks/use-watch-form-change';
|
||||
import { INextOperatorForm } from '../../interface';
|
||||
import { buildOutputList } from '../../utils/build-output-list';
|
||||
import { FormWrapper } from '../components/form-wrapper';
|
||||
import { Output } from '../components/output';
|
||||
|
||||
const outputList = buildOutputList(initialHierarchicalMergerValues.outputs);
|
||||
|
||||
enum Hierarchy {
|
||||
H1 = '1',
|
||||
H2 = '2',
|
||||
H3 = '3',
|
||||
H4 = '4',
|
||||
H5 = '5',
|
||||
}
|
||||
|
||||
const HierarchyOptions = [
|
||||
{ label: 'H1', value: Hierarchy.H1 },
|
||||
{ label: 'H2', value: Hierarchy.H2 },
|
||||
{ label: 'H3', value: Hierarchy.H3 },
|
||||
{ label: 'H4', value: Hierarchy.H4 },
|
||||
{ label: 'H5', value: Hierarchy.H5 },
|
||||
];
|
||||
|
||||
export const FormSchema = z.object({
|
||||
hierarchy: z.number(),
|
||||
levels: z.array(
|
||||
z.object({
|
||||
expressions: z.array(z.object({ expression: z.string() })),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
export type HierarchicalMergerFormSchemaType = z.infer<typeof FormSchema>;
|
||||
|
||||
type RegularExpressionsProps = {
|
||||
index: number;
|
||||
parentName: string;
|
||||
removeParent: (index: number) => void;
|
||||
};
|
||||
|
||||
export function RegularExpressions({
|
||||
index,
|
||||
parentName,
|
||||
removeParent,
|
||||
}: RegularExpressionsProps) {
|
||||
const form = useFormContext();
|
||||
|
||||
const name = `${parentName}.${index}.expressions`;
|
||||
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
name: name,
|
||||
control: form.control,
|
||||
});
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex-row justify-between items-center">
|
||||
<CardTitle>H{index + 1}</CardTitle>
|
||||
<Button
|
||||
type="button"
|
||||
variant={'ghost'}
|
||||
onClick={() => removeParent(index)}
|
||||
>
|
||||
<X />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<section className="space-y-4">
|
||||
{fields.map((field, index) => (
|
||||
<div key={field.id} className="flex items-center gap-2">
|
||||
<div className="space-y-2 flex-1">
|
||||
<RAGFlowFormItem
|
||||
name={`${name}.${index}.expression`}
|
||||
label={'expression'}
|
||||
labelClassName="!hidden"
|
||||
>
|
||||
<Input className="!m-0"></Input>
|
||||
</RAGFlowFormItem>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant={'ghost'}
|
||||
onClick={() => remove(index)}
|
||||
>
|
||||
<X />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
<BlockButton
|
||||
onClick={() => append({ expression: '' })}
|
||||
className="mt-6"
|
||||
>
|
||||
Add
|
||||
</BlockButton>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const HierarchicalMergerForm = ({ node }: INextOperatorForm) => {
|
||||
const defaultValues = useFormValues(initialHierarchicalMergerValues, node);
|
||||
|
||||
const form = useForm<HierarchicalMergerFormSchemaType>({
|
||||
defaultValues,
|
||||
resolver: zodResolver(FormSchema),
|
||||
});
|
||||
|
||||
const name = 'levels';
|
||||
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
name: name,
|
||||
control: form.control,
|
||||
});
|
||||
|
||||
useWatchFormChange(node?.id, form);
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<FormWrapper>
|
||||
<RAGFlowFormItem name={'hierarchy'} label={'hierarchy'}>
|
||||
<SelectWithSearch options={HierarchyOptions}></SelectWithSearch>
|
||||
</RAGFlowFormItem>
|
||||
{fields.map((field, index) => (
|
||||
<div key={field.id} className="flex items-center gap-2">
|
||||
<div className="space-y-2 flex-1">
|
||||
<RegularExpressions
|
||||
parentName={name}
|
||||
index={index}
|
||||
removeParent={remove}
|
||||
></RegularExpressions>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<BlockButton onClick={() => append({ expressions: [] })}>
|
||||
Add
|
||||
</BlockButton>
|
||||
</FormWrapper>
|
||||
<div className="p-5">
|
||||
<Output list={outputList}></Output>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(HierarchicalMergerForm);
|
||||
@ -0,0 +1,69 @@
|
||||
import { LayoutRecognizeFormField } from '@/components/layout-recognize-form-field';
|
||||
import { LLMFormField } from '@/components/llm-setting-items/llm-form-field';
|
||||
import {
|
||||
SelectWithSearch,
|
||||
SelectWithSearchFlagOptionType,
|
||||
} from '@/components/originui/select-with-search';
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import { buildOptions } from '@/utils/form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FileType } from '../../constant';
|
||||
import { OutputFormatMap } from './constant';
|
||||
import { CommonProps } from './interface';
|
||||
import { buildFieldNameWithPrefix } from './utils';
|
||||
|
||||
function buildOutputOptionsFormatMap() {
|
||||
return Object.entries(OutputFormatMap).reduce<
|
||||
Record<string, SelectWithSearchFlagOptionType[]>
|
||||
>((pre, [key, value]) => {
|
||||
pre[key] = buildOptions(value);
|
||||
return pre;
|
||||
}, {});
|
||||
}
|
||||
|
||||
export type OutputFormatFormFieldProps = CommonProps & {
|
||||
fileType: FileType;
|
||||
};
|
||||
|
||||
export function OutputFormatFormField({
|
||||
prefix,
|
||||
fileType,
|
||||
}: OutputFormatFormFieldProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<RAGFlowFormItem
|
||||
name={buildFieldNameWithPrefix(`output_format`, prefix)}
|
||||
label={t('dataflow.outputFormat')}
|
||||
>
|
||||
<SelectWithSearch
|
||||
options={buildOutputOptionsFormatMap()[fileType]}
|
||||
></SelectWithSearch>
|
||||
</RAGFlowFormItem>
|
||||
);
|
||||
}
|
||||
|
||||
export function ParserMethodFormField({ prefix }: CommonProps) {
|
||||
return (
|
||||
<LayoutRecognizeFormField
|
||||
name={buildFieldNameWithPrefix(`parse_method`, prefix)}
|
||||
horizontal={false}
|
||||
></LayoutRecognizeFormField>
|
||||
);
|
||||
|
||||
return (
|
||||
<RAGFlowFormItem
|
||||
name={buildFieldNameWithPrefix(`parse_method`, prefix)}
|
||||
label="parse_method"
|
||||
>
|
||||
<SelectWithSearch options={[]}></SelectWithSearch>
|
||||
</RAGFlowFormItem>
|
||||
);
|
||||
}
|
||||
|
||||
export function LargeModelFormField({ prefix }: CommonProps) {
|
||||
return (
|
||||
<LLMFormField
|
||||
name={buildFieldNameWithPrefix('llm_id', prefix)}
|
||||
></LLMFormField>
|
||||
);
|
||||
}
|
||||
52
web/src/pages/data-flow/form/parser-form/constant.ts
Normal file
52
web/src/pages/data-flow/form/parser-form/constant.ts
Normal file
@ -0,0 +1,52 @@
|
||||
import { FileType } from '../../constant';
|
||||
|
||||
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',
|
||||
}
|
||||
|
||||
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,
|
||||
};
|
||||
@ -0,0 +1,37 @@
|
||||
import { SelectWithSearch } from '@/components/originui/select-with-search';
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import { buildOptions } from '@/utils/form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FileType } from '../../constant';
|
||||
import { OutputFormatFormField } from './common-form-fields';
|
||||
import { CommonProps } from './interface';
|
||||
import { buildFieldNameWithPrefix } from './utils';
|
||||
|
||||
const options = buildOptions([
|
||||
'from',
|
||||
'to',
|
||||
'cc',
|
||||
'bcc',
|
||||
'date',
|
||||
'subject',
|
||||
'body',
|
||||
'attachments',
|
||||
]);
|
||||
|
||||
export function EmailFormFields({ prefix }: CommonProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<RAGFlowFormItem
|
||||
name={buildFieldNameWithPrefix(`fields`, prefix)}
|
||||
label={t('dataflow.fields')}
|
||||
>
|
||||
<SelectWithSearch options={options}></SelectWithSearch>
|
||||
</RAGFlowFormItem>
|
||||
<OutputFormatFormField
|
||||
prefix={prefix}
|
||||
fileType={FileType.Email}
|
||||
></OutputFormatFormField>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import { FileType } from '../../constant';
|
||||
import {
|
||||
LargeModelFormField,
|
||||
OutputFormatFormField,
|
||||
ParserMethodFormField,
|
||||
} from './common-form-fields';
|
||||
import { CommonProps } from './interface';
|
||||
|
||||
export function ImageFormFields({ prefix }: CommonProps) {
|
||||
return (
|
||||
<>
|
||||
<ParserMethodFormField prefix={prefix}></ParserMethodFormField>
|
||||
{/* Multimodal Model */}
|
||||
<LargeModelFormField prefix={prefix}></LargeModelFormField>
|
||||
<OutputFormatFormField
|
||||
prefix={prefix}
|
||||
fileType={FileType.Image}
|
||||
></OutputFormatFormField>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,135 +1,172 @@
|
||||
import { FormContainer } from '@/components/form-container';
|
||||
import NumberInput from '@/components/originui/number-input';
|
||||
import { SelectWithSearch } from '@/components/originui/select-with-search';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import { BlockButton, Button } from '@/components/ui/button';
|
||||
import { Form } from '@/components/ui/form';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { buildOptions } from '@/utils/form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { memo } from 'react';
|
||||
import { useForm, useFormContext } from 'react-hook-form';
|
||||
import { useHover } from 'ahooks';
|
||||
import { Trash2 } from 'lucide-react';
|
||||
import { memo, useCallback, useMemo, useRef } from 'react';
|
||||
import {
|
||||
UseFieldArrayRemove,
|
||||
useFieldArray,
|
||||
useForm,
|
||||
useFormContext,
|
||||
} from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { z } from 'zod';
|
||||
import { initialParserValues } from '../../constant';
|
||||
import { FileType, initialParserValues } from '../../constant';
|
||||
import { useFormValues } from '../../hooks/use-form-values';
|
||||
import { useWatchFormChange } from '../../hooks/use-watch-form-change';
|
||||
import { INextOperatorForm } from '../../interface';
|
||||
import { GoogleCountryOptions, GoogleLanguageOptions } from '../../options';
|
||||
import { buildOutputList } from '../../utils/build-output-list';
|
||||
import { ApiKeyField } from '../components/api-key-field';
|
||||
import { FormWrapper } from '../components/form-wrapper';
|
||||
import { Output } from '../components/output';
|
||||
import { QueryVariable } from '../components/query-variable';
|
||||
import { OutputFormatFormField } from './common-form-fields';
|
||||
import { EmailFormFields } from './email-form-fields';
|
||||
import { ImageFormFields } from './image-form-fields';
|
||||
import { PdfFormFields } from './pdf-form-fields';
|
||||
import { buildFieldNameWithPrefix } from './utils';
|
||||
import { VideoFormFields } from './video-form-fields';
|
||||
|
||||
const outputList = buildOutputList(initialParserValues.outputs);
|
||||
|
||||
export const GoogleFormPartialSchema = {
|
||||
api_key: z.string(),
|
||||
country: z.string(),
|
||||
language: z.string(),
|
||||
const FileFormatOptions = buildOptions(FileType);
|
||||
|
||||
const FileFormatWidgetMap = {
|
||||
[FileType.PDF]: PdfFormFields,
|
||||
[FileType.Video]: VideoFormFields,
|
||||
[FileType.Audio]: VideoFormFields,
|
||||
[FileType.Email]: EmailFormFields,
|
||||
[FileType.Image]: ImageFormFields,
|
||||
};
|
||||
|
||||
type ParserItemProps = {
|
||||
name: string;
|
||||
index: number;
|
||||
fieldLength: number;
|
||||
remove: UseFieldArrayRemove;
|
||||
};
|
||||
|
||||
export const FormSchema = z.object({
|
||||
...GoogleFormPartialSchema,
|
||||
q: z.string(),
|
||||
start: z.number(),
|
||||
num: z.number(),
|
||||
parser: z.array(
|
||||
z.object({
|
||||
fileFormat: z.string().nullish(),
|
||||
output_format: z.string().optional(),
|
||||
parse_method: z.string().optional(),
|
||||
llm_id: z.string().optional(),
|
||||
lang: z.string().optional(),
|
||||
fields: z.array(z.string()).optional(),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
export function GoogleFormWidgets() {
|
||||
const form = useFormContext();
|
||||
const { t } = useTranslate('flow');
|
||||
export type ParserFormSchemaType = z.infer<typeof FormSchema>;
|
||||
|
||||
function ParserItem({ name, index, fieldLength, remove }: ParserItemProps) {
|
||||
const { t } = useTranslation();
|
||||
const form = useFormContext<ParserFormSchemaType>();
|
||||
const ref = useRef(null);
|
||||
const isHovering = useHover(ref);
|
||||
|
||||
const prefix = `${name}.${index}`;
|
||||
const fileFormat = form.getValues(`parser.${index}.fileFormat`);
|
||||
|
||||
const values = form.getValues();
|
||||
const parserList = values.parser.slice(); // Adding, deleting, or modifying the parser array will not change the reference.
|
||||
|
||||
const filteredFileFormatOptions = useMemo(() => {
|
||||
const otherFileFormatList = parserList
|
||||
.filter((_, idx) => idx !== index)
|
||||
.map((x) => x.fileFormat);
|
||||
|
||||
return FileFormatOptions.filter((x) => {
|
||||
return !otherFileFormatList.includes(x.value);
|
||||
});
|
||||
}, [index, parserList]);
|
||||
|
||||
const Widget =
|
||||
typeof fileFormat === 'string' && fileFormat in FileFormatWidgetMap
|
||||
? FileFormatWidgetMap[fileFormat as keyof typeof FileFormatWidgetMap]
|
||||
: OutputFormatFormField;
|
||||
return (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`country`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>{t('country')}</FormLabel>
|
||||
<FormControl>
|
||||
<SelectWithSearch
|
||||
{...field}
|
||||
options={GoogleCountryOptions}
|
||||
></SelectWithSearch>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
<section
|
||||
className={cn('space-y-5 px-5 py-2.5 rounded-md', {
|
||||
'bg-state-error-5': isHovering,
|
||||
})}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-text-primary text-sm font-medium">
|
||||
Parser {index}
|
||||
</span>
|
||||
{index > 0 && (
|
||||
<Button variant={'ghost'} onClick={() => remove(index)} ref={ref}>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`language`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>{t('language')}</FormLabel>
|
||||
<FormControl>
|
||||
<SelectWithSearch
|
||||
{...field}
|
||||
options={GoogleLanguageOptions}
|
||||
></SelectWithSearch>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
<RAGFlowFormItem
|
||||
name={buildFieldNameWithPrefix(`fileFormat`, prefix)}
|
||||
label={t('dataflow.fileFormats')}
|
||||
>
|
||||
<SelectWithSearch
|
||||
options={filteredFileFormatOptions}
|
||||
></SelectWithSearch>
|
||||
</RAGFlowFormItem>
|
||||
<Widget prefix={prefix} fileType={fileFormat as FileType}></Widget>
|
||||
{index < fieldLength - 1 && <Separator />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const ParserForm = ({ node }: INextOperatorForm) => {
|
||||
const { t } = useTranslate('flow');
|
||||
const { t } = useTranslation();
|
||||
const defaultValues = useFormValues(initialParserValues, node);
|
||||
|
||||
const form = useForm<z.infer<typeof FormSchema>>({
|
||||
defaultValues,
|
||||
resolver: zodResolver(FormSchema),
|
||||
shouldUnregister: true,
|
||||
});
|
||||
|
||||
const name = 'parser';
|
||||
const { fields, remove, append } = useFieldArray({
|
||||
name,
|
||||
control: form.control,
|
||||
});
|
||||
|
||||
const add = useCallback(() => {
|
||||
append({
|
||||
fileFormat: null,
|
||||
output_format: '',
|
||||
parse_method: '',
|
||||
llm_id: '',
|
||||
lang: '',
|
||||
fields: [],
|
||||
});
|
||||
}, [append]);
|
||||
|
||||
useWatchFormChange(node?.id, form);
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<FormWrapper>
|
||||
<FormContainer>
|
||||
<QueryVariable name="q"></QueryVariable>
|
||||
</FormContainer>
|
||||
<FormContainer>
|
||||
<ApiKeyField placeholder={t('apiKeyPlaceholder')}></ApiKeyField>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`start`}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('flowStart')}</FormLabel>
|
||||
<FormControl>
|
||||
<NumberInput {...field} className="w-full"></NumberInput>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`num`}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('flowNum')}</FormLabel>
|
||||
<FormControl>
|
||||
<NumberInput {...field} className="w-full"></NumberInput>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<GoogleFormWidgets></GoogleFormWidgets>
|
||||
</FormContainer>
|
||||
</FormWrapper>
|
||||
<form className="px-5">
|
||||
{fields.map((field, index) => {
|
||||
return (
|
||||
<ParserItem
|
||||
key={field.id}
|
||||
name={name}
|
||||
index={index}
|
||||
fieldLength={fields.length}
|
||||
remove={remove}
|
||||
></ParserItem>
|
||||
);
|
||||
})}
|
||||
<BlockButton onClick={add} type="button" className="mt-2.5">
|
||||
{t('dataflow.addParser')}
|
||||
</BlockButton>
|
||||
</form>
|
||||
<div className="p-5">
|
||||
<Output list={outputList}></Output>
|
||||
</div>
|
||||
|
||||
3
web/src/pages/data-flow/form/parser-form/interface.ts
Normal file
3
web/src/pages/data-flow/form/parser-form/interface.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export type CommonProps = {
|
||||
prefix: string;
|
||||
};
|
||||
29
web/src/pages/data-flow/form/parser-form/pdf-form-fields.tsx
Normal file
29
web/src/pages/data-flow/form/parser-form/pdf-form-fields.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { CrossLanguageFormField } from '@/components/cross-language-form-field';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FileType } from '../../constant';
|
||||
import {
|
||||
LargeModelFormField,
|
||||
OutputFormatFormField,
|
||||
ParserMethodFormField,
|
||||
} from './common-form-fields';
|
||||
import { CommonProps } from './interface';
|
||||
import { buildFieldNameWithPrefix } from './utils';
|
||||
|
||||
export function PdfFormFields({ prefix }: CommonProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<ParserMethodFormField prefix={prefix}></ParserMethodFormField>
|
||||
{/* Multimodal Model */}
|
||||
<LargeModelFormField prefix={prefix}></LargeModelFormField>
|
||||
<CrossLanguageFormField
|
||||
name={buildFieldNameWithPrefix(`lang`, prefix)}
|
||||
label={t('dataflow.lang')}
|
||||
></CrossLanguageFormField>
|
||||
<OutputFormatFormField
|
||||
prefix={prefix}
|
||||
fileType={FileType.Image}
|
||||
></OutputFormatFormField>
|
||||
</>
|
||||
);
|
||||
}
|
||||
3
web/src/pages/data-flow/form/parser-form/utils.ts
Normal file
3
web/src/pages/data-flow/form/parser-form/utils.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export function buildFieldNameWithPrefix(name: string, prefix: string) {
|
||||
return `${prefix}.${name}`;
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import {
|
||||
LargeModelFormField,
|
||||
OutputFormatFormField,
|
||||
OutputFormatFormFieldProps,
|
||||
} from './common-form-fields';
|
||||
|
||||
export function VideoFormFields({
|
||||
prefix,
|
||||
fileType,
|
||||
}: OutputFormatFormFieldProps) {
|
||||
return (
|
||||
<>
|
||||
{/* Multimodal Model */}
|
||||
<LargeModelFormField prefix={prefix}></LargeModelFormField>
|
||||
<OutputFormatFormField
|
||||
prefix={prefix}
|
||||
fileType={fileType}
|
||||
></OutputFormatFormField>
|
||||
</>
|
||||
);
|
||||
}
|
||||
97
web/src/pages/data-flow/form/splitter-form/index.tsx
Normal file
97
web/src/pages/data-flow/form/splitter-form/index.tsx
Normal file
@ -0,0 +1,97 @@
|
||||
import { FormContainer } from '@/components/form-container';
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import { SliderInputFormField } from '@/components/slider-input-form-field';
|
||||
import { BlockButton, Button } from '@/components/ui/button';
|
||||
import { Form } from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { X } from 'lucide-react';
|
||||
import { memo } from 'react';
|
||||
import { useFieldArray, useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { initialChunkerValues, initialSplitterValues } from '../../constant';
|
||||
import { useFormValues } from '../../hooks/use-form-values';
|
||||
import { useWatchFormChange } from '../../hooks/use-watch-form-change';
|
||||
import { INextOperatorForm } from '../../interface';
|
||||
import { buildOutputList } from '../../utils/build-output-list';
|
||||
import { FormWrapper } from '../components/form-wrapper';
|
||||
import { Output } from '../components/output';
|
||||
|
||||
const outputList = buildOutputList(initialSplitterValues.outputs);
|
||||
|
||||
export const FormSchema = z.object({
|
||||
chunk_token_size: z.number(),
|
||||
delimiters: z.array(
|
||||
z.object({
|
||||
value: z.string().optional(),
|
||||
}),
|
||||
),
|
||||
overlapped_percent: z.number(), // 0.0 - 0.3
|
||||
});
|
||||
|
||||
export type SplitterFormSchemaType = z.infer<typeof FormSchema>;
|
||||
|
||||
const SplitterForm = ({ node }: INextOperatorForm) => {
|
||||
const defaultValues = useFormValues(initialChunkerValues, node);
|
||||
|
||||
const form = useForm<SplitterFormSchemaType>({
|
||||
defaultValues,
|
||||
resolver: zodResolver(FormSchema),
|
||||
});
|
||||
const name = 'delimiters';
|
||||
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
name: name,
|
||||
control: form.control,
|
||||
});
|
||||
|
||||
useWatchFormChange(node?.id, form);
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<FormWrapper>
|
||||
<FormContainer>
|
||||
<SliderInputFormField
|
||||
name="chunk_token_size"
|
||||
max={2048}
|
||||
label="chunk_token_size"
|
||||
></SliderInputFormField>
|
||||
<SliderInputFormField
|
||||
name="overlapped_percent"
|
||||
max={0.3}
|
||||
min={0.1}
|
||||
step={0.01}
|
||||
label="overlapped_percent"
|
||||
></SliderInputFormField>
|
||||
<span>delimiters</span>
|
||||
{fields.map((field, index) => (
|
||||
<div key={field.id} className="flex items-center gap-2">
|
||||
<div className="space-y-2 flex-1">
|
||||
<RAGFlowFormItem
|
||||
name={`${name}.${index}.value`}
|
||||
label="delimiter"
|
||||
labelClassName="!hidden"
|
||||
>
|
||||
<Input className="!m-0"></Input>
|
||||
</RAGFlowFormItem>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant={'ghost'}
|
||||
onClick={() => remove(index)}
|
||||
>
|
||||
<X />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<BlockButton onClick={() => append({ value: '' })}>Add</BlockButton>
|
||||
</FormContainer>
|
||||
</FormWrapper>
|
||||
<div className="p-5">
|
||||
<Output list={outputList}></Output>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(SplitterForm);
|
||||
@ -1,94 +1,38 @@
|
||||
import { FormContainer } from '@/components/form-container';
|
||||
import NumberInput from '@/components/originui/number-input';
|
||||
import { SelectWithSearch } from '@/components/originui/select-with-search';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import { SliderInputFormField } from '@/components/slider-input-form-field';
|
||||
import { Form } from '@/components/ui/form';
|
||||
import { MultiSelect } from '@/components/ui/multi-select';
|
||||
import { buildOptions } from '@/utils/form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { memo } from 'react';
|
||||
import { useForm, useFormContext } from 'react-hook-form';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { z } from 'zod';
|
||||
import { initialChunkerValues } from '../../constant';
|
||||
import { initialTokenizerValues, TokenizerSearchMethod } from '../../constant';
|
||||
import { useFormValues } from '../../hooks/use-form-values';
|
||||
import { useWatchFormChange } from '../../hooks/use-watch-form-change';
|
||||
import { INextOperatorForm } from '../../interface';
|
||||
import { GoogleCountryOptions, GoogleLanguageOptions } from '../../options';
|
||||
import { buildOutputList } from '../../utils/build-output-list';
|
||||
import { ApiKeyField } from '../components/api-key-field';
|
||||
import { FormWrapper } from '../components/form-wrapper';
|
||||
import { Output } from '../components/output';
|
||||
import { QueryVariable } from '../components/query-variable';
|
||||
|
||||
const outputList = buildOutputList(initialChunkerValues.outputs);
|
||||
|
||||
export const GoogleFormPartialSchema = {
|
||||
api_key: z.string(),
|
||||
country: z.string(),
|
||||
language: z.string(),
|
||||
};
|
||||
const outputList = buildOutputList(initialTokenizerValues.outputs);
|
||||
|
||||
export const FormSchema = z.object({
|
||||
...GoogleFormPartialSchema,
|
||||
q: z.string(),
|
||||
start: z.number(),
|
||||
num: z.number(),
|
||||
search_method: z.array(z.string()).min(1),
|
||||
filename_embd_weight: z.number(),
|
||||
});
|
||||
|
||||
export function GoogleFormWidgets() {
|
||||
const form = useFormContext();
|
||||
const { t } = useTranslate('flow');
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`country`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>{t('country')}</FormLabel>
|
||||
<FormControl>
|
||||
<SelectWithSearch
|
||||
{...field}
|
||||
options={GoogleCountryOptions}
|
||||
></SelectWithSearch>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`language`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>{t('language')}</FormLabel>
|
||||
<FormControl>
|
||||
<SelectWithSearch
|
||||
{...field}
|
||||
options={GoogleLanguageOptions}
|
||||
></SelectWithSearch>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
const SearchMethodOptions = buildOptions(TokenizerSearchMethod);
|
||||
|
||||
const TokenizerForm = ({ node }: INextOperatorForm) => {
|
||||
const { t } = useTranslate('flow');
|
||||
const defaultValues = useFormValues(initialChunkerValues, node);
|
||||
const { t } = useTranslation();
|
||||
const defaultValues = useFormValues(initialTokenizerValues, node);
|
||||
|
||||
const form = useForm<z.infer<typeof FormSchema>>({
|
||||
defaultValues,
|
||||
resolver: zodResolver(FormSchema),
|
||||
mode: 'onChange',
|
||||
});
|
||||
|
||||
useWatchFormChange(node?.id, form);
|
||||
@ -96,39 +40,22 @@ const TokenizerForm = ({ node }: INextOperatorForm) => {
|
||||
return (
|
||||
<Form {...form}>
|
||||
<FormWrapper>
|
||||
<FormContainer>
|
||||
<QueryVariable name="q"></QueryVariable>
|
||||
</FormContainer>
|
||||
<FormContainer>
|
||||
<ApiKeyField placeholder={t('apiKeyPlaceholder')}></ApiKeyField>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`start`}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('flowStart')}</FormLabel>
|
||||
<FormControl>
|
||||
<NumberInput {...field} className="w-full"></NumberInput>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`num`}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('flowNum')}</FormLabel>
|
||||
<FormControl>
|
||||
<NumberInput {...field} className="w-full"></NumberInput>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<GoogleFormWidgets></GoogleFormWidgets>
|
||||
</FormContainer>
|
||||
<RAGFlowFormItem name="search_method" label={t('search_method')}>
|
||||
{(field) => (
|
||||
<MultiSelect
|
||||
options={SearchMethodOptions}
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
variant="inverted"
|
||||
/>
|
||||
)}
|
||||
</RAGFlowFormItem>
|
||||
<SliderInputFormField
|
||||
name="filename_embd_weight"
|
||||
label="filename_embd_weight"
|
||||
max={0.5}
|
||||
step={0.01}
|
||||
></SliderInputFormField>
|
||||
</FormWrapper>
|
||||
<div className="p-5">
|
||||
<Output list={outputList}></Output>
|
||||
|
||||
@ -18,6 +18,7 @@ import {
|
||||
initialCrawlerValues,
|
||||
initialEmailValues,
|
||||
initialExeSqlValues,
|
||||
initialHierarchicalMergerValues,
|
||||
initialInvokeValues,
|
||||
initialIterationStartValues,
|
||||
initialIterationValues,
|
||||
@ -28,6 +29,7 @@ import {
|
||||
initialRelevantValues,
|
||||
initialRetrievalValues,
|
||||
initialRewriteQuestionValues,
|
||||
initialSplitterValues,
|
||||
initialStringTransformValues,
|
||||
initialSwitchValues,
|
||||
initialTokenizerValues,
|
||||
@ -82,6 +84,8 @@ export const useInitializeOperatorParams = () => {
|
||||
[Operator.Parser]: initialParserValues,
|
||||
[Operator.Chunker]: initialChunkerValues,
|
||||
[Operator.Tokenizer]: initialTokenizerValues,
|
||||
[Operator.Splitter]: initialSplitterValues,
|
||||
[Operator.HierarchicalMerger]: initialHierarchicalMergerValues,
|
||||
};
|
||||
}, [llmId]);
|
||||
|
||||
|
||||
34
web/src/pages/data-flow/hooks/use-run-dataflow.ts
Normal file
34
web/src/pages/data-flow/hooks/use-run-dataflow.ts
Normal file
@ -0,0 +1,34 @@
|
||||
import { useSendMessageBySSE } from '@/hooks/use-send-message';
|
||||
import api from '@/utils/api';
|
||||
import { useCallback } from 'react';
|
||||
import { useParams } from 'umi';
|
||||
import { useSaveGraphBeforeOpeningDebugDrawer } from './use-save-graph';
|
||||
|
||||
export function useRunDataflow(showLogSheet: () => void) {
|
||||
const { send } = useSendMessageBySSE(api.runCanvas);
|
||||
const { id } = useParams();
|
||||
|
||||
const { handleRun: saveGraph, loading } =
|
||||
useSaveGraphBeforeOpeningDebugDrawer(showLogSheet!);
|
||||
|
||||
const run = useCallback(
|
||||
async (fileResponseData: Record<string, any>) => {
|
||||
const success = await saveGraph();
|
||||
if (!success) return;
|
||||
const res = await send({
|
||||
id,
|
||||
query: '',
|
||||
session_id: null,
|
||||
inputs: fileResponseData,
|
||||
});
|
||||
console.log('🚀 ~ useRunDataflow ~ res:', res);
|
||||
|
||||
if (res && res?.response.status === 200 && res?.data?.code === 0) {
|
||||
// fetch canvas
|
||||
}
|
||||
},
|
||||
[id, saveGraph, send],
|
||||
);
|
||||
|
||||
return { run, loading: loading };
|
||||
}
|
||||
@ -1,8 +1,4 @@
|
||||
import {
|
||||
useFetchAgent,
|
||||
useResetAgent,
|
||||
useSetAgent,
|
||||
} from '@/hooks/use-agent-request';
|
||||
import { useFetchAgent, useSetAgent } from '@/hooks/use-agent-request';
|
||||
import { RAGFlowNodeType } from '@/interfaces/database/flow';
|
||||
import { formatDate } from '@/utils/date';
|
||||
import { useDebounceEffect } from 'ahooks';
|
||||
@ -22,6 +18,7 @@ export const useSaveGraph = (showMessage: boolean = true) => {
|
||||
return setAgent({
|
||||
id,
|
||||
title: data.title,
|
||||
canvas_category: data.canvas_category,
|
||||
dsl: buildDslData(currentNodes),
|
||||
});
|
||||
},
|
||||
@ -33,21 +30,22 @@ export const useSaveGraph = (showMessage: boolean = true) => {
|
||||
|
||||
export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => {
|
||||
const { saveGraph, loading } = useSaveGraph();
|
||||
const { resetAgent } = useResetAgent();
|
||||
// const { resetAgent } = useResetAgent();
|
||||
|
||||
const handleRun = useCallback(
|
||||
async (nextNodes?: RAGFlowNodeType[]) => {
|
||||
const saveRet = await saveGraph(nextNodes);
|
||||
if (saveRet?.code === 0) {
|
||||
// Call the reset api before opening the run drawer each time
|
||||
const resetRet = await resetAgent();
|
||||
// const resetRet = await resetAgent();
|
||||
// After resetting, all previous messages will be cleared.
|
||||
if (resetRet?.code === 0) {
|
||||
show();
|
||||
}
|
||||
// if (resetRet?.code === 0) {
|
||||
show();
|
||||
// }
|
||||
}
|
||||
return saveRet?.code === 0;
|
||||
},
|
||||
[saveGraph, resetAgent, show],
|
||||
[saveGraph, show],
|
||||
);
|
||||
|
||||
return { handleRun, loading };
|
||||
|
||||
@ -91,13 +91,7 @@ export function useShowDrawer({
|
||||
|
||||
useEffect(() => {
|
||||
if (drawerVisible) {
|
||||
if (inputs.length > 0) {
|
||||
showRunModal();
|
||||
hideChatModal();
|
||||
} else {
|
||||
showChatModal();
|
||||
hideRunModal();
|
||||
}
|
||||
showRunModal();
|
||||
}
|
||||
}, [
|
||||
hideChatModal,
|
||||
|
||||
@ -6,60 +6,21 @@ import {
|
||||
} from '@/components/ui/sheet';
|
||||
import { IModalProps } from '@/interfaces/common';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { BeginId } from '../constant';
|
||||
import DebugContent from '../debug-content';
|
||||
import { useGetBeginNodeDataInputs } from '../hooks/use-get-begin-query';
|
||||
import { useSaveGraphBeforeOpeningDebugDrawer } from '../hooks/use-save-graph';
|
||||
import { BeginQuery } from '../interface';
|
||||
import useGraphStore from '../store';
|
||||
import { buildBeginQueryWithObject } from '../utils';
|
||||
import { useRunDataflow } from '../hooks/use-run-dataflow';
|
||||
import { UploaderForm } from './uploader';
|
||||
|
||||
const RunSheet = ({
|
||||
hideModal,
|
||||
showModal: showChatModal,
|
||||
}: IModalProps<any>) => {
|
||||
const RunSheet = ({ hideModal, showModal: showLogSheet }: IModalProps<any>) => {
|
||||
const { t } = useTranslation();
|
||||
const { updateNodeForm, getNode } = useGraphStore((state) => state);
|
||||
|
||||
const inputs = useGetBeginNodeDataInputs();
|
||||
|
||||
const { handleRun, loading } = useSaveGraphBeforeOpeningDebugDrawer(
|
||||
showChatModal!,
|
||||
);
|
||||
|
||||
const handleRunAgent = useCallback(
|
||||
(nextValues: BeginQuery[]) => {
|
||||
const beginNode = getNode(BeginId);
|
||||
const inputs: Record<string, BeginQuery> = beginNode?.data.form.inputs;
|
||||
|
||||
const nextInputs = buildBeginQueryWithObject(inputs, nextValues);
|
||||
|
||||
const currentNodes = updateNodeForm(BeginId, nextInputs, ['inputs']);
|
||||
handleRun(currentNodes);
|
||||
hideModal?.();
|
||||
},
|
||||
[getNode, handleRun, hideModal, updateNodeForm],
|
||||
);
|
||||
|
||||
const onOk = useCallback(
|
||||
async (nextValues: any[]) => {
|
||||
handleRunAgent(nextValues);
|
||||
},
|
||||
[handleRunAgent],
|
||||
);
|
||||
const { run, loading } = useRunDataflow(() => {});
|
||||
|
||||
return (
|
||||
<Sheet onOpenChange={hideModal} open>
|
||||
<Sheet onOpenChange={hideModal} open modal={false}>
|
||||
<SheetContent className={cn('top-20 p-2')}>
|
||||
<SheetHeader>
|
||||
<SheetTitle>{t('flow.testRun')}</SheetTitle>
|
||||
<DebugContent
|
||||
ok={onOk}
|
||||
parameters={inputs}
|
||||
loading={loading}
|
||||
></DebugContent>
|
||||
<UploaderForm ok={run} loading={loading}></UploaderForm>
|
||||
</SheetHeader>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
57
web/src/pages/data-flow/run-sheet/uploader.tsx
Normal file
57
web/src/pages/data-flow/run-sheet/uploader.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
'use client';
|
||||
|
||||
import { z } from 'zod';
|
||||
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import { ButtonLoading } from '@/components/ui/button';
|
||||
import { Form } from '@/components/ui/form';
|
||||
import { FileUploadDirectUpload } from '@/pages/agent/debug-content/uploader';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const formSchema = z.object({
|
||||
file: z.record(z.any()),
|
||||
});
|
||||
|
||||
export type FormSchemaType = z.infer<typeof formSchema>;
|
||||
|
||||
type UploaderFormProps = {
|
||||
ok: (values: FormSchemaType) => void;
|
||||
loading: boolean;
|
||||
};
|
||||
|
||||
export function UploaderForm({ ok, loading }: UploaderFormProps) {
|
||||
const { t } = useTranslation();
|
||||
const form = useForm<FormSchemaType>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {},
|
||||
});
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(ok)} className="space-y-8">
|
||||
<RAGFlowFormItem name="file">
|
||||
{(field) => {
|
||||
return (
|
||||
<FileUploadDirectUpload
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
></FileUploadDirectUpload>
|
||||
);
|
||||
}}
|
||||
</RAGFlowFormItem>
|
||||
|
||||
<div>
|
||||
<ButtonLoading
|
||||
type="submit"
|
||||
loading={loading}
|
||||
className="w-full mt-1"
|
||||
>
|
||||
{t('flow.run')}
|
||||
</ButtonLoading>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@ -9,7 +9,15 @@ import { removeUselessFieldsFromValues } from '@/utils/form';
|
||||
import { Edge, Node, XYPosition } from '@xyflow/react';
|
||||
import { FormInstance, FormListFieldData } from 'antd';
|
||||
import { humanId } from 'human-id';
|
||||
import { curry, get, intersectionWith, isEqual, omit, sample } from 'lodash';
|
||||
import {
|
||||
curry,
|
||||
get,
|
||||
intersectionWith,
|
||||
isEmpty,
|
||||
isEqual,
|
||||
omit,
|
||||
sample,
|
||||
} from 'lodash';
|
||||
import pipe from 'lodash/fp/pipe';
|
||||
import isObject from 'lodash/isObject';
|
||||
import {
|
||||
@ -18,6 +26,9 @@ import {
|
||||
NodeHandleId,
|
||||
Operator,
|
||||
} from './constant';
|
||||
import { HierarchicalMergerFormSchemaType } from './form/hierarchical-merger-form';
|
||||
import { ParserFormSchemaType } from './form/parser-form';
|
||||
import { SplitterFormSchemaType } from './form/splitter-form';
|
||||
import { BeginQuery, IPosition } from './interface';
|
||||
|
||||
function buildAgentExceptionGoto(edges: Edge[], nodeId: string) {
|
||||
@ -63,10 +74,7 @@ const buildComponentDownstreamOrUpstream = (
|
||||
|
||||
const removeUselessDataInTheOperator = curry(
|
||||
(operatorName: string, params: Record<string, unknown>) => {
|
||||
if (
|
||||
operatorName === Operator.Generate ||
|
||||
operatorName === Operator.Categorize
|
||||
) {
|
||||
if (operatorName === Operator.Categorize) {
|
||||
return removeUselessFieldsFromValues(params, '');
|
||||
}
|
||||
return params;
|
||||
@ -151,6 +159,44 @@ export function isBottomSubAgent(edges: Edge[], nodeId?: string) {
|
||||
);
|
||||
return !!edge;
|
||||
}
|
||||
// Because the array of react-hook-form must be object data,
|
||||
// it needs to be converted into a simple data type array required by the backend
|
||||
function transformObjectArrayToPureArray(
|
||||
list: Array<Record<string, any>>,
|
||||
field: string,
|
||||
) {
|
||||
return Array.isArray(list)
|
||||
? list.filter((x) => !isEmpty(x[field])).map((y) => y[field])
|
||||
: [];
|
||||
}
|
||||
|
||||
function transformParserParams(params: ParserFormSchemaType) {
|
||||
return params.parser.reduce<
|
||||
Record<string, ParserFormSchemaType['parser'][0]>
|
||||
>((pre, cur) => {
|
||||
if (cur.fileFormat) {
|
||||
pre[cur.fileFormat] = omit(cur, 'fileFormat');
|
||||
}
|
||||
return pre;
|
||||
}, {});
|
||||
}
|
||||
|
||||
function transformSplitterParams(params: SplitterFormSchemaType) {
|
||||
return {
|
||||
...params,
|
||||
delimiters: transformObjectArrayToPureArray(params.delimiters, 'value'),
|
||||
};
|
||||
}
|
||||
|
||||
function transformHierarchicalMergerParams(
|
||||
params: HierarchicalMergerFormSchemaType,
|
||||
) {
|
||||
const levels = params.levels.map((x) =>
|
||||
transformObjectArrayToPureArray(x.expressions, 'expression'),
|
||||
);
|
||||
|
||||
return { ...params, hierarchy: Number(params.hierarchy), levels };
|
||||
}
|
||||
|
||||
// construct a dsl based on the node information of the graph
|
||||
export const buildDslComponentsByGraph = (
|
||||
@ -184,6 +230,18 @@ export const buildDslComponentsByGraph = (
|
||||
params = buildCategorize(edges, nodes, id);
|
||||
break;
|
||||
|
||||
case Operator.Parser:
|
||||
params = transformParserParams(params);
|
||||
break;
|
||||
|
||||
case Operator.Splitter:
|
||||
params = transformSplitterParams(params);
|
||||
break;
|
||||
|
||||
case Operator.HierarchicalMerger:
|
||||
params = transformHierarchicalMergerParams(params);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@ import {
|
||||
QueryStringMap,
|
||||
useNavigatePage,
|
||||
} from '@/hooks/logic-hooks/navigate-hooks';
|
||||
import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
|
||||
import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
|
||||
import { ChunkerContainer } from './chunker';
|
||||
import { useGetDocumentUrl } from './components/document-preview/hooks';
|
||||
@ -60,6 +61,7 @@ const Chunk = () => {
|
||||
const handleStepChange = (id: number | string) => {
|
||||
setActiveStepId(id);
|
||||
};
|
||||
const { type } = useGetKnowledgeSearchParams();
|
||||
return (
|
||||
<>
|
||||
<PageHeader>
|
||||
@ -87,12 +89,14 @@ const Chunk = () => {
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</PageHeader>
|
||||
<div className=" absolute ml-[50%] translate-x-[-50%] top-4 flex justify-center">
|
||||
<TimelineDataFlow
|
||||
activeFunc={handleStepChange}
|
||||
activeId={activeStepId}
|
||||
/>
|
||||
</div>
|
||||
{type === 'dataflow' && (
|
||||
<div className=" absolute ml-[50%] translate-x-[-50%] top-4 flex justify-center">
|
||||
<TimelineDataFlow
|
||||
activeFunc={handleStepChange}
|
||||
activeId={activeStepId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.chunkPage}>
|
||||
<div className="flex flex-none gap-8 border border-border mt-[26px] p-3 rounded-lg h-[calc(100vh-100px)]">
|
||||
<div className="w-2/5">
|
||||
@ -110,7 +114,8 @@ const Chunk = () => {
|
||||
</section>
|
||||
</div>
|
||||
<div className="h-dvh border-r -mt-3"></div>
|
||||
{activeStepId === TimelineNodeObj.chunker.id && <ChunkerContainer />}
|
||||
{(activeStepId === TimelineNodeObj.chunker.id ||
|
||||
type === 'chunk') && <ChunkerContainer />}
|
||||
{activeStepId === TimelineNodeObj.parser.id && <ParserContainer />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@ export enum LogTabs {
|
||||
DATASET_LOGS = 'datasetLogs',
|
||||
}
|
||||
|
||||
export enum processingType {
|
||||
export enum ProcessingType {
|
||||
knowledgeGraph = 'knowledgeGraph',
|
||||
raptor = 'raptor',
|
||||
}
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
import {
|
||||
CircleQuestionMark,
|
||||
Cpu,
|
||||
FileChartLine,
|
||||
HardDriveDownload,
|
||||
} from 'lucide-react';
|
||||
import { FC, useState } from 'react';
|
||||
import SvgIcon from '@/components/svg-icon';
|
||||
import { useIsDarkTheme } from '@/components/theme-provider';
|
||||
import { toFixed } from '@/utils/common-util';
|
||||
import { CircleQuestionMark } from 'lucide-react';
|
||||
import { FC, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { LogTabs } from './dataset-common';
|
||||
import { DatasetFilter } from './dataset-filter';
|
||||
@ -37,44 +35,43 @@ const StatCard: FC<StatCardProps> = ({ title, value, children, icon }) => {
|
||||
|
||||
interface CardFooterProcessProps {
|
||||
total: number;
|
||||
completed: number;
|
||||
success: number;
|
||||
failed: number;
|
||||
}
|
||||
const CardFooterProcess: FC<CardFooterProcessProps> = ({
|
||||
total,
|
||||
completed,
|
||||
success,
|
||||
failed,
|
||||
success = 0,
|
||||
failed = 0,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const successPrecentage = (success / total) * 100;
|
||||
const failedPrecentage = (failed / total) * 100;
|
||||
const successPrecentage = total ? (success / total) * 100 : 0;
|
||||
const failedPrecentage = total ? (failed / total) * 100 : 0;
|
||||
const completedPercentage = total ? ((success + failed) / total) * 100 : 0;
|
||||
return (
|
||||
<div className="flex items-center flex-col gap-2">
|
||||
<div className="flex justify-between w-full text-sm text-text-secondary">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1">
|
||||
{success}
|
||||
{success || 0}
|
||||
<span>{t('knowledgeDetails.success')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{failed}
|
||||
{failed || 0}
|
||||
<span>{t('knowledgeDetails.failed')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{completed}
|
||||
{toFixed(completedPercentage) as string}%
|
||||
<span>{t('knowledgeDetails.completed')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex rounded-full h-3 bg-bg-card text-sm font-bold text-text-primary">
|
||||
<div className="w-full flex rounded-full h-1.5 bg-bg-card text-sm font-bold text-text-primary">
|
||||
<div
|
||||
className=" rounded-full h-3 bg-accent-primary"
|
||||
className=" rounded-full h-1.5 bg-accent-primary"
|
||||
style={{ width: successPrecentage + '%' }}
|
||||
></div>
|
||||
<div
|
||||
className=" rounded-full h-3 bg-state-error"
|
||||
className=" rounded-full h-1.5 bg-state-error"
|
||||
style={{ width: failedPrecentage + '%' }}
|
||||
></div>
|
||||
</div>
|
||||
@ -86,24 +83,67 @@ const FileLogsPage: FC = () => {
|
||||
const [active, setActive] = useState<(typeof LogTabs)[keyof typeof LogTabs]>(
|
||||
LogTabs.FILE_LOGS,
|
||||
);
|
||||
const mockData = Array(30)
|
||||
.fill(0)
|
||||
.map((_, i) => ({
|
||||
id: i === 0 ? '#952734' : `14`,
|
||||
fileName: 'PRD for DealBees 1.2 (1).txt',
|
||||
source: 'GitHub',
|
||||
pipeline: i === 0 ? 'data demo for...' : i === 1 ? 'test' : 'kiki’s demo',
|
||||
startDate: '14/03/2025 14:53:39',
|
||||
task: i === 0 ? 'Parse' : 'Parser',
|
||||
status:
|
||||
i === 0
|
||||
? 'Success'
|
||||
: i === 1
|
||||
? 'Failed'
|
||||
: i === 2
|
||||
? 'Running'
|
||||
: 'Pending',
|
||||
}));
|
||||
const topMockData = {
|
||||
totalFiles: {
|
||||
value: 2827,
|
||||
precent: 12.5,
|
||||
},
|
||||
downloads: {
|
||||
value: 28,
|
||||
success: 8,
|
||||
failed: 2,
|
||||
},
|
||||
processing: {
|
||||
value: 156,
|
||||
success: 8,
|
||||
failed: 2,
|
||||
},
|
||||
};
|
||||
const mockData = useMemo(() => {
|
||||
if (active === LogTabs.FILE_LOGS) {
|
||||
return Array(30)
|
||||
.fill(0)
|
||||
.map((_, i) => ({
|
||||
id: i === 0 ? '952734' : `14`,
|
||||
fileName: 'PRD for DealBees 1.2 (1).txt',
|
||||
source: 'GitHub',
|
||||
pipeline:
|
||||
i === 0 ? 'data demo for...' : i === 1 ? 'test' : 'kiki’s demo',
|
||||
startDate: '14/03/2025 14:53:39',
|
||||
task: i === 0 ? 'chunck' : 'Parser',
|
||||
status: i === 0 ? 3 : i === 1 ? 4 : i === 2 ? 1 : 0,
|
||||
statusName:
|
||||
i === 0
|
||||
? 'Success'
|
||||
: i === 1
|
||||
? 'Failed'
|
||||
: i === 2
|
||||
? 'Running'
|
||||
: 'Pending',
|
||||
}));
|
||||
}
|
||||
if (active === LogTabs.DATASET_LOGS) {
|
||||
return Array(8)
|
||||
.fill(0)
|
||||
.map((_, i) => ({
|
||||
id: i === 0 ? '952734' : `14`,
|
||||
fileName: 'PRD for DealBees 1.2 (1).txt',
|
||||
source: 'GitHub',
|
||||
startDate: '14/03/2025 14:53:39',
|
||||
task: i === 0 ? 'chunck' : 'Parser',
|
||||
pipeline:
|
||||
i === 0 ? 'data demo for...' : i === 1 ? 'test' : 'kiki’s demo',
|
||||
status:
|
||||
i === 0
|
||||
? 'Success'
|
||||
: i === 1
|
||||
? 'Failed'
|
||||
: i === 2
|
||||
? 'Running'
|
||||
: 'Pending',
|
||||
}));
|
||||
}
|
||||
}, [active]);
|
||||
|
||||
const pagination = {
|
||||
current: 1,
|
||||
@ -118,23 +158,63 @@ const FileLogsPage: FC = () => {
|
||||
console.log('Pagination changed:', { page, pageSize });
|
||||
};
|
||||
|
||||
const isDark = useIsDarkTheme();
|
||||
return (
|
||||
<div className="p-5 min-w-[880px] border-border border rounded-lg mr-5">
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-3 md:grid-cols-3 gap-4 mb-6">
|
||||
<StatCard title="Total Files" value={2827} icon={<FileChartLine />}>
|
||||
<div>+7% from last week</div>
|
||||
<StatCard
|
||||
title="Total Files"
|
||||
value={topMockData.totalFiles.value}
|
||||
icon={
|
||||
isDark ? (
|
||||
<SvgIcon name="data-flow/total-files-icon" width={40} />
|
||||
) : (
|
||||
<SvgIcon name="data-flow/total-files-icon-bri" width={40} />
|
||||
)
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<span className="text-accent-primary">
|
||||
{topMockData.totalFiles.precent > 0 ? '+' : ''}
|
||||
{topMockData.totalFiles.precent}%{' '}
|
||||
</span>
|
||||
from last week
|
||||
</div>
|
||||
</StatCard>
|
||||
<StatCard title="Downloading" value={28} icon={<HardDriveDownload />}>
|
||||
<StatCard
|
||||
title="Downloading"
|
||||
value={topMockData.downloads.value}
|
||||
icon={
|
||||
isDark ? (
|
||||
<SvgIcon name="data-flow/data-icon" width={40} />
|
||||
) : (
|
||||
<SvgIcon name="data-flow/data-icon-bri" width={40} />
|
||||
)
|
||||
}
|
||||
>
|
||||
<CardFooterProcess
|
||||
total={100}
|
||||
success={8}
|
||||
failed={2}
|
||||
completed={15}
|
||||
total={topMockData.downloads.value}
|
||||
success={topMockData.downloads.success}
|
||||
failed={topMockData.downloads.failed}
|
||||
/>
|
||||
</StatCard>
|
||||
<StatCard title="Processing" value={156} icon={<Cpu />}>
|
||||
<CardFooterProcess total={20} success={8} failed={2} completed={15} />
|
||||
<StatCard
|
||||
title="Processing"
|
||||
value={topMockData.processing.value}
|
||||
icon={
|
||||
isDark ? (
|
||||
<SvgIcon name="data-flow/processing-icon" width={40} />
|
||||
) : (
|
||||
<SvgIcon name="data-flow/processing-icon-bri" width={40} />
|
||||
)
|
||||
}
|
||||
>
|
||||
<CardFooterProcess
|
||||
total={topMockData.processing.value}
|
||||
success={topMockData.processing.success}
|
||||
failed={topMockData.processing.failed}
|
||||
/>
|
||||
</StatCard>
|
||||
</div>
|
||||
|
||||
|
||||
@ -14,10 +14,10 @@ import {
|
||||
} from '@/components/ui/table';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
|
||||
import ProcessLogModal from '@/pages/datasets/process-log-modal';
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
Row,
|
||||
SortingState,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
@ -29,7 +29,8 @@ import {
|
||||
import { TFunction } from 'i18next';
|
||||
import { ClipboardList, Eye } from 'lucide-react';
|
||||
import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react';
|
||||
import { LogTabs, processingType } from './dataset-common';
|
||||
import ProcessLogModal from '../process-log-modal';
|
||||
import { LogTabs, ProcessingType } from './dataset-common';
|
||||
|
||||
interface DocumentLog {
|
||||
id: string;
|
||||
@ -144,7 +145,12 @@ export const getFileLogsTableColumns = (
|
||||
{
|
||||
accessorKey: 'status',
|
||||
header: t('status'),
|
||||
cell: ({ row }) => <FileStatusBadge status={row.original.status} />,
|
||||
cell: ({ row }) => (
|
||||
<FileStatusBadge
|
||||
status={row.original.status}
|
||||
name={row.original.statusName}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'operations',
|
||||
@ -179,7 +185,7 @@ export const getFileLogsTableColumns = (
|
||||
|
||||
export const getDatasetLogsTableColumns = (
|
||||
t: TFunction<'translation', string>,
|
||||
setIsModalVisible: Dispatch<SetStateAction<boolean>>,
|
||||
showLog: (row: Row<DocumentLog>, active: LogTabs) => void,
|
||||
) => {
|
||||
// const { t } = useTranslate('knowledgeDetails');
|
||||
const columns: ColumnDef<DocumentLog>[] = [
|
||||
@ -221,10 +227,10 @@ export const getDatasetLogsTableColumns = (
|
||||
header: t('processingType'),
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2 text-text-primary">
|
||||
{processingType.knowledgeGraph === row.original.processingType && (
|
||||
{ProcessingType.knowledgeGraph === row.original.processingType && (
|
||||
<SvgIcon name={`data-flow/knowledgegraph`} width={24}></SvgIcon>
|
||||
)}
|
||||
{processingType.raptor === row.original.processingType && (
|
||||
{ProcessingType.raptor === row.original.processingType && (
|
||||
<SvgIcon name={`data-flow/raptor`} width={24}></SvgIcon>
|
||||
)}
|
||||
{row.original.processingType}
|
||||
@ -234,7 +240,12 @@ export const getDatasetLogsTableColumns = (
|
||||
{
|
||||
accessorKey: 'status',
|
||||
header: t('status'),
|
||||
cell: ({ row }) => <FileStatusBadge status={row.original.status} />,
|
||||
cell: ({ row }) => (
|
||||
<FileStatusBadge
|
||||
status={row.original.status}
|
||||
name={row.original.statusName}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'operations',
|
||||
@ -246,7 +257,7 @@ export const getDatasetLogsTableColumns = (
|
||||
size="sm"
|
||||
className="p-1"
|
||||
onClick={() => {
|
||||
setIsModalVisible(true);
|
||||
showLog(row, LogTabs.DATASET_LOGS);
|
||||
}}
|
||||
>
|
||||
<Eye />
|
||||
@ -259,6 +270,18 @@ export const getDatasetLogsTableColumns = (
|
||||
return columns;
|
||||
};
|
||||
|
||||
const taskInfo = {
|
||||
taskId: '#9527',
|
||||
fileName: 'PRD for DealBees 1.2 (1).text',
|
||||
fileSize: '2.4G',
|
||||
source: 'Github',
|
||||
task: 'Parse',
|
||||
state: 'Running',
|
||||
startTime: '14/03/2025 14:53:39',
|
||||
duration: '800',
|
||||
details:
|
||||
'\n17:43:21 Task has been received.\n17:43:25 Page(1~100000001): Start to parse.\n17:43:25 Page(1~100000001): Start to tag for every chunk ...\n17:43:45 Page(1~100000001): Tagging 2 chunks completed in 18.99s\n17:43:45 Page(1~100000001): Generate 2 chunks\n17:43:55 Page(1~100000001): Embedding chunks (10.60s)\n17:43:55 Page(1~100000001): Indexing done (0.07s). Task done (33.97s)\n17:43:58 created task raptor\n17:43:58 Task has been received.\n17:44:36 Cluster one layer: 2 -> 1\n17:44:36 Indexing done (0.05s). Task done (37.88s)\n17:44:40 created task graphrag\n17:44:41 Task has been received.\n17:50:57 Entities extraction of chunk 0 1/3 done, 25 nodes, 26 edges, 14893 tokens.\n17:56:01 [ERROR][Exception]: Operation timed out after 7200 seconds and 1 attempts.',
|
||||
};
|
||||
const FileLogsTable: FC<FileLogsTableProps> = ({
|
||||
data,
|
||||
pagination,
|
||||
@ -272,11 +295,16 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
|
||||
const { t } = useTranslate('knowledgeDetails');
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const { navigateToDataflowResult } = useNavigatePage();
|
||||
const [logInfo, setLogInfo] = useState(taskInfo);
|
||||
const showLog = (row: Row<DocumentLog>, active: LogTabs) => {
|
||||
setLogInfo(row.original);
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const columns = useMemo(() => {
|
||||
console.log('columns', active);
|
||||
return active === LogTabs.FILE_LOGS
|
||||
? getFileLogsTableColumns(t, setIsModalVisible, navigateToDataflowResult)
|
||||
: getDatasetLogsTableColumns(t, setIsModalVisible);
|
||||
: getDatasetLogsTableColumns(t, showLog);
|
||||
}, [active, t]);
|
||||
|
||||
const currentPagination = useMemo(
|
||||
@ -308,17 +336,6 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
|
||||
? Math.ceil(pagination.total / pagination.pageSize)
|
||||
: 0,
|
||||
});
|
||||
const taskInfo = {
|
||||
taskId: '#9527',
|
||||
fileName: 'PRD for DealBees 1.2 (1).text',
|
||||
fileSize: '2.4G',
|
||||
source: 'Github',
|
||||
task: 'Parse',
|
||||
state: 'Running',
|
||||
startTime: '14/03/2025 14:53:39',
|
||||
duration: '800',
|
||||
details: 'PRD for DealBees 1.2 (1).text',
|
||||
};
|
||||
return (
|
||||
<div className="w-full h-[calc(100vh-350px)]">
|
||||
<Table rootClassName="max-h-[calc(100vh-380px)]">
|
||||
@ -363,7 +380,7 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div className="flex items-center justify-end py-4 absolute bottom-3 right-12">
|
||||
<div className="flex items-center justify-end absolute bottom-3 right-12">
|
||||
<div className="space-x-2">
|
||||
<RAGFlowPagination
|
||||
{...{ current: pagination.current, pageSize: pagination.pageSize }}
|
||||
@ -375,7 +392,7 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
|
||||
<ProcessLogModal
|
||||
visible={isModalVisible}
|
||||
onCancel={() => setIsModalVisible(false)}
|
||||
taskInfo={taskInfo}
|
||||
logInfo={logInfo}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { NaiveConfiguration } from './naive';
|
||||
import { SavingButton } from './saving-button';
|
||||
|
||||
export function ChunkMethodForm() {
|
||||
const form = useFormContext();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<section className="h-full flex flex-col">
|
||||
<div className="overflow-auto flex-1 min-h-0">
|
||||
<NaiveConfiguration></NaiveConfiguration>
|
||||
</div>
|
||||
<div className="text-right pt-4 flex justify-end gap-3">
|
||||
<Button
|
||||
type="reset"
|
||||
className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
|
||||
onClick={() => {
|
||||
form.reset();
|
||||
}}
|
||||
>
|
||||
{t('knowledgeConfiguration.cancel')}
|
||||
</Button>
|
||||
<SavingButton></SavingButton>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,105 @@
|
||||
import { IconFont } from '@/components/icon-font';
|
||||
import { RAGFlowAvatar } from '@/components/ragflow-avatar';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Link, Settings2, Unlink } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import LinkDataPipelineModal from './link-data-pipline-modal';
|
||||
|
||||
interface DataPipelineItemProps {
|
||||
name: string;
|
||||
avatar?: string;
|
||||
isDefault?: boolean;
|
||||
linked?: boolean;
|
||||
openLinkModalFunc?: (open: boolean) => void;
|
||||
}
|
||||
const DataPipelineItem = (props: DataPipelineItemProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { name, avatar, isDefault, linked, openLinkModalFunc } = props;
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-1 px-2 rounded-lg border">
|
||||
<div className="flex items-center gap-1">
|
||||
<RAGFlowAvatar avatar={avatar} name={name} className="size-4" />
|
||||
<div>{name}</div>
|
||||
{isDefault && (
|
||||
<div className="text-xs bg-text-secondary text-bg-base px-2 py-1 rounded-md">
|
||||
{t('knowledgeConfiguration.default')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-1 items-center">
|
||||
<Button variant={'transparent'} className="border-none">
|
||||
<Settings2 />
|
||||
</Button>
|
||||
{!isDefault && (
|
||||
<Button
|
||||
variant={'transparent'}
|
||||
className="border-none"
|
||||
onClick={() => {
|
||||
openLinkModalFunc?.(true);
|
||||
}}
|
||||
>
|
||||
{linked ? <Link /> : <Unlink />}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const LinkDataPipeline = () => {
|
||||
const { t } = useTranslation();
|
||||
const [openLinkModal, setOpenLinkModal] = useState(false);
|
||||
const testNode = [
|
||||
{
|
||||
name: 'Data Pipeline 1',
|
||||
avatar: 'https://avatars.githubusercontent.com/u/10656201?v=4',
|
||||
isDefault: true,
|
||||
linked: true,
|
||||
},
|
||||
{
|
||||
name: 'Data Pipeline 2',
|
||||
avatar: 'https://avatars.githubusercontent.com/u/10656201?v=4',
|
||||
linked: false,
|
||||
},
|
||||
];
|
||||
const openLinkModalFunc = (open: boolean) => {
|
||||
setOpenLinkModal(open);
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<section className="flex flex-col">
|
||||
<div className="flex items-center gap-1 text-text-primary text-sm">
|
||||
<IconFont name="Pipeline" />
|
||||
{t('knowledgeConfiguration.dataPipeline')}
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-center text-xs text-text-secondary">
|
||||
Manage data pipeline linkage with this dataset
|
||||
</div>
|
||||
<Button variant={'transparent'}>
|
||||
<Link />
|
||||
<span className="text-xs text-text-primary">
|
||||
{t('knowledgeConfiguration.linkDataPipeline')}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex flex-col gap-2">
|
||||
{testNode.map((item) => (
|
||||
<DataPipelineItem
|
||||
key={item.name}
|
||||
openLinkModalFunc={openLinkModalFunc}
|
||||
{...item}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
<LinkDataPipelineModal
|
||||
open={openLinkModal}
|
||||
setOpen={(open: boolean) => {
|
||||
openLinkModalFunc(open);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default LinkDataPipeline;
|
||||
@ -0,0 +1,95 @@
|
||||
import { DataFlowSelect } from '@/components/data-pipeline-select';
|
||||
import Input from '@/components/originui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { Modal } from '@/components/ui/modal/modal';
|
||||
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { t } from 'i18next';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { linkPiplineFormSchema } from '../form-schema';
|
||||
|
||||
const LinkDataPipelineModal = ({
|
||||
open,
|
||||
setOpen,
|
||||
}: {
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
}) => {
|
||||
const form = useForm<z.infer<typeof linkPiplineFormSchema>>({
|
||||
resolver: zodResolver(linkPiplineFormSchema),
|
||||
defaultValues: { data_flow: ['888'], file_filter: '' },
|
||||
});
|
||||
// const [open, setOpen] = useState(false);
|
||||
const { navigateToAgents } = useNavigatePage();
|
||||
const handleFormSubmit = (values: any) => {
|
||||
console.log(values);
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
title={t('knowledgeConfiguration.linkDataPipeline')}
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
showfooter={false}
|
||||
>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(handleFormSubmit)}>
|
||||
<div className="flex flex-col gap-4 ">
|
||||
<DataFlowSelect
|
||||
toDataPipeline={navigateToAgents}
|
||||
formFieldName="data_flow"
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={'file_filter'}
|
||||
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('knowledgeConfiguration.fileFilterTip')}
|
||||
className="text-sm text-text-primary whitespace-wrap "
|
||||
>
|
||||
{t('knowledgeConfiguration.fileFilter')}
|
||||
</FormLabel>
|
||||
</div>
|
||||
|
||||
<div className="text-muted-foreground">
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder={t('dataFlowPlaceholder')}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex pt-1">
|
||||
<div className="w-full"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex justify-end gap-1">
|
||||
<Button type="reset" variant={'outline'} className="btn-primary">
|
||||
{t('modal.cancelText')}
|
||||
</Button>
|
||||
<Button type="submit" variant={'default'} className="btn-primary">
|
||||
{t('modal.okText')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
export default LinkDataPipelineModal;
|
||||
@ -9,6 +9,9 @@ export function ConfigurationFormContainer({
|
||||
return <section className={cn('space-y-4', className)}>{children}</section>;
|
||||
}
|
||||
|
||||
export function MainContainer({ children }: PropsWithChildren) {
|
||||
return <section className="space-y-5">{children}</section>;
|
||||
export function MainContainer({
|
||||
children,
|
||||
className,
|
||||
}: PropsWithChildren & { className?: string }) {
|
||||
return <section className={cn('space-y-5', className)}>{children}</section>;
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { SelectWithSearch } from '@/components/originui/select-with-search';
|
||||
import {
|
||||
FormControl,
|
||||
FormField,
|
||||
@ -10,15 +11,18 @@ import { RAGFlowSelect } from '@/components/ui/select';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { ArrowUpRight } from 'lucide-react';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import {
|
||||
useHasParsedDocument,
|
||||
useSelectChunkMethodList,
|
||||
useSelectEmbeddingModelOptions,
|
||||
} from '../hooks';
|
||||
|
||||
export function ChunkMethodItem() {
|
||||
interface IProps {
|
||||
line?: 1 | 2;
|
||||
isEdit?: boolean;
|
||||
}
|
||||
export function ChunkMethodItem(props: IProps) {
|
||||
const { line } = props;
|
||||
const { t } = useTranslate('knowledgeConfiguration');
|
||||
const form = useFormContext();
|
||||
// const handleChunkMethodSelectChange = useHandleChunkMethodSelectChange(form);
|
||||
@ -29,28 +33,29 @@ export function ChunkMethodItem() {
|
||||
control={form.control}
|
||||
name={'parser_id'}
|
||||
render={({ field }) => (
|
||||
<FormItem className=" items-center space-y-0 ">
|
||||
<div className="flex items-center">
|
||||
<FormItem className=" items-center space-y-1">
|
||||
<div className={line === 1 ? 'flex items-center' : ''}>
|
||||
<FormLabel
|
||||
required
|
||||
tooltip={t('chunkMethodTip')}
|
||||
className="text-sm text-muted-foreground whitespace-wrap w-1/4"
|
||||
className={cn('text-sm', {
|
||||
'w-1/4 whitespace-pre-wrap': line === 1,
|
||||
})}
|
||||
>
|
||||
{t('chunkMethod')}
|
||||
</FormLabel>
|
||||
<div className="w-3/4 ">
|
||||
<div className={line === 1 ? 'w-3/4 ' : 'w-full'}>
|
||||
<FormControl>
|
||||
<RAGFlowSelect
|
||||
{...field}
|
||||
options={parserList}
|
||||
placeholder={t('chunkMethodPlaceholder')}
|
||||
// onChange={handleChunkMethodSelectChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex pt-1">
|
||||
<div className="w-1/4"></div>
|
||||
<div className={line === 1 ? 'w-1/4' : ''}></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
@ -58,49 +63,55 @@ export function ChunkMethodItem() {
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function EmbeddingModelItem({ line = 1 }: { line?: 1 | 2 }) {
|
||||
export function EmbeddingModelItem({ line = 1, isEdit = true }: IProps) {
|
||||
const { t } = useTranslate('knowledgeConfiguration');
|
||||
const form = useFormContext();
|
||||
const embeddingModelOptions = useSelectEmbeddingModelOptions();
|
||||
const disabled = useHasParsedDocument();
|
||||
|
||||
const disabled = useHasParsedDocument(isEdit);
|
||||
return (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={'embd_id'}
|
||||
render={({ field }) => (
|
||||
<FormItem className=" items-center space-y-0 ">
|
||||
<div className={cn({ 'flex items-center': line === 1 })}>
|
||||
<FormLabel
|
||||
required
|
||||
tooltip={t('embeddingModelTip')}
|
||||
className={cn('text-sm whitespace-wrap ', {
|
||||
'w-1/4': line === 1,
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={'embd_id'}
|
||||
render={({ field }) => (
|
||||
<FormItem className={cn(' items-center space-y-0 ')}>
|
||||
<div
|
||||
className={cn('flex', {
|
||||
' items-center': line === 1,
|
||||
'flex-col gap-1': line === 2,
|
||||
})}
|
||||
>
|
||||
{t('embeddingModel')}
|
||||
</FormLabel>
|
||||
<div
|
||||
className={cn('text-muted-foreground', { 'w-3/4': line === 1 })}
|
||||
>
|
||||
<FormControl>
|
||||
<RAGFlowSelect
|
||||
{...field}
|
||||
options={embeddingModelOptions}
|
||||
disabled={disabled}
|
||||
placeholder={t('embeddingModelPlaceholder')}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel
|
||||
required
|
||||
tooltip={t('embeddingModelTip')}
|
||||
className={cn('text-sm whitespace-wrap ', {
|
||||
'w-1/4': line === 1,
|
||||
})}
|
||||
>
|
||||
{t('embeddingModel')}
|
||||
</FormLabel>
|
||||
<div
|
||||
className={cn('text-muted-foreground', { 'w-3/4': line === 1 })}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectWithSearch
|
||||
onChange={field.onChange}
|
||||
value={field.value}
|
||||
options={embeddingModelOptions}
|
||||
disabled={isEdit ? disabled : false}
|
||||
placeholder={t('embeddingModelPlaceholder')}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex pt-1">
|
||||
<div className="w-1/4"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex pt-1">
|
||||
<div className={line === 1 ? 'w-1/4' : ''}></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -142,155 +153,6 @@ export function ParseTypeItem() {
|
||||
);
|
||||
}
|
||||
|
||||
export function DataFlowItem() {
|
||||
const { t } = useTranslate('knowledgeConfiguration');
|
||||
const form = useFormContext();
|
||||
|
||||
return (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={'data_flow'}
|
||||
render={({ field }) => (
|
||||
<FormItem className=" items-center space-y-0 ">
|
||||
<div className="">
|
||||
<div className="flex gap-2 justify-between ">
|
||||
<FormLabel
|
||||
tooltip={t('dataFlowTip')}
|
||||
className="text-sm text-text-primary whitespace-wrap "
|
||||
>
|
||||
{t('dataFlow')}
|
||||
</FormLabel>
|
||||
<div className="text-sm flex text-text-primary">
|
||||
{t('buildItFromScratch')}
|
||||
<ArrowUpRight size={14} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-muted-foreground">
|
||||
<FormControl>
|
||||
<RAGFlowSelect
|
||||
{...field}
|
||||
placeholder={t('dataFlowPlaceholder')}
|
||||
options={[{ value: '0', label: t('dataFlowDefault') }]}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex pt-1">
|
||||
<div className="w-1/4"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function DataExtractKnowledgeItem() {
|
||||
const { t } = useTranslate('knowledgeConfiguration');
|
||||
const form = useFormContext();
|
||||
|
||||
return (
|
||||
<>
|
||||
{' '}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={'extractKnowledgeGraph'}
|
||||
render={({ field }) => (
|
||||
<FormItem className=" items-center space-y-0 ">
|
||||
<div className="">
|
||||
<FormLabel
|
||||
tooltip={t('extractKnowledgeGraphTip')}
|
||||
className="text-sm whitespace-wrap "
|
||||
>
|
||||
{t('extractKnowledgeGraph')}
|
||||
</FormLabel>
|
||||
<div className="text-muted-foreground">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex pt-1">
|
||||
<div className="w-1/4"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>{' '}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={'useRAPTORToEnhanceRetrieval'}
|
||||
render={({ field }) => (
|
||||
<FormItem className=" items-center space-y-0 ">
|
||||
<div className="">
|
||||
<FormLabel
|
||||
tooltip={t('useRAPTORToEnhanceRetrievalTip')}
|
||||
className="text-sm whitespace-wrap "
|
||||
>
|
||||
{t('useRAPTORToEnhanceRetrieval')}
|
||||
</FormLabel>
|
||||
<div className="text-muted-foreground">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex pt-1">
|
||||
<div className="w-1/4"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function TeamItem() {
|
||||
const { t } = useTranslate('knowledgeConfiguration');
|
||||
const form = useFormContext();
|
||||
|
||||
return (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={'team'}
|
||||
render={({ field }) => (
|
||||
<FormItem className=" items-center space-y-0 ">
|
||||
<div className="">
|
||||
<FormLabel
|
||||
tooltip={t('teamTip')}
|
||||
className="text-sm whitespace-wrap "
|
||||
>
|
||||
<span className="text-destructive mr-1"> *</span>
|
||||
{t('team')}
|
||||
</FormLabel>
|
||||
<div className="text-muted-foreground">
|
||||
<FormControl>
|
||||
<RAGFlowSelect
|
||||
{...field}
|
||||
placeholder={t('teamPlaceholder')}
|
||||
options={[{ value: '0', label: t('teamDefault') }]}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex pt-1">
|
||||
<div className="w-1/4"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function EnableAutoGenerateItem() {
|
||||
const { t } = useTranslate('knowledgeConfiguration');
|
||||
const form = useFormContext();
|
||||
|
||||
@ -71,3 +71,8 @@ export const formSchema = z.object({
|
||||
pagerank: z.number(),
|
||||
// icon: z.array(z.instanceof(File)),
|
||||
});
|
||||
|
||||
export const linkPiplineFormSchema = z.object({
|
||||
data_flow: z.array(z.string()),
|
||||
file_filter: z.string().optional(),
|
||||
});
|
||||
|
||||
@ -17,14 +17,14 @@ export function GeneralForm() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<section className="space-y-4">
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem className="items-center space-y-0">
|
||||
<div className="flex">
|
||||
<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('common.name')}
|
||||
</FormLabel>
|
||||
@ -45,7 +45,7 @@ export function GeneralForm() {
|
||||
render={({ field }) => (
|
||||
<FormItem className="items-center space-y-0">
|
||||
<div className="flex">
|
||||
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
|
||||
<FormLabel className="text-sm whitespace-nowrap w-1/4">
|
||||
{t('setting.avatar')}
|
||||
</FormLabel>
|
||||
<FormControl className="w-3/4">
|
||||
@ -70,7 +70,7 @@ export function GeneralForm() {
|
||||
return (
|
||||
<FormItem className="items-center space-y-0">
|
||||
<div className="flex">
|
||||
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
|
||||
<FormLabel className="text-sm whitespace-nowrap w-1/4">
|
||||
{t('flow.description')}
|
||||
</FormLabel>
|
||||
<FormControl className="w-3/4">
|
||||
@ -87,6 +87,6 @@ export function GeneralForm() {
|
||||
/>
|
||||
<PermissionFormField></PermissionFormField>
|
||||
<EmbeddingModelItem></EmbeddingModelItem>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -25,8 +25,10 @@ export function useSelectEmbeddingModelOptions() {
|
||||
return allOptions[LlmModelType.Embedding];
|
||||
}
|
||||
|
||||
export function useHasParsedDocument() {
|
||||
const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration();
|
||||
export function useHasParsedDocument(isEdit?: boolean) {
|
||||
const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration({
|
||||
isEdit,
|
||||
});
|
||||
return knowledgeDetails.chunk_num > 0;
|
||||
}
|
||||
|
||||
@ -52,7 +54,7 @@ export const useFetchKnowledgeConfigurationOnMount = (
|
||||
'pagerank',
|
||||
'avatar',
|
||||
]),
|
||||
};
|
||||
} as z.infer<typeof formSchema>;
|
||||
form.reset(formValues);
|
||||
}, [form, knowledgeDetails]);
|
||||
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
|
||||
import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Divider from '@/components/ui/divider';
|
||||
import { Form } from '@/components/ui/form';
|
||||
import { DocumentParserType } from '@/constants/knowledge';
|
||||
import { PermissionRole } from '@/constants/permission';
|
||||
@ -6,11 +10,12 @@ import { useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { z } from 'zod';
|
||||
import { TopTitle } from '../dataset-title';
|
||||
import { ChunkMethodForm } from './chunk-method-form';
|
||||
import LinkDataPipeline from './components/link-data-pipeline';
|
||||
import { MainContainer } from './configuration-form-container';
|
||||
import { formSchema } from './form-schema';
|
||||
import { GeneralForm } from './general-form';
|
||||
import { useFetchKnowledgeConfigurationOnMount } from './hooks';
|
||||
|
||||
import { SavingButton } from './saving-button';
|
||||
const enum DocumentType {
|
||||
DeepDOC = 'DeepDOC',
|
||||
PlainText = 'Plain Text',
|
||||
@ -76,9 +81,29 @@ export default function DatasetSettings() {
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="space-y-6 flex-1"
|
||||
>
|
||||
<div className="w-[768px]">
|
||||
<GeneralForm></GeneralForm>
|
||||
<ChunkMethodForm></ChunkMethodForm>
|
||||
<div className="w-[768px] h-[calc(100vh-240px)] pr-1 overflow-y-auto scrollbar-auto">
|
||||
<MainContainer className="text-text-secondary">
|
||||
<GeneralForm></GeneralForm>
|
||||
<Divider />
|
||||
|
||||
<GraphRagItems className="border-none p-0"></GraphRagItems>
|
||||
<Divider />
|
||||
<RaptorFormFields></RaptorFormFields>
|
||||
<Divider />
|
||||
<LinkDataPipeline />
|
||||
</MainContainer>
|
||||
</div>
|
||||
<div className="text-right items-center flex justify-end gap-3 w-[768px]">
|
||||
<Button
|
||||
type="reset"
|
||||
className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
|
||||
onClick={() => {
|
||||
form.reset();
|
||||
}}
|
||||
>
|
||||
{t('knowledgeConfiguration.cancel')}
|
||||
</Button>
|
||||
<SavingButton></SavingButton>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
|
||||
import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
|
||||
import {
|
||||
ConfigurationFormContainer,
|
||||
MainContainer,
|
||||
} from './configuration-form-container';
|
||||
import { EnableAutoGenerateItem } from './configuration/common-item';
|
||||
|
||||
export function NaiveConfiguration() {
|
||||
return (
|
||||
<MainContainer>
|
||||
<GraphRagItems className="border-none p-0"></GraphRagItems>
|
||||
<ConfigurationFormContainer>
|
||||
<RaptorFormFields></RaptorFormFields>
|
||||
</ConfigurationFormContainer>
|
||||
<EnableAutoGenerateItem />
|
||||
{/* <ConfigurationFormContainer>
|
||||
<ChunkMethodItem></ChunkMethodItem>
|
||||
<LayoutRecognizeFormField></LayoutRecognizeFormField>
|
||||
|
||||
<MaxTokenNumberFormField initialValue={512}></MaxTokenNumberFormField>
|
||||
<DelimiterFormField></DelimiterFormField>
|
||||
</ConfigurationFormContainer>
|
||||
<ConfigurationFormContainer>
|
||||
<PageRankFormField></PageRankFormField>
|
||||
<AutoKeywordsFormField></AutoKeywordsFormField>
|
||||
<AutoQuestionsFormField></AutoQuestionsFormField>
|
||||
<ExcelToHtmlFormField></ExcelToHtmlFormField>
|
||||
<TagItems></TagItems>
|
||||
</ConfigurationFormContainer> */}
|
||||
</MainContainer>
|
||||
);
|
||||
}
|
||||
@ -29,6 +29,8 @@ import { useFetchDocumentList } from '@/hooks/use-document-request';
|
||||
import { getExtension } from '@/utils/document-util';
|
||||
import { pick } from 'lodash';
|
||||
import { useMemo } from 'react';
|
||||
import ProcessLogModal from '../process-log-modal';
|
||||
import { useShowLog } from './hooks';
|
||||
import { SetMetaDialog } from './set-meta-dialog';
|
||||
import { useChangeDocumentParser } from './use-change-document-parser';
|
||||
import { useDatasetTableColumns } from './use-dataset-table-columns';
|
||||
@ -81,11 +83,13 @@ export function DatasetTable({
|
||||
onSetMetaModalOk,
|
||||
metaRecord,
|
||||
} = useSaveMeta();
|
||||
const { showLog, logInfo, logVisible, hideLog } = useShowLog(documents);
|
||||
|
||||
const columns = useDatasetTableColumns({
|
||||
showChangeParserModal,
|
||||
showRenameModal,
|
||||
showSetMetaModal,
|
||||
showLog,
|
||||
});
|
||||
|
||||
const currentPagination = useMemo(() => {
|
||||
@ -207,6 +211,13 @@ export function DatasetTable({
|
||||
initialMetaData={metaRecord.meta_fields}
|
||||
></SetMetaDialog>
|
||||
)}
|
||||
{logVisible && (
|
||||
<ProcessLogModal
|
||||
visible={logVisible}
|
||||
onCancel={() => hideLog()}
|
||||
logInfo={logInfo}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
113
web/src/pages/dataset/dataset/generate-button/generate.tsx
Normal file
113
web/src/pages/dataset/dataset/generate-button/generate.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
import { IconFontFill } from '@/components/icon-font';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { toFixed } from '@/utils/common-util';
|
||||
import { t } from 'i18next';
|
||||
import { lowerFirst } from 'lodash';
|
||||
import { CirclePause, WandSparkles } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { generateStatus, useFetchGenerateData } from './hook';
|
||||
|
||||
const MenuItem: React.FC<{ name: 'KnowledgeGraph' | 'Raptor' }> = ({
|
||||
name,
|
||||
}) => {
|
||||
console.log(name, 'pppp');
|
||||
const iconKeyMap = {
|
||||
KnowledgeGraph: 'knowledgegraph',
|
||||
Raptor: 'dataflow-01',
|
||||
};
|
||||
const {
|
||||
data: { percent, type },
|
||||
pauseGenerate,
|
||||
} = useFetchGenerateData();
|
||||
return (
|
||||
<div className="flex items-start gap-2 flex-col w-full">
|
||||
<div className="flex justify-start text-text-primary items-center gap-2">
|
||||
<IconFontFill name={iconKeyMap[name]} className="text-accent-primary" />
|
||||
{t(`knowledgeDetails.${lowerFirst(name)}`)}
|
||||
</div>
|
||||
{type === generateStatus.start && (
|
||||
<div className="text-text-secondary text-sm">
|
||||
{t(`knowledgeDetails.generate${name}`)}
|
||||
</div>
|
||||
)}
|
||||
{type === generateStatus.running && (
|
||||
<div className="flex justify-between items-center w-full">
|
||||
<div className="w-[calc(100%-100px)] bg-border-button h-1 rounded-full">
|
||||
<div
|
||||
className="h-1 bg-accent-primary rounded-full"
|
||||
style={{ width: `${toFixed(percent)}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span>{toFixed(percent) as string}%</span>
|
||||
<span
|
||||
className="text-state-error"
|
||||
onClick={() => {
|
||||
pauseGenerate();
|
||||
}}
|
||||
>
|
||||
<CirclePause />
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Generate: React.FC = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const handleOpenChange = (isOpen: boolean) => {
|
||||
setOpen(isOpen);
|
||||
console.log('Dropdown is now', isOpen ? 'open' : 'closed');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="generate">
|
||||
<DropdownMenu open={open} onOpenChange={handleOpenChange}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant={'transparent'}
|
||||
onClick={() => {
|
||||
handleOpenChange(!open);
|
||||
}}
|
||||
>
|
||||
<WandSparkles className="mr-2" />
|
||||
{t('knowledgeDetails.generate')}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-[380px] p-5 ">
|
||||
<DropdownMenuItem
|
||||
className="border cursor-pointer p-2 rounded-md hover:border-accent-primary hover:bg-[rgba(59,160,92,0.1)]"
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<MenuItem name="KnowledgeGraph" />
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="border cursor-pointer p-2 rounded-md mt-3 hover:border-accent-primary hover:bg-[rgba(59,160,92,0.1)]"
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<MenuItem name="Raptor" />
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Generate;
|
||||
32
web/src/pages/dataset/dataset/generate-button/hook.ts
Normal file
32
web/src/pages/dataset/dataset/generate-button/hook.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useCallback } from 'react';
|
||||
export const generateStatus = {
|
||||
running: 'running',
|
||||
completed: 'completed',
|
||||
start: 'start',
|
||||
};
|
||||
const useFetchGenerateData = () => {
|
||||
let number = 10;
|
||||
// TODO: 获取数据
|
||||
const { data, isFetching: loading } = useQuery({
|
||||
queryKey: ['generateData', 'id'],
|
||||
initialData: { id: 0, percent: 0, type: 'running' },
|
||||
gcTime: 0,
|
||||
refetchInterval: 3000,
|
||||
queryFn: async () => {
|
||||
number += Math.random() * 10;
|
||||
const data = {
|
||||
id: Math.random(),
|
||||
percent: number,
|
||||
type: generateStatus.running,
|
||||
};
|
||||
return data;
|
||||
},
|
||||
});
|
||||
const pauseGenerate = useCallback(() => {
|
||||
// TODO: pause generate
|
||||
console.log('pause generate');
|
||||
}, []);
|
||||
return { data, loading, pauseGenerate };
|
||||
};
|
||||
export { useFetchGenerateData };
|
||||
@ -1,68 +0,0 @@
|
||||
import SvgIcon from '@/components/svg-icon';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { t } from 'i18next';
|
||||
import { lowerFirst, toLower } from 'lodash';
|
||||
import { WandSparkles } from 'lucide-react';
|
||||
|
||||
const MenuItem: React.FC<{ name: 'KnowledgeGraph' | 'Raptor' }> = ({
|
||||
name,
|
||||
}) => {
|
||||
console.log(name, 'pppp');
|
||||
return (
|
||||
<div className="flex items-start gap-2 flex-col">
|
||||
<div className="flex justify-start text-text-primary items-center gap-2">
|
||||
<SvgIcon name={`data-flow/${toLower(name)}`} width={24}></SvgIcon>
|
||||
{t(`knowledgeDetails.${lowerFirst(name)}`)}
|
||||
</div>
|
||||
<div className="text-text-secondary text-sm">
|
||||
{t(`knowledgeDetails.generate${name}`)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Generate: React.FC = () => {
|
||||
return (
|
||||
<div className="generate">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant={'transparent'}>
|
||||
<WandSparkles className="mr-2" />
|
||||
{t('knowledgeDetails.generate')}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-[380px] p-2 ">
|
||||
<DropdownMenuItem className="border cursor-pointer p-2 rounded-md hover:border-accent-primary hover:bg-[rgba(59,160,92,0.1)]">
|
||||
<MenuItem name="KnowledgeGraph" />
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="border cursor-pointer p-2 rounded-md mt-3 hover:border-accent-primary hover:bg-[rgba(59,160,92,0.1)]"
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<MenuItem name="Raptor" />
|
||||
{/* <div className="flex items-start gap-2 flex-col">
|
||||
<div className="flex items-center gap-2">
|
||||
<SvgIcon name={`data-flow/raptor`} width={24}></SvgIcon>
|
||||
{t('knowledgeDetails.raptor')}
|
||||
</div>
|
||||
<div>{t('knowledgeDetails.generateRaptor')}</div>
|
||||
</div> */}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Generate;
|
||||
@ -1,8 +1,10 @@
|
||||
import { useSetModalState } from '@/hooks/common-hooks';
|
||||
import { useNextWebCrawl } from '@/hooks/document-hooks';
|
||||
import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { IDocumentInfo } from '@/interfaces/database/document';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { useNavigate } from 'umi';
|
||||
import { ILogInfo } from '../process-log-modal';
|
||||
|
||||
export const useNavigateToOtherPage = () => {
|
||||
const navigate = useNavigate();
|
||||
@ -58,3 +60,41 @@ export const useHandleWebCrawl = () => {
|
||||
showWebCrawlUploadModal,
|
||||
};
|
||||
};
|
||||
|
||||
export const useShowLog = (documents: IDocumentInfo[]) => {
|
||||
const { showModal, hideModal, visible } = useSetModalState();
|
||||
const [record, setRecord] = useState<IDocumentInfo>();
|
||||
const logInfo = useMemo(() => {
|
||||
const findRecord = documents.find(
|
||||
(item: IDocumentInfo) => item.id === record?.id,
|
||||
);
|
||||
let log: ILogInfo = {
|
||||
taskId: record?.id,
|
||||
fileName: record?.name || '-',
|
||||
details: record?.progress_msg || '-',
|
||||
};
|
||||
if (findRecord) {
|
||||
log = {
|
||||
taskId: findRecord.id,
|
||||
fileName: findRecord.name,
|
||||
fileSize: findRecord.size + '',
|
||||
source: findRecord.source_type,
|
||||
task: findRecord.status,
|
||||
state: findRecord.run,
|
||||
startTime: findRecord.process_begin_at,
|
||||
endTime: findRecord.process_begin_at,
|
||||
duration: findRecord.process_duration + 's',
|
||||
details: findRecord.progress_msg,
|
||||
};
|
||||
}
|
||||
return log;
|
||||
}, [record, documents]);
|
||||
const showLog = useCallback(
|
||||
(data: IDocumentInfo) => {
|
||||
setRecord(data);
|
||||
showModal();
|
||||
},
|
||||
[showModal],
|
||||
);
|
||||
return { showLog, hideLog: hideModal, logVisible: visible, logInfo };
|
||||
};
|
||||
|
||||
@ -15,7 +15,7 @@ import { useFetchDocumentList } from '@/hooks/use-document-request';
|
||||
import { Upload } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { DatasetTable } from './dataset-table';
|
||||
import Generate from './generate';
|
||||
import Generate from './generate-button/generate';
|
||||
import { useBulkOperateDataset } from './use-bulk-operate-dataset';
|
||||
import { useCreateEmptyDocument } from './use-create-empty-document';
|
||||
import { useSelectDatasetFilters } from './use-select-filters';
|
||||
|
||||
@ -11,6 +11,7 @@ import { RunningStatus, RunningStatusMap } from './constant';
|
||||
|
||||
interface IProps {
|
||||
record: IDocumentInfo;
|
||||
handleShowLog?: (record: IDocumentInfo) => void;
|
||||
}
|
||||
|
||||
function Dot({ run }: { run: RunningStatus }) {
|
||||
@ -85,11 +86,16 @@ export const PopoverContent = ({ record }: IProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export function ParsingCard({ record }: IProps) {
|
||||
export function ParsingCard({ record, handleShowLog }: IProps) {
|
||||
return (
|
||||
<HoverCard>
|
||||
<HoverCardTrigger asChild>
|
||||
<Button variant={'transparent'} className="border-none" size={'sm'}>
|
||||
<Button
|
||||
variant={'transparent'}
|
||||
className="border-none"
|
||||
size={'sm'}
|
||||
onClick={() => handleShowLog?.(record)}
|
||||
>
|
||||
<Dot run={record.run}></Dot>
|
||||
</Button>
|
||||
</HoverCardTrigger>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
|
||||
import { IconFontFill } from '@/components/icon-font';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
@ -14,7 +15,7 @@ import {
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { IDocumentInfo } from '@/interfaces/database/document';
|
||||
import { CircleX, RefreshCw } from 'lucide-react';
|
||||
import { CircleX } from 'lucide-react';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { DocumentType, RunningStatus } from './constant';
|
||||
@ -28,16 +29,26 @@ const IconMap = {
|
||||
<div className="w-0 h-0 border-l-[10px] border-l-accent-primary border-t-8 border-r-4 border-b-8 border-transparent"></div>
|
||||
),
|
||||
[RunningStatus.RUNNING]: <CircleX size={14} color="var(--state-error)" />,
|
||||
[RunningStatus.CANCEL]: <RefreshCw size={14} color="var(--accent-primary)" />,
|
||||
[RunningStatus.DONE]: <RefreshCw size={14} color="var(--accent-primary)" />,
|
||||
[RunningStatus.FAIL]: <RefreshCw size={14} color="var(--accent-primary)" />,
|
||||
[RunningStatus.CANCEL]: (
|
||||
<IconFontFill name="reparse" className="text-accent-primary" />
|
||||
),
|
||||
[RunningStatus.DONE]: (
|
||||
<IconFontFill name="reparse" className="text-accent-primary" />
|
||||
),
|
||||
[RunningStatus.FAIL]: (
|
||||
<IconFontFill name="reparse" className="text-accent-primary" />
|
||||
),
|
||||
};
|
||||
|
||||
export function ParsingStatusCell({
|
||||
record,
|
||||
showChangeParserModal,
|
||||
showSetMetaModal,
|
||||
}: { record: IDocumentInfo } & UseChangeDocumentParserShowType &
|
||||
showLog,
|
||||
}: {
|
||||
record: IDocumentInfo;
|
||||
showLog: (record: IDocumentInfo) => void;
|
||||
} & UseChangeDocumentParserShowType &
|
||||
UseSaveMetaShowType) {
|
||||
const { t } = useTranslation();
|
||||
const { run, parser_id, progress, chunk_num, id } = record;
|
||||
@ -65,6 +76,9 @@ export function ParsingStatusCell({
|
||||
return record.type !== DocumentType.Virtual;
|
||||
}, [record]);
|
||||
|
||||
const handleShowLog = (record: IDocumentInfo) => {
|
||||
showLog(record);
|
||||
};
|
||||
return (
|
||||
<section className="flex gap-8 items-center">
|
||||
<div className="w-[100px] text-ellipsis overflow-hidden flex items-center justify-between">
|
||||
@ -85,41 +99,64 @@ export function ParsingStatusCell({
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
{showParse && (
|
||||
<>
|
||||
<ConfirmDeleteDialog
|
||||
title={t(`knowledgeDetails.redo`, { chunkNum: chunk_num })}
|
||||
hidden={isZeroChunk || isRunning}
|
||||
onOk={handleOperationIconClick(true)}
|
||||
onCancel={handleOperationIconClick(false)}
|
||||
>
|
||||
<div
|
||||
className="cursor-pointer flex items-center gap-3"
|
||||
onClick={
|
||||
isZeroChunk || isRunning
|
||||
? handleOperationIconClick(false)
|
||||
: () => {}
|
||||
}
|
||||
<div className="flex items-center gap-3">
|
||||
<Separator orientation="vertical" className="h-2.5" />
|
||||
{!isParserRunning(run) && (
|
||||
<ConfirmDeleteDialog
|
||||
title={t(`knowledgeDetails.redo`, { chunkNum: chunk_num })}
|
||||
hidden={isZeroChunk || isRunning}
|
||||
onOk={handleOperationIconClick(true)}
|
||||
onCancel={handleOperationIconClick(false)}
|
||||
>
|
||||
<Separator orientation="vertical" className="h-2.5" />
|
||||
{operationIcon}
|
||||
</div>
|
||||
</ConfirmDeleteDialog>
|
||||
{isParserRunning(run) ? (
|
||||
<HoverCard>
|
||||
<HoverCardTrigger asChild>
|
||||
<div className="flex items-center gap-1">
|
||||
<Progress value={p} className="h-1 flex-1 min-w-10" />
|
||||
{p}%
|
||||
</div>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent className="w-[40vw]">
|
||||
<PopoverContent record={record}></PopoverContent>
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
) : (
|
||||
<ParsingCard record={record}></ParsingCard>
|
||||
<div
|
||||
className="cursor-pointer flex items-center gap-3"
|
||||
onClick={
|
||||
isZeroChunk || isRunning
|
||||
? handleOperationIconClick(false)
|
||||
: () => {}
|
||||
}
|
||||
>
|
||||
{!isParserRunning(run) && operationIcon}
|
||||
</div>
|
||||
</ConfirmDeleteDialog>
|
||||
)}
|
||||
</>
|
||||
{isParserRunning(run) ? (
|
||||
<>
|
||||
<HoverCard>
|
||||
<HoverCardTrigger asChild>
|
||||
<div
|
||||
className="flex items-center gap-1"
|
||||
onClick={() => handleShowLog(record)}
|
||||
>
|
||||
<Progress value={p} className="h-1 flex-1 min-w-10" />
|
||||
{p}%
|
||||
</div>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent className="w-[40vw]">
|
||||
<PopoverContent
|
||||
record={record}
|
||||
handleShowLog={handleShowLog}
|
||||
></PopoverContent>
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
<div
|
||||
className="cursor-pointer flex items-center gap-3"
|
||||
onClick={
|
||||
isZeroChunk || isRunning
|
||||
? handleOperationIconClick(false)
|
||||
: () => {}
|
||||
}
|
||||
>
|
||||
{operationIcon}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<ParsingCard
|
||||
record={record}
|
||||
handleShowLog={handleShowLog}
|
||||
></ParsingCard>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -23,12 +23,13 @@ import { UseSaveMetaShowType } from './use-save-meta';
|
||||
|
||||
type UseDatasetTableColumnsType = UseChangeDocumentParserShowType &
|
||||
UseRenameDocumentShowType &
|
||||
UseSaveMetaShowType;
|
||||
UseSaveMetaShowType & { showLog: (record: IDocumentInfo) => void };
|
||||
|
||||
export function useDatasetTableColumns({
|
||||
showChangeParserModal,
|
||||
showRenameModal,
|
||||
showSetMetaModal,
|
||||
showLog,
|
||||
}: UseDatasetTableColumnsType) {
|
||||
const { t } = useTranslation('translation', {
|
||||
keyPrefix: 'knowledgeDetails',
|
||||
@ -151,6 +152,7 @@ export function useDatasetTableColumns({
|
||||
record={row.original}
|
||||
showChangeParserModal={showChangeParserModal}
|
||||
showSetMetaModal={showSetMetaModal}
|
||||
showLog={showLog}
|
||||
></ParsingStatusCell>
|
||||
);
|
||||
},
|
||||
|
||||
132
web/src/pages/dataset/process-log-modal.tsx
Normal file
132
web/src/pages/dataset/process-log-modal.tsx
Normal file
@ -0,0 +1,132 @@
|
||||
import FileStatusBadge from '@/components/file-status-badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Modal } from '@/components/ui/modal/modal';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
import React from 'react';
|
||||
import reactStringReplace from 'react-string-replace';
|
||||
export interface ILogInfo {
|
||||
taskId?: string;
|
||||
fileName: string;
|
||||
fileSize?: string;
|
||||
source?: string;
|
||||
task?: string;
|
||||
state?: 'Running' | 'Success' | 'Failed' | 'Pending';
|
||||
startTime?: string;
|
||||
endTime?: string;
|
||||
duration?: string;
|
||||
details: string;
|
||||
}
|
||||
|
||||
interface ProcessLogModalProps {
|
||||
visible: boolean;
|
||||
onCancel: () => void;
|
||||
logInfo: ILogInfo;
|
||||
}
|
||||
|
||||
const InfoItem: React.FC<{
|
||||
label: string;
|
||||
value: string | React.ReactNode;
|
||||
className?: string;
|
||||
}> = ({ label, value, className = '' }) => {
|
||||
return (
|
||||
<div className={`flex flex-col mb-4 ${className}`}>
|
||||
<span className="text-text-secondary text-sm">{label}</span>
|
||||
<span className="text-text-primary mt-1">{value}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ProcessLogModal: React.FC<ProcessLogModalProps> = ({
|
||||
visible,
|
||||
onCancel,
|
||||
logInfo,
|
||||
}) => {
|
||||
const { t } = useTranslate('knowledgeDetails');
|
||||
const blackKeyList = [''];
|
||||
const replaceText = (text: string) => {
|
||||
// Remove duplicate \n
|
||||
const nextText = text.replace(/(\n)\1+/g, '$1');
|
||||
|
||||
const replacedText = reactStringReplace(
|
||||
nextText,
|
||||
/(\[ERROR\].+\s)/g,
|
||||
(match, i) => {
|
||||
return (
|
||||
<span key={i} className={'text-red-600'}>
|
||||
{match}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
return replacedText;
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
title={t('processLog')}
|
||||
open={visible}
|
||||
onCancel={onCancel}
|
||||
footer={
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={onCancel}>{t('close')}</Button>
|
||||
</div>
|
||||
}
|
||||
className="process-log-modal"
|
||||
>
|
||||
<div className=" rounded-lg">
|
||||
<div className="flex flex-wrap ">
|
||||
{Object.keys(logInfo).map((key) => {
|
||||
if (blackKeyList.includes(key)) {
|
||||
return null;
|
||||
}
|
||||
if (key === 'details') {
|
||||
return (
|
||||
<div className="w-full" key={key}>
|
||||
<InfoItem
|
||||
label={t(key)}
|
||||
value={
|
||||
<div className="w-full whitespace-pre-line text-wrap bg-bg-card rounded-lg h-fit max-h-[350px] overflow-y-auto scrollbar-auto p-2.5">
|
||||
{replaceText(logInfo.details)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (key === 'Status') {
|
||||
return (
|
||||
<div className="flex flex-col" key={key}>
|
||||
<span className="text-text-secondary text-sm">Status</span>
|
||||
<div className="mt-1">
|
||||
<FileStatusBadge status={logInfo.state} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="w-1/2" key={key}>
|
||||
<InfoItem
|
||||
label={t(key)}
|
||||
value={logInfo[key as keyof typeof logInfo]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* <InfoItem label="Details" value={logInfo.details} /> */}
|
||||
{/* <div>
|
||||
<div>Details</div>
|
||||
<div>
|
||||
<ul className="space-y-2">
|
||||
<div className={'w-full whitespace-pre-line text-wrap '}>
|
||||
{replaceText(logInfo.details)}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProcessLogModal;
|
||||
@ -28,7 +28,7 @@ export function SideBar({ refreshCount }: PropType) {
|
||||
const pathName = useSecondPathName();
|
||||
const { handleMenuClick } = useHandleMenuClick();
|
||||
// refreshCount: be for avatar img sync update on top left
|
||||
const { data } = useFetchKnowledgeBaseConfiguration(refreshCount);
|
||||
const { data } = useFetchKnowledgeBaseConfiguration({ refreshCount });
|
||||
const { data: routerData } = useFetchKnowledgeGraph();
|
||||
const { t } = useTranslation();
|
||||
|
||||
@ -52,7 +52,7 @@ export function SideBar({ refreshCount }: PropType) {
|
||||
{
|
||||
icon: Banknote,
|
||||
label: t(`knowledgeDetails.configuration`),
|
||||
key: Routes.DatasetSetting,
|
||||
key: Routes.DataSetSetting,
|
||||
},
|
||||
];
|
||||
if (!isEmpty(routerData?.graph)) {
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { DataFlowSelect } from '@/components/data-pipeline-select';
|
||||
import { ButtonLoading } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
@ -15,17 +16,16 @@ import {
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
|
||||
import { IModalProps } from '@/interfaces/common';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useForm, useWatch } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { z } from 'zod';
|
||||
import {
|
||||
DataExtractKnowledgeItem,
|
||||
DataFlowItem,
|
||||
ChunkMethodItem,
|
||||
EmbeddingModelItem,
|
||||
ParseTypeItem,
|
||||
TeamItem,
|
||||
} from '../dataset/dataset-setting/configuration/common-item';
|
||||
|
||||
const FormId = 'dataset-creating-form';
|
||||
@ -33,31 +33,68 @@ const FormId = 'dataset-creating-form';
|
||||
export function InputForm({ onOk }: IModalProps<any>) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const FormSchema = z.object({
|
||||
name: z
|
||||
.string()
|
||||
.min(1, {
|
||||
message: t('knowledgeList.namePlaceholder'),
|
||||
})
|
||||
.trim(),
|
||||
parseType: z.number().optional(),
|
||||
});
|
||||
const FormSchema = z
|
||||
.object({
|
||||
name: z
|
||||
.string()
|
||||
.min(1, {
|
||||
message: t('knowledgeList.namePlaceholder'),
|
||||
})
|
||||
.trim(),
|
||||
parseType: z.number().optional(),
|
||||
embd_id: z
|
||||
.string()
|
||||
.min(1, {
|
||||
message: t('knowledgeConfiguration.embeddingModelPlaceholder'),
|
||||
})
|
||||
.trim(),
|
||||
parser_id: z.string().optional(),
|
||||
pipline_id: z.string().optional(),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
// When parseType === 1, parser_id is required
|
||||
if (
|
||||
data.parseType === 1 &&
|
||||
(!data.parser_id || data.parser_id.trim() === '')
|
||||
) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: t('knowledgeList.parserRequired'),
|
||||
path: ['parser_id'],
|
||||
});
|
||||
}
|
||||
|
||||
console.log('form-data', data);
|
||||
// When parseType === 1, pipline_id required
|
||||
if (data.parseType === 2 && !data.pipline_id) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: t('knowledgeList.dataFlowRequired'),
|
||||
path: ['pipline_id'],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const form = useForm<z.infer<typeof FormSchema>>({
|
||||
resolver: zodResolver(FormSchema),
|
||||
defaultValues: {
|
||||
name: '',
|
||||
parseType: 1,
|
||||
parser_id: '',
|
||||
embd_id: '',
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit(data: z.infer<typeof FormSchema>) {
|
||||
onOk?.(data.name);
|
||||
console.log('submit', data);
|
||||
onOk?.(data);
|
||||
}
|
||||
const parseType = useWatch({
|
||||
control: form.control,
|
||||
name: 'parseType',
|
||||
});
|
||||
const { navigateToAgents } = useNavigatePage();
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
@ -84,13 +121,20 @@ export function InputForm({ onOk }: IModalProps<any>) {
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<EmbeddingModelItem line={2} />
|
||||
<EmbeddingModelItem line={2} isEdit={false} />
|
||||
<ParseTypeItem />
|
||||
{parseType === 1 && (
|
||||
<>
|
||||
<ChunkMethodItem></ChunkMethodItem>
|
||||
</>
|
||||
)}
|
||||
{parseType === 2 && (
|
||||
<>
|
||||
<DataFlowItem />
|
||||
<DataExtractKnowledgeItem />
|
||||
<TeamItem />
|
||||
<DataFlowSelect
|
||||
isMult={false}
|
||||
toDataPipeline={navigateToAgents}
|
||||
formFieldName="pipline_id"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
@ -107,7 +151,7 @@ export function DatasetCreatingDialog({
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={hideModal}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogContent className="sm:max-w-[425px] focus-visible:!outline-none">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('knowledgeList.createKnowledgeBase')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
@ -2,7 +2,6 @@ import { useSetModalState } from '@/hooks/common-hooks';
|
||||
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
|
||||
import { useCreateKnowledge } from '@/hooks/use-knowledge-request';
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
export const useSearchKnowledge = () => {
|
||||
const [searchString, setSearchString] = useState<string>('');
|
||||
|
||||
@ -15,16 +14,19 @@ export const useSearchKnowledge = () => {
|
||||
};
|
||||
};
|
||||
|
||||
export interface Iknowledge {
|
||||
name: string;
|
||||
embd_id: string;
|
||||
parser_id: string;
|
||||
}
|
||||
export const useSaveKnowledge = () => {
|
||||
const { visible: visible, hideModal, showModal } = useSetModalState();
|
||||
const { loading, createKnowledge } = useCreateKnowledge();
|
||||
const { navigateToDataset } = useNavigatePage();
|
||||
|
||||
const onCreateOk = useCallback(
|
||||
async (name: string) => {
|
||||
const ret = await createKnowledge({
|
||||
name,
|
||||
});
|
||||
async (data: Iknowledge) => {
|
||||
const ret = await createKnowledge(data);
|
||||
|
||||
if (ret?.code === 0) {
|
||||
hideModal();
|
||||
|
||||
@ -1,116 +0,0 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Modal } from '@/components/ui/modal/modal';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
import React from 'react';
|
||||
|
||||
interface ProcessLogModalProps {
|
||||
visible: boolean;
|
||||
onCancel: () => void;
|
||||
taskInfo: {
|
||||
taskId: string;
|
||||
fileName: string;
|
||||
fileSize: string;
|
||||
source: string;
|
||||
task: string;
|
||||
state: 'Running' | 'Completed' | 'Failed' | 'Pending';
|
||||
startTime: string;
|
||||
endTime?: string;
|
||||
duration?: string;
|
||||
details: string;
|
||||
};
|
||||
}
|
||||
|
||||
const StatusTag: React.FC<{ state: string }> = ({ state }) => {
|
||||
const getTagStyle = () => {
|
||||
switch (state) {
|
||||
case 'Running':
|
||||
return 'bg-green-500 text-green-100';
|
||||
case 'Completed':
|
||||
return 'bg-blue-500 text-blue-100';
|
||||
case 'Failed':
|
||||
return 'bg-red-500 text-red-100';
|
||||
case 'Pending':
|
||||
return 'bg-yellow-500 text-yellow-100';
|
||||
default:
|
||||
return 'bg-gray-500 text-gray-100';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getTagStyle()}`}
|
||||
>
|
||||
<span className="w-1.5 h-1.5 rounded-full mr-1 bg-current"></span>
|
||||
{state}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const InfoItem: React.FC<{
|
||||
label: string;
|
||||
value: string | React.ReactNode;
|
||||
className?: string;
|
||||
}> = ({ label, value, className = '' }) => {
|
||||
return (
|
||||
<div className={`flex flex-col mb-4 ${className}`}>
|
||||
<span className="text-text-secondary text-sm">{label}</span>
|
||||
<span className="text-text-primary mt-1">{value}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ProcessLogModal: React.FC<ProcessLogModalProps> = ({
|
||||
visible,
|
||||
onCancel,
|
||||
taskInfo,
|
||||
}) => {
|
||||
const { t } = useTranslate('knowledgeDetails');
|
||||
return (
|
||||
<Modal
|
||||
title={t('processLog')}
|
||||
open={visible}
|
||||
onCancel={onCancel}
|
||||
footer={
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={onCancel}>{t('close')}</Button>
|
||||
</div>
|
||||
}
|
||||
className="process-log-modal"
|
||||
>
|
||||
<div className="p-6 rounded-lg">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Left Column */}
|
||||
<div className="space-y-4">
|
||||
<InfoItem label="Task ID" value={taskInfo.taskId} />
|
||||
<InfoItem label="File Name" value={taskInfo.fileName} />
|
||||
<InfoItem label="File Size" value={taskInfo.fileSize} />
|
||||
<InfoItem label="Source" value={taskInfo.source} />
|
||||
<InfoItem label="Task" value={taskInfo.task} />
|
||||
<InfoItem label="Details" value={taskInfo.details} />
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-text-secondary text-sm">States</span>
|
||||
<div className="mt-1">
|
||||
<StatusTag state={taskInfo.state} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoItem label="Start Time" value={taskInfo.startTime} />
|
||||
|
||||
<InfoItem label="End Time" value={taskInfo.endTime || '-'} />
|
||||
|
||||
<InfoItem
|
||||
label="Duration"
|
||||
value={taskInfo.duration ? `${taskInfo.duration}s` : '-'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProcessLogModal;
|
||||
@ -287,7 +287,7 @@ const routes = [
|
||||
],
|
||||
},
|
||||
{
|
||||
path: `${Routes.DataflowResult}/:id`,
|
||||
path: `${Routes.DataflowResult}`,
|
||||
layout: false,
|
||||
component: `@/pages${Routes.DataflowResult}`,
|
||||
},
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
import { IAgentLogsRequest } from '@/interfaces/database/agent';
|
||||
import {
|
||||
IAgentLogsRequest,
|
||||
IPipeLineListRequest,
|
||||
} from '@/interfaces/database/agent';
|
||||
import api from '@/utils/api';
|
||||
import { registerNextServer } from '@/utils/register-server';
|
||||
import request from '@/utils/request';
|
||||
@ -131,4 +134,8 @@ export const fetchAgentLogsByCanvasId = (
|
||||
return request.get(methods.fetchAgentLogs.url(canvasId), { params: params });
|
||||
};
|
||||
|
||||
export const fetchPipeLineList = (params: IPipeLineListRequest) => {
|
||||
return request.get(api.listCanvas, { params: params });
|
||||
};
|
||||
|
||||
export default agentService;
|
||||
|
||||
37
web/src/services/dataflow-service.ts
Normal file
37
web/src/services/dataflow-service.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import api from '@/utils/api';
|
||||
import { registerNextServer } from '@/utils/register-server';
|
||||
|
||||
const {
|
||||
listDataflow,
|
||||
removeDataflow,
|
||||
fetchDataflow,
|
||||
runDataflow,
|
||||
setDataflow,
|
||||
} = api;
|
||||
|
||||
const methods = {
|
||||
listDataflow: {
|
||||
url: listDataflow,
|
||||
method: 'get',
|
||||
},
|
||||
removeDataflow: {
|
||||
url: removeDataflow,
|
||||
method: 'post',
|
||||
},
|
||||
fetchDataflow: {
|
||||
url: fetchDataflow,
|
||||
method: 'get',
|
||||
},
|
||||
runDataflow: {
|
||||
url: runDataflow,
|
||||
method: 'post',
|
||||
},
|
||||
setDataflow: {
|
||||
url: setDataflow,
|
||||
method: 'post',
|
||||
},
|
||||
} as const;
|
||||
|
||||
const dataflowService = registerNextServer<keyof typeof methods>(methods);
|
||||
|
||||
export default dataflowService;
|
||||
171
web/src/stories/slider-input-form-field.stories.tsx
Normal file
171
web/src/stories/slider-input-form-field.stories.tsx
Normal file
@ -0,0 +1,171 @@
|
||||
import { Form } from '@/components/ui/form';
|
||||
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
import { SliderInputFormField } from '@/components/slider-input-form-field';
|
||||
import { FormLayout } from '@/constants/form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
||||
const meta = {
|
||||
title: 'Example/SliderInputFormField',
|
||||
component: SliderInputFormField,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
docs: {
|
||||
description: {
|
||||
component: `
|
||||
## Component Description
|
||||
|
||||
SliderInputFormField is a form field component that combines a slider and a numeric input field.
|
||||
It provides a user-friendly way to select numeric values within a specified range. `,
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
name: { control: 'text' },
|
||||
label: { control: 'text' },
|
||||
min: { control: 'number' },
|
||||
max: { control: 'number' },
|
||||
step: { control: 'number' },
|
||||
defaultValue: { control: 'number' },
|
||||
layout: {
|
||||
control: 'select',
|
||||
options: [FormLayout.Vertical, FormLayout.Horizontal],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
name: 'sliderValue',
|
||||
label: 'Slider Value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
defaultValue: 50,
|
||||
},
|
||||
} satisfies Meta<typeof SliderInputFormField>;
|
||||
|
||||
// Form wrapper decorator
|
||||
const WithFormProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const form = useForm({
|
||||
defaultValues: {},
|
||||
resolver: zodResolver(z.object({})),
|
||||
});
|
||||
return <Form {...form}>{children}</Form>;
|
||||
};
|
||||
|
||||
const withFormProvider = (Story: any) => (
|
||||
<WithFormProvider>
|
||||
<Story />
|
||||
</WithFormProvider>
|
||||
);
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
||||
export const Default: Story = {
|
||||
decorators: [withFormProvider],
|
||||
args: {
|
||||
name: 'sliderValue',
|
||||
label: 'Slider Value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
defaultValue: 50,
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: `
|
||||
### Basic Usage
|
||||
|
||||
\`\`\`tsx
|
||||
import { SliderInputFormField } from '@/components/slider-input-form-field';
|
||||
|
||||
<SliderInputFormField
|
||||
name="sliderValue"
|
||||
label="Slider Value"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
defaultValue={50}
|
||||
/>
|
||||
\`\`\`
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const HorizontalLayout: Story = {
|
||||
decorators: [withFormProvider],
|
||||
args: {
|
||||
name: 'horizontalSlider',
|
||||
label: 'Horizontal Slider',
|
||||
min: 0,
|
||||
max: 200,
|
||||
step: 5,
|
||||
defaultValue: 100,
|
||||
layout: FormLayout.Horizontal,
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: `
|
||||
### Horizontal Layout
|
||||
|
||||
\`\`\`tsx
|
||||
import { SliderInputFormField } from '@/components/slider-input-form-field';
|
||||
import { FormLayout } from '@/constants/form';
|
||||
|
||||
<SliderInputFormField
|
||||
name="horizontalSlider"
|
||||
label="Horizontal Slider"
|
||||
min={0}
|
||||
max={200}
|
||||
step={5}
|
||||
defaultValue={100}
|
||||
layout={FormLayout.Horizontal}
|
||||
/>
|
||||
\`\`\`
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomRange: Story = {
|
||||
decorators: [withFormProvider],
|
||||
args: {
|
||||
name: 'customRange',
|
||||
label: 'Custom Range (0-1000)',
|
||||
min: 0,
|
||||
max: 1000,
|
||||
step: 10,
|
||||
defaultValue: 500,
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: `
|
||||
### Custom Range
|
||||
|
||||
\`\`\`tsx
|
||||
import { SliderInputFormField } from '@/components/slider-input-form-field';
|
||||
|
||||
<SliderInputFormField
|
||||
name="customRange"
|
||||
label="Custom Range (0-1000)"
|
||||
min={0}
|
||||
max={1000}
|
||||
step={10}
|
||||
defaultValue={500}
|
||||
/>
|
||||
\`\`\`
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -138,7 +138,7 @@ export default {
|
||||
// flow
|
||||
listTemplates: `${api_host}/canvas/templates`,
|
||||
listCanvas: `${api_host}/canvas/list`,
|
||||
listCanvasTeam: `${api_host}/canvas/listteam`,
|
||||
listCanvasTeam: `${api_host}/canvas/list`,
|
||||
getCanvas: `${api_host}/canvas/get`,
|
||||
getCanvasSSE: `${api_host}/canvas/getsse`,
|
||||
removeCanvas: `${api_host}/canvas/rm`,
|
||||
@ -190,4 +190,12 @@ export default {
|
||||
mindmapShare: `${ExternalApi}${api_host}/searchbots/mindmap`,
|
||||
getRelatedQuestionsShare: `${ExternalApi}${api_host}/searchbots/related_questions`,
|
||||
retrievalTestShare: `${ExternalApi}${api_host}/searchbots/retrieval_test`,
|
||||
|
||||
// data pipeline
|
||||
|
||||
fetchDataflow: (id: string) => `${api_host}/dataflow/get/${id}`,
|
||||
setDataflow: `${api_host}/dataflow/set`,
|
||||
removeDataflow: `${api_host}/dataflow/rm`,
|
||||
listDataflow: `${api_host}/dataflow/list`,
|
||||
runDataflow: `${api_host}/dataflow/run`,
|
||||
};
|
||||
|
||||
@ -1,3 +1,13 @@
|
||||
export function buildSelectOptions(list: Array<string>) {
|
||||
export function buildSelectOptions(
|
||||
list: Array<any>,
|
||||
keyName?: string,
|
||||
valueName?: string,
|
||||
) {
|
||||
if (!Array.isArray(list) || !list.length) {
|
||||
return [];
|
||||
}
|
||||
if (keyName && valueName) {
|
||||
return list.map((x) => ({ label: x[valueName], value: x[keyName] }));
|
||||
}
|
||||
return list.map((x) => ({ label: x, value: x }));
|
||||
}
|
||||
|
||||
@ -35,7 +35,9 @@ export function buildOptions(
|
||||
) {
|
||||
if (t) {
|
||||
return Object.values(data).map((val) => ({
|
||||
label: t(`${prefix ? prefix + '.' : ''}${val.toLowerCase()}`),
|
||||
label: t(
|
||||
`${prefix ? prefix + '.' : ''}${typeof val === 'string' ? val.toLowerCase() : val}`,
|
||||
),
|
||||
value: val,
|
||||
}));
|
||||
}
|
||||
|
||||
@ -80,7 +80,10 @@ module.exports = {
|
||||
'bg-accent': 'var(--bg-accent)',
|
||||
'state-success': 'var(--state-success)',
|
||||
'state-warning': 'var(--state-warning)',
|
||||
'state-error': 'var(--state-error)',
|
||||
'state-error': {
|
||||
DEFAULT: 'rgb(var(--state-error) / <alpha-value>)',
|
||||
5: 'rgba(var(--state-error) / 0.05)', // 5%
|
||||
},
|
||||
'team-group': 'var(--team-group)',
|
||||
'team-member': 'var(--team-member)',
|
||||
'team-department': 'var(--team-department)',
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
|
||||
--state-success: #3ba05c;
|
||||
--state-warning: #faad14;
|
||||
--state-error: #d8494b;
|
||||
--state-error: 216 73 75;
|
||||
|
||||
--team-group: #5ab77e;
|
||||
--team-member: #5c96c8;
|
||||
@ -291,8 +291,8 @@
|
||||
@layer utilities {
|
||||
.scrollbar-auto {
|
||||
/* hide scrollbar */
|
||||
scrollbar-width: none;
|
||||
scrollbar-color: transparent transparent;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-default) var(--bg-card);
|
||||
}
|
||||
|
||||
.scrollbar-auto::-webkit-scrollbar {
|
||||
|
||||
Reference in New Issue
Block a user