knowledge base node
@ -0,0 +1,12 @@
|
||||
<svg width="212" height="74" viewBox="0 0 212 74" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Effect" opacity="0.8" filter="url(#filter0_f_6128_88629)">
|
||||
<circle cx="24" cy="24" r="28" fill="#0BA5EC"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_6128_88629" x="-164" y="-164" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_6128_88629"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 611 B |
@ -1,12 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="214" height="124" viewBox="0 0 214 124" fill="none">
|
||||
<g opacity="0.5" filter="url(#filter0_f_6128_89310)">
|
||||
<circle cx="26" cy="26" r="28" fill="#6172F3"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_6128_89310" x="-162" y="-162" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_6128_89310"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg width="214" height="124" viewBox="0 0 214 124" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Effect" opacity="0.5" filter="url(#filter0_f_6128_89310)">
|
||||
<circle cx="26" cy="26" r="28" fill="#6172F3"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_6128_89310" x="-162" y="-162" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_6128_89310"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 638 B After Width: | Height: | Size: 613 B |
@ -1,12 +1,12 @@
|
||||
<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Effect" opacity="0.8" filter="url(#filter0_f_481_16453)">
|
||||
<g id="Effect" opacity="0.8" filter="url(#filter0_f_5863_82395)">
|
||||
<circle cx="32" cy="32" r="28" fill="#6938EF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_481_16453" x="-156" y="-156" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<filter id="filter0_f_5863_82395" x="-156" y="-156" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_481_16453"/>
|
||||
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_5863_82395"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 610 B After Width: | Height: | Size: 613 B |
@ -1,8 +1,8 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="piggy-bank-mod">
|
||||
<g id="Union">
|
||||
<path d="M12.75 1.80737C12.75 3.18809 11.6307 4.30738 10.25 4.30738C8.8693 4.30738 7.74998 3.18809 7.74998 1.80737L12.75 1.80737Z" fill="#676F83"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29769 4.71516C6.27454 4.43606 7.31331 4.77702 7.93687 5.55738H11.8125C14.4013 5.55738 16.5 7.65605 16.5 10.2449C16.5 12.5126 14.8896 14.4043 12.75 14.8386V16.1824H11.5V14.9324H7.12498V16.1824H5.87498V14.8508C5.05321 14.6764 4.30548 14.229 3.76111 13.5695L2.99101 12.6365L1.5 12.0103V8.93745L3.29116 8.46851L4 7.56623V5.08593L5.29769 4.71516ZM7.75 7.43238H12.75V8.68239H7.75V7.43238ZM5.875 8.99489C5.875 9.51264 5.45527 9.93239 4.9375 9.93239C4.41973 9.93239 4 9.51264 4 8.99489C4 8.47714 4.41973 8.05739 4.9375 8.05739C5.45527 8.05739 5.875 8.47714 5.875 8.99489Z" fill="#676F83"/>
|
||||
<path d="M12.75 1.80737C12.75 3.18809 11.6307 4.30738 10.25 4.30738C8.8693 4.30738 7.74998 3.18809 7.74998 1.80737L12.75 1.80737Z" fill="#444CE7"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29769 4.71516C6.27454 4.43606 7.31331 4.77702 7.93687 5.55738H11.8125C14.4013 5.55738 16.5 7.65605 16.5 10.2449C16.5 12.5126 14.8896 14.4043 12.75 14.8386V16.1824H11.5V14.9324H7.12498V16.1824H5.87498V14.8508C5.05321 14.6764 4.30548 14.229 3.76111 13.5695L2.99101 12.6365L1.5 12.0103V8.93745L3.29116 8.46851L4 7.56623V5.08593L5.29769 4.71516ZM7.75 7.43238H12.75V8.68239H7.75V7.43238ZM5.875 8.99489C5.875 9.51264 5.45527 9.93239 4.9375 9.93239C4.41973 9.93239 4 9.51264 4 8.99489C4 8.47714 4.41973 8.05739 4.9375 8.05739C5.45527 8.05739 5.875 8.47714 5.875 8.99489Z" fill="#444CE7"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 934 B After Width: | Height: | Size: 934 B |
@ -0,0 +1,12 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="general">
|
||||
<g id="Vector">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.375 3.75C12.375 3.12868 12.8787 2.625 13.5 2.625H15.75C16.3713 2.625 16.875 3.12868 16.875 3.75C16.875 4.37132 16.3713 4.875 15.75 4.875H13.5C12.8787 4.875 12.375 4.37132 12.375 3.75Z" fill="#444CE7"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.125 3.75C1.125 3.12868 1.62868 2.625 2.25 2.625H9.75C10.3713 2.625 10.875 3.12868 10.875 3.75C10.875 4.37132 10.3713 4.875 9.75 4.875H2.25C1.62868 4.875 1.125 4.37132 1.125 3.75Z" fill="#444CE7"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.125 9C1.125 8.37868 1.62868 7.875 2.25 7.875H4.5C5.12132 7.875 5.625 8.37868 5.625 9C5.625 9.62132 5.12132 10.125 4.5 10.125H2.25C1.62868 10.125 1.125 9.62132 1.125 9Z" fill="#444CE7"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.125 9C7.125 8.37868 7.62868 7.875 8.25 7.875H15.75C16.3713 7.875 16.875 8.37868 16.875 9C16.875 9.62132 16.3713 10.125 15.75 10.125H8.25C7.62868 10.125 7.125 9.62132 7.125 9Z" fill="#444CE7"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.375 14.25C12.375 13.6287 12.8787 13.125 13.5 13.125H15.75C16.3713 13.125 16.875 13.6287 16.875 14.25C16.875 14.8713 16.3713 15.375 15.75 15.375H13.5C12.8787 15.375 12.375 14.8713 12.375 14.25Z" fill="#444CE7"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.125 14.25C1.125 13.6287 1.62868 13.125 2.25 13.125H9.75C10.3713 13.125 10.875 13.6287 10.875 14.25C10.875 14.8713 10.3713 15.375 9.75 15.375H2.25C1.62868 15.375 1.125 14.8713 1.125 14.25Z" fill="#444CE7"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,9 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="parent-child">
|
||||
<g id="Vector">
|
||||
<path d="M5.56251 5.8125C6.77063 5.8125 7.75001 4.83312 7.75001 3.625C7.75001 2.41688 6.77063 1.4375 5.56251 1.4375C4.35439 1.4375 3.37501 2.41688 3.37501 3.625C3.37501 4.83312 4.35439 5.8125 5.56251 5.8125Z" fill="#0BA5EC"/>
|
||||
<path d="M12.4375 5.8125C13.6456 5.8125 14.625 4.83312 14.625 3.625C14.625 2.41688 13.6456 1.4375 12.4375 1.4375C11.2294 1.4375 10.25 2.41688 10.25 3.625C10.25 4.83312 11.2294 5.8125 12.4375 5.8125Z" fill="#0BA5EC"/>
|
||||
<path d="M12.4375 7.0625C11.7566 7.06326 11.0868 7.23541 10.4899 7.56309C9.89294 7.89077 9.38811 8.36342 9.02188 8.9375C9.51723 8.94327 9.99017 9.14485 10.3374 9.49819C10.6846 9.85154 10.8779 10.3279 10.875 10.8233C10.8721 11.3187 10.6733 11.7928 10.322 12.1421C9.97065 12.4913 9.49539 12.6874 9.00001 12.6874C8.50462 12.6874 8.02937 12.4913 7.67805 12.1421C7.32674 11.7928 7.12793 11.3187 7.12504 10.8233C7.12215 10.3279 7.31542 9.85154 7.66263 9.49819C8.00984 9.14485 8.48278 8.94327 8.97813 8.9375C8.50629 8.1962 7.80649 7.62817 6.984 7.31887C6.16151 7.00957 5.26082 6.97572 4.41744 7.22243C3.57406 7.46914 2.8336 7.98305 2.30746 8.68685C1.78132 9.39065 1.49796 10.2463 1.50001 11.125V15.1875C1.50001 15.3533 1.56586 15.5122 1.68307 15.6294C1.80028 15.7466 1.95925 15.8125 2.12501 15.8125H6.50001V14.25L4.25001 12.5625C4.18435 12.5132 4.12903 12.4515 4.08721 12.3809C4.0454 12.3103 4.0179 12.2321 4.00629 12.1509C3.98285 11.9868 4.02555 11.8201 4.12501 11.6875C4.22447 11.5549 4.37253 11.4672 4.53662 11.4438C4.70072 11.4203 4.8674 11.463 5.00001 11.5625L7.33313 13.3125H10.6669L13 11.5625C13.1326 11.463 13.2993 11.4203 13.4634 11.4438C13.6275 11.4672 13.7755 11.5549 13.875 11.6875C13.9745 11.8201 14.0172 11.9868 13.9937 12.1509C13.9703 12.315 13.8826 12.463 13.75 12.5625L11.5 14.25V15.8125H15.875C16.0408 15.8125 16.1997 15.7466 16.3169 15.6294C16.4342 15.5122 16.5 15.3533 16.5 15.1875V11.125C16.4987 10.048 16.0702 9.01541 15.3087 8.25383C14.5471 7.49226 13.5145 7.06382 12.4375 7.0625Z" fill="#0BA5EC"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,5 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="qa">
|
||||
<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M16.5015 3.75C16.5015 2.92157 15.8299 2.25 15.0015 2.25H6.00146C5.17304 2.25 4.50146 2.92157 4.50146 3.75V5.25H3.00146C2.17304 5.25 1.50146 5.92157 1.50146 6.75V12.75C1.50146 13.5784 2.17304 14.25 3.00146 14.25H3.75146V15.375C3.75146 15.6407 3.89209 15.8867 4.12112 16.0214C4.35015 16.1562 4.6334 16.1597 4.8657 16.0307L8.07083 14.25H12.0015C12.8299 14.25 13.5015 13.5784 13.5015 12.75V11.25H15.0015C15.8299 11.25 16.5015 10.5785 16.5015 9.75V3.75ZM12.0015 5.25H6.00146V3.75H15.0015V9.75H13.5015V6.75C13.5015 5.92157 12.8299 5.25 12.0015 5.25ZM5.25 7.5C4.83579 7.5 4.5 7.83579 4.5 8.25C4.5 8.66421 4.83579 9 5.25 9H9.75C10.1642 9 10.5 8.66421 10.5 8.25C10.5 7.83579 10.1642 7.5 9.75 7.5H5.25ZM5.25 10.5C4.83579 10.5 4.5 10.8358 4.5 11.25C4.5 11.6642 4.83579 12 5.25 12H7.5C7.91421 12 8.25 11.6642 8.25 11.25C8.25 10.8358 7.91421 10.5 7.5 10.5H5.25Z" fill="#676F83"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -4,17 +4,18 @@
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"xmlns": "http://www.w3.org/2000/svg",
|
||||
"width": "214",
|
||||
"height": "124",
|
||||
"viewBox": "0 0 214 124",
|
||||
"fill": "none"
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "Effect",
|
||||
"opacity": "0.5",
|
||||
"filter": "url(#filter0_f_6128_89310)"
|
||||
},
|
||||
|
||||
@ -0,0 +1,90 @@
|
||||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "212",
|
||||
"height": "74",
|
||||
"viewBox": "0 0 212 74",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "Effect",
|
||||
"opacity": "0.8",
|
||||
"filter": "url(#filter0_f_6128_88629)"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "circle",
|
||||
"attributes": {
|
||||
"cx": "24",
|
||||
"cy": "24",
|
||||
"r": "28",
|
||||
"fill": "#0BA5EC"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "defs",
|
||||
"attributes": {},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "filter",
|
||||
"attributes": {
|
||||
"id": "filter0_f_6128_88629",
|
||||
"x": "-164",
|
||||
"y": "-164",
|
||||
"width": "376",
|
||||
"height": "376",
|
||||
"filterUnits": "userSpaceOnUse",
|
||||
"color-interpolation-filters": "sRGB"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "feFlood",
|
||||
"attributes": {
|
||||
"flood-opacity": "0",
|
||||
"result": "BackgroundImageFix"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "feBlend",
|
||||
"attributes": {
|
||||
"mode": "normal",
|
||||
"in": "SourceGraphic",
|
||||
"in2": "BackgroundImageFix",
|
||||
"result": "shape"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "feGaussianBlur",
|
||||
"attributes": {
|
||||
"stdDeviation": "80",
|
||||
"result": "effect1_foregroundBlur_6128_88629"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "OptionCardEffectBlueLight"
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './OptionCardEffectBlueLight.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.SVGProps<SVGSVGElement> & {
|
||||
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||
},
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||
|
||||
Icon.displayName = 'OptionCardEffectBlueLight'
|
||||
|
||||
export default Icon
|
||||
@ -17,7 +17,7 @@
|
||||
"attributes": {
|
||||
"id": "Effect",
|
||||
"opacity": "0.8",
|
||||
"filter": "url(#filter0_f_481_16453)"
|
||||
"filter": "url(#filter0_f_5863_82395)"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
@ -42,7 +42,7 @@
|
||||
"type": "element",
|
||||
"name": "filter",
|
||||
"attributes": {
|
||||
"id": "filter0_f_481_16453",
|
||||
"id": "filter0_f_5863_82395",
|
||||
"x": "-156",
|
||||
"y": "-156",
|
||||
"width": "376",
|
||||
@ -76,7 +76,7 @@
|
||||
"name": "feGaussianBlur",
|
||||
"attributes": {
|
||||
"stdDeviation": "80",
|
||||
"result": "effect1_foregroundBlur_481_16453"
|
||||
"result": "effect1_foregroundBlur_5863_82395"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ export { default as Collapse } from './Collapse'
|
||||
export { default as File } from './File'
|
||||
export { default as GeneralType } from './GeneralType'
|
||||
export { default as LayoutRight2LineMod } from './LayoutRight2LineMod'
|
||||
export { default as OptionCardEffectBlueLight } from './OptionCardEffectBlueLight'
|
||||
export { default as OptionCardEffectBlue } from './OptionCardEffectBlue'
|
||||
export { default as OptionCardEffectOrange } from './OptionCardEffectOrange'
|
||||
export { default as OptionCardEffectPurple } from './OptionCardEffectPurple'
|
||||
|
||||
@ -0,0 +1,101 @@
|
||||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "18",
|
||||
"height": "18",
|
||||
"viewBox": "0 0 18 18",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "general"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "Vector"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"fill-rule": "evenodd",
|
||||
"clip-rule": "evenodd",
|
||||
"d": "M12.375 3.75C12.375 3.12868 12.8787 2.625 13.5 2.625H15.75C16.3713 2.625 16.875 3.12868 16.875 3.75C16.875 4.37132 16.3713 4.875 15.75 4.875H13.5C12.8787 4.875 12.375 4.37132 12.375 3.75Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"fill-rule": "evenodd",
|
||||
"clip-rule": "evenodd",
|
||||
"d": "M1.125 3.75C1.125 3.12868 1.62868 2.625 2.25 2.625H9.75C10.3713 2.625 10.875 3.12868 10.875 3.75C10.875 4.37132 10.3713 4.875 9.75 4.875H2.25C1.62868 4.875 1.125 4.37132 1.125 3.75Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"fill-rule": "evenodd",
|
||||
"clip-rule": "evenodd",
|
||||
"d": "M1.125 9C1.125 8.37868 1.62868 7.875 2.25 7.875H4.5C5.12132 7.875 5.625 8.37868 5.625 9C5.625 9.62132 5.12132 10.125 4.5 10.125H2.25C1.62868 10.125 1.125 9.62132 1.125 9Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"fill-rule": "evenodd",
|
||||
"clip-rule": "evenodd",
|
||||
"d": "M7.125 9C7.125 8.37868 7.62868 7.875 8.25 7.875H15.75C16.3713 7.875 16.875 8.37868 16.875 9C16.875 9.62132 16.3713 10.125 15.75 10.125H8.25C7.62868 10.125 7.125 9.62132 7.125 9Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"fill-rule": "evenodd",
|
||||
"clip-rule": "evenodd",
|
||||
"d": "M12.375 14.25C12.375 13.6287 12.8787 13.125 13.5 13.125H15.75C16.3713 13.125 16.875 13.6287 16.875 14.25C16.875 14.8713 16.3713 15.375 15.75 15.375H13.5C12.8787 15.375 12.375 14.8713 12.375 14.25Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"fill-rule": "evenodd",
|
||||
"clip-rule": "evenodd",
|
||||
"d": "M1.125 14.25C1.125 13.6287 1.62868 13.125 2.25 13.125H9.75C10.3713 13.125 10.875 13.6287 10.875 14.25C10.875 14.8713 10.3713 15.375 9.75 15.375H2.25C1.62868 15.375 1.125 14.8713 1.125 14.25Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "GeneralChunk"
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './GeneralChunk.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.SVGProps<SVGSVGElement> & {
|
||||
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||
},
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||
|
||||
Icon.displayName = 'GeneralChunk'
|
||||
|
||||
export default Icon
|
||||
@ -0,0 +1,62 @@
|
||||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "18",
|
||||
"height": "18",
|
||||
"viewBox": "0 0 18 18",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "parent-child"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "Vector"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"d": "M5.56251 5.8125C6.77063 5.8125 7.75001 4.83312 7.75001 3.625C7.75001 2.41688 6.77063 1.4375 5.56251 1.4375C4.35439 1.4375 3.37501 2.41688 3.37501 3.625C3.37501 4.83312 4.35439 5.8125 5.56251 5.8125Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"d": "M12.4375 5.8125C13.6456 5.8125 14.625 4.83312 14.625 3.625C14.625 2.41688 13.6456 1.4375 12.4375 1.4375C11.2294 1.4375 10.25 2.41688 10.25 3.625C10.25 4.83312 11.2294 5.8125 12.4375 5.8125Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"d": "M12.4375 7.0625C11.7566 7.06326 11.0868 7.23541 10.4899 7.56309C9.89294 7.89077 9.38811 8.36342 9.02188 8.9375C9.51723 8.94327 9.99017 9.14485 10.3374 9.49819C10.6846 9.85154 10.8779 10.3279 10.875 10.8233C10.8721 11.3187 10.6733 11.7928 10.322 12.1421C9.97065 12.4913 9.49539 12.6874 9.00001 12.6874C8.50462 12.6874 8.02937 12.4913 7.67805 12.1421C7.32674 11.7928 7.12793 11.3187 7.12504 10.8233C7.12215 10.3279 7.31542 9.85154 7.66263 9.49819C8.00984 9.14485 8.48278 8.94327 8.97813 8.9375C8.50629 8.1962 7.80649 7.62817 6.984 7.31887C6.16151 7.00957 5.26082 6.97572 4.41744 7.22243C3.57406 7.46914 2.8336 7.98305 2.30746 8.68685C1.78132 9.39065 1.49796 10.2463 1.50001 11.125V15.1875C1.50001 15.3533 1.56586 15.5122 1.68307 15.6294C1.80028 15.7466 1.95925 15.8125 2.12501 15.8125H6.50001V14.25L4.25001 12.5625C4.18435 12.5132 4.12903 12.4515 4.08721 12.3809C4.0454 12.3103 4.0179 12.2321 4.00629 12.1509C3.98285 11.9868 4.02555 11.8201 4.12501 11.6875C4.22447 11.5549 4.37253 11.4672 4.53662 11.4438C4.70072 11.4203 4.8674 11.463 5.00001 11.5625L7.33313 13.3125H10.6669L13 11.5625C13.1326 11.463 13.2993 11.4203 13.4634 11.4438C13.6275 11.4672 13.7755 11.5549 13.875 11.6875C13.9745 11.8201 14.0172 11.9868 13.9937 12.1509C13.9703 12.315 13.8826 12.463 13.75 12.5625L11.5 14.25V15.8125H15.875C16.0408 15.8125 16.1997 15.7466 16.3169 15.6294C16.4342 15.5122 16.5 15.3533 16.5 15.1875V11.125C16.4987 10.048 16.0702 9.01541 15.3087 8.25383C14.5471 7.49226 13.5145 7.06382 12.4375 7.0625Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "ParentChildChunk"
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './ParentChildChunk.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.SVGProps<SVGSVGElement> & {
|
||||
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||
},
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||
|
||||
Icon.displayName = 'ParentChildChunk'
|
||||
|
||||
export default Icon
|
||||
@ -0,0 +1,38 @@
|
||||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "18",
|
||||
"height": "18",
|
||||
"viewBox": "0 0 18 18",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "qa"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"id": "Vector",
|
||||
"fill-rule": "evenodd",
|
||||
"clip-rule": "evenodd",
|
||||
"d": "M16.5015 3.75C16.5015 2.92157 15.8299 2.25 15.0015 2.25H6.00146C5.17304 2.25 4.50146 2.92157 4.50146 3.75V5.25H3.00146C2.17304 5.25 1.50146 5.92157 1.50146 6.75V12.75C1.50146 13.5784 2.17304 14.25 3.00146 14.25H3.75146V15.375C3.75146 15.6407 3.89209 15.8867 4.12112 16.0214C4.35015 16.1562 4.6334 16.1597 4.8657 16.0307L8.07083 14.25H12.0015C12.8299 14.25 13.5015 13.5784 13.5015 12.75V11.25H15.0015C15.8299 11.25 16.5015 10.5785 16.5015 9.75V3.75ZM12.0015 5.25H6.00146V3.75H15.0015V9.75H13.5015V6.75C13.5015 5.92157 12.8299 5.25 12.0015 5.25ZM5.25 7.5C4.83579 7.5 4.5 7.83579 4.5 8.25C4.5 8.66421 4.83579 9 5.25 9H9.75C10.1642 9 10.5 8.66421 10.5 8.25C10.5 7.83579 10.1642 7.5 9.75 7.5H5.25ZM5.25 10.5C4.83579 10.5 4.5 10.8358 4.5 11.25C4.5 11.6642 4.83579 12 5.25 12H7.5C7.91421 12 8.25 11.6642 8.25 11.25C8.25 10.8358 7.91421 10.5 7.5 10.5H5.25Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "QuestionAndAnswer"
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './QuestionAndAnswer.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.SVGProps<SVGSVGElement> & {
|
||||
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||
},
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||
|
||||
Icon.displayName = 'QuestionAndAnswer'
|
||||
|
||||
export default Icon
|
||||
@ -1,6 +1,9 @@
|
||||
export { default as ArrowShape } from './ArrowShape'
|
||||
export { default as Economic } from './Economic'
|
||||
export { default as FullTextSearch } from './FullTextSearch'
|
||||
export { default as GeneralChunk } from './GeneralChunk'
|
||||
export { default as HighQuality } from './HighQuality'
|
||||
export { default as HybridSearch } from './HybridSearch'
|
||||
export { default as ParentChildChunk } from './ParentChildChunk'
|
||||
export { default as QuestionAndAnswer } from './QuestionAndAnswer'
|
||||
export { default as VectorSearch } from './VectorSearch'
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
export type BoxProps = {
|
||||
className?: string
|
||||
children?: ReactNode
|
||||
withBorderBottom?: boolean
|
||||
}
|
||||
export const Box = ({
|
||||
className,
|
||||
children,
|
||||
withBorderBottom,
|
||||
}: BoxProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'py-2',
|
||||
withBorderBottom && 'border-b border-divider-subtle',
|
||||
className,
|
||||
)}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
export type FieldTitleProps = {
|
||||
title: string
|
||||
operation?: ReactNode
|
||||
subTitle?: string | ReactNode
|
||||
tooltip?: string
|
||||
}
|
||||
export const FieldTitle = ({
|
||||
title,
|
||||
operation,
|
||||
subTitle,
|
||||
tooltip,
|
||||
}: FieldTitleProps) => {
|
||||
return (
|
||||
<div className={cn('mb-0.5', !!subTitle && 'mb-1')}>
|
||||
<div className='flex items-center justify-between py-1'>
|
||||
<div className='system-sm-semibold-uppercase flex items-center text-text-secondary'>
|
||||
{title}
|
||||
{
|
||||
tooltip && (
|
||||
<Tooltip
|
||||
popupContent={tooltip}
|
||||
triggerClassName='w-4 h-4 ml-1'
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{operation}
|
||||
</div>
|
||||
{
|
||||
subTitle
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import type { FieldTitleProps } from '.'
|
||||
import { FieldTitle } from '.'
|
||||
|
||||
export type FieldProps = {
|
||||
fieldTitleProps: FieldTitleProps
|
||||
children: ReactNode
|
||||
}
|
||||
export const Field = ({
|
||||
fieldTitleProps,
|
||||
children,
|
||||
}: FieldProps) => {
|
||||
return (
|
||||
<div>
|
||||
<FieldTitle {...fieldTitleProps} />
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Group,
|
||||
} from '.'
|
||||
import type {
|
||||
BoxProps,
|
||||
GroupProps,
|
||||
} from '.'
|
||||
|
||||
type GroupWithBoxProps = {
|
||||
children?: ReactNode
|
||||
boxProps?: Omit<BoxProps, 'children'>
|
||||
groupProps?: Omit<GroupProps, 'children'>
|
||||
}
|
||||
export const GroupWithBox = ({
|
||||
children,
|
||||
boxProps,
|
||||
groupProps,
|
||||
}: GroupWithBoxProps) => {
|
||||
return (
|
||||
<Box {...boxProps}>
|
||||
<Group {...groupProps}>
|
||||
{children}
|
||||
</Group>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
export type GroupProps = {
|
||||
className?: string
|
||||
children?: ReactNode
|
||||
withBorderBottom?: boolean
|
||||
}
|
||||
export const Group = ({
|
||||
className,
|
||||
children,
|
||||
withBorderBottom,
|
||||
}: GroupProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'px-4 py-2',
|
||||
withBorderBottom && 'border-b border-divider-subtle',
|
||||
className,
|
||||
)}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
export * from './box'
|
||||
export * from './group'
|
||||
export * from './group-with-box'
|
||||
export * from './field-title'
|
||||
export * from './field'
|
||||
@ -0,0 +1,52 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
GeneralChunk,
|
||||
ParentChildChunk,
|
||||
QuestionAndAnswer,
|
||||
} from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import type { Option } from './type'
|
||||
|
||||
export const useChunkStructure = () => {
|
||||
const [chunk, setChunk] = useState('general')
|
||||
const GeneralOption: Option = {
|
||||
key: 'general',
|
||||
icon: <GeneralChunk className='h-[18px] w-[18px] text-util-colors-indigo-indigo-600' />,
|
||||
title: 'General',
|
||||
description: 'General text chunking mode, the chunks retrieved and recalled are the same.',
|
||||
effectColor: 'blue',
|
||||
showEffectColor: true,
|
||||
}
|
||||
const ParentChildOption: Option = {
|
||||
key: 'parent-child',
|
||||
icon: <ParentChildChunk className='h-[18px] w-[18px] text-util-colors-blue-light-blue-light-500' />,
|
||||
title: 'Parent-Child',
|
||||
description: 'Parent-child text chunking mode, the chunks retrieved and recalled are different.',
|
||||
effectColor: 'blue-light',
|
||||
showEffectColor: true,
|
||||
}
|
||||
const QuestionAnswerOption: Option = {
|
||||
key: 'question-answer',
|
||||
icon: <QuestionAndAnswer className='h-[18px] w-[18px] text-text-tertiary' />,
|
||||
title: 'Question-Answer',
|
||||
description: 'Question-answer text chunking mode, the chunks retrieved and recalled are different.',
|
||||
}
|
||||
|
||||
const optionMap: Record<string, Option> = {
|
||||
'general': GeneralOption,
|
||||
'parent-child': ParentChildOption,
|
||||
'question-answer': QuestionAnswerOption,
|
||||
}
|
||||
|
||||
const options = [
|
||||
GeneralOption,
|
||||
ParentChildOption,
|
||||
QuestionAnswerOption,
|
||||
]
|
||||
|
||||
return {
|
||||
options,
|
||||
optionMap,
|
||||
chunk,
|
||||
setChunk,
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
|
||||
import OptionCard from '../option-card'
|
||||
import Selector from './selector'
|
||||
import { useChunkStructure } from './hooks'
|
||||
|
||||
const ChunkStructure = () => {
|
||||
const {
|
||||
chunk,
|
||||
setChunk,
|
||||
options,
|
||||
optionMap,
|
||||
} = useChunkStructure()
|
||||
|
||||
return (
|
||||
<Field
|
||||
fieldTitleProps={{
|
||||
title: 'Chunk Structure',
|
||||
tooltip: 'Chunk Structure',
|
||||
operation: (
|
||||
<Selector
|
||||
options={options}
|
||||
value={chunk}
|
||||
onChange={setChunk}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
>
|
||||
<OptionCard {...optionMap[chunk]} />
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChunkStructure
|
||||
@ -0,0 +1,69 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import Button from '@/app/components/base/button'
|
||||
import OptionCard from '../option-card'
|
||||
import type { Option } from './type'
|
||||
|
||||
type SelectorProps = {
|
||||
options: Option[]
|
||||
value: string
|
||||
onChange: (key: string) => void
|
||||
}
|
||||
const Selector = ({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: SelectorProps) => {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
placement='bottom-end'
|
||||
offset={{
|
||||
mainAxis: 0,
|
||||
crossAxis: -8,
|
||||
}}
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
|
||||
<Button
|
||||
size='small'
|
||||
variant='ghost-accent'
|
||||
>
|
||||
change
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-10'>
|
||||
<div className='w-[404px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]'>
|
||||
<div className='system-sm-semibold px-3 pt-3.5 text-text-primary'>
|
||||
change Chunk Structure
|
||||
</div>
|
||||
<div className='space-y-1 p-3 pt-2'>
|
||||
{
|
||||
options.map(option => (
|
||||
<OptionCard
|
||||
key={option.key}
|
||||
icon={option.icon}
|
||||
title={option.title}
|
||||
description={option.description}
|
||||
onClick={() => {
|
||||
onChange(option.key)
|
||||
setOpen(false)
|
||||
}}
|
||||
showHighlightBorder={value === option.key}
|
||||
></OptionCard>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default Selector
|
||||
@ -0,0 +1,10 @@
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
export type Option = {
|
||||
key: string
|
||||
icon: ReactNode
|
||||
title: string
|
||||
description: string
|
||||
effectColor?: string
|
||||
showEffectColor?: boolean,
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
|
||||
import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
|
||||
|
||||
const EmbeddingModel = () => {
|
||||
const handleModelChange = () => {
|
||||
console.log('Model changed')
|
||||
}
|
||||
const handleCompletionParamsChange = () => {
|
||||
console.log('Completion parameters changed')
|
||||
}
|
||||
|
||||
return (
|
||||
<Field
|
||||
fieldTitleProps={{
|
||||
title: 'Embedding Model',
|
||||
}}
|
||||
>
|
||||
<ModelParameterModal
|
||||
popupClassName='!w-[387px]'
|
||||
isInWorkflow
|
||||
isAdvancedMode={true}
|
||||
mode={'embedding'}
|
||||
provider={'openai'}
|
||||
completionParams={{}}
|
||||
modelId={'text-embedding-ada-002'}
|
||||
setModel={handleModelChange}
|
||||
onCompletionParamsChange={handleCompletionParamsChange}
|
||||
hideDebugWithMultipleModel
|
||||
debugWithMultipleModel={false}
|
||||
/>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
export default EmbeddingModel
|
||||
@ -1,3 +1,4 @@
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiQuestionLine } from '@remixicon/react'
|
||||
import {
|
||||
@ -7,27 +8,52 @@ import {
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import Slider from '@/app/components/base/slider'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
|
||||
import OptionCard from './option-card'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
const IndexMethod = () => {
|
||||
const { t } = useTranslation()
|
||||
const [method, setMethod] = useState('high_quality')
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='system-sm-semibold-uppercase mb-0.5 flex h-6 items-center text-text-secondary'>Index method</div>
|
||||
<Field
|
||||
fieldTitleProps={{
|
||||
title: 'Index method',
|
||||
}}
|
||||
>
|
||||
<div className='space-y-1'>
|
||||
<OptionCard
|
||||
icon={<HighQuality className='h-[15px] w-[15px] text-util-colors-orange-orange-500' />}
|
||||
icon={
|
||||
<HighQuality
|
||||
className={cn(
|
||||
'h-[15px] w-[15px] text-text-tertiary',
|
||||
method === 'high_quality' && 'text-util-colors-orange-orange-500',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
title={t('datasetCreation.stepTwo.qualified')}
|
||||
description={t('datasetSettings.form.indexMethodHighQualityTip')}
|
||||
showHighlightBorder
|
||||
showHighlightBorder={method === 'high_quality'}
|
||||
onClick={() => setMethod('high_quality')}
|
||||
isRecommended
|
||||
></OptionCard>
|
||||
<OptionCard
|
||||
icon={<Economic className='h-[15px] w-[15px] text-text-tertiary' />}
|
||||
icon={
|
||||
<Economic
|
||||
className={cn(
|
||||
'h-[15px] w-[15px] text-text-tertiary',
|
||||
method === 'economy' && 'text-util-colors-indigo-indigo-500',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
title={t('datasetSettings.form.indexMethodEconomy')}
|
||||
description={t('datasetSettings.form.indexMethodEconomyTip')}
|
||||
showChildren
|
||||
showHighlightBorder
|
||||
showChildren={method === 'economy'}
|
||||
showHighlightBorder={method === 'economy'}
|
||||
onClick={() => setMethod('economy')}
|
||||
effectColor='blue'
|
||||
showEffectColor={method === 'economy'}
|
||||
>
|
||||
<div className='flex items-center'>
|
||||
<div className='flex grow items-center'>
|
||||
@ -55,7 +81,7 @@ const IndexMethod = () => {
|
||||
</div>
|
||||
</OptionCard>
|
||||
</div>
|
||||
</div>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
|
||||
import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
|
||||
|
||||
const EmbeddingModel = () => {
|
||||
const handleChange = () => {
|
||||
console.log('')
|
||||
}
|
||||
|
||||
return (
|
||||
<Field
|
||||
fieldTitleProps={{
|
||||
title: 'Input Variable',
|
||||
tooltip: 'Input Variable',
|
||||
}}
|
||||
>
|
||||
<VarReferencePicker
|
||||
nodeId={''}
|
||||
isShowNodeName
|
||||
value={[]}
|
||||
onChange={handleChange}
|
||||
readonly={false}
|
||||
/>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
export default EmbeddingModel
|
||||
@ -2,17 +2,19 @@ import type { ReactNode } from 'react'
|
||||
import { memo } from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
import Badge from '@/app/components/base/badge'
|
||||
import { ArrowShape } from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import {
|
||||
OptionCardEffectBlue,
|
||||
OptionCardEffectBlueLight,
|
||||
OptionCardEffectOrange,
|
||||
OptionCardEffectPurple,
|
||||
} from '@/app/components/base/icons/src/public/knowledge'
|
||||
import { ArrowShape } from '@/app/components/base/icons/src/vender/knowledge'
|
||||
|
||||
const EffectMap = {
|
||||
blue: <OptionCardEffectBlue className='absolute left-1 top-1 h-14 w-14 fill-util-colors-indigo-indigo-500 text-util-colors-indigo-indigo-500 opacity-80 blur-[80px]' />,
|
||||
orange: <OptionCardEffectOrange className='absolute left-1 top-1 h-14 w-14 opacity-80 blur-[80px]' />,
|
||||
purple: <OptionCardEffectPurple className='absolute left-1 top-1 h-14 w-14 opacity-80 blur-[80px]' />,
|
||||
const HEADER_EFFECT_MAP: Record<string, ReactNode> = {
|
||||
'blue': <OptionCardEffectBlue />,
|
||||
'blue-light': <OptionCardEffectBlueLight />,
|
||||
'orange': <OptionCardEffectOrange />,
|
||||
'purple': <OptionCardEffectPurple />,
|
||||
}
|
||||
type OptionCardProps = {
|
||||
showHighlightBorder?: boolean
|
||||
@ -24,7 +26,9 @@ type OptionCardProps = {
|
||||
isRecommended?: boolean
|
||||
children?: ReactNode
|
||||
showChildren?: boolean
|
||||
effectColor?: 'blue' | 'orange' | 'purple'
|
||||
effectColor?: string
|
||||
showEffectColor?: boolean
|
||||
onClick?: () => void
|
||||
}
|
||||
const OptionCard = ({
|
||||
showHighlightBorder,
|
||||
@ -36,36 +40,42 @@ const OptionCard = ({
|
||||
isRecommended,
|
||||
children,
|
||||
showChildren,
|
||||
effectColor = 'blue',
|
||||
effectColor,
|
||||
showEffectColor,
|
||||
onClick,
|
||||
}: OptionCardProps) => {
|
||||
return (
|
||||
<div className={cn(
|
||||
'cursor-pointer rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg',
|
||||
showHighlightBorder && 'border-[2px] border-components-option-card-option-selected-border',
|
||||
)}>
|
||||
<div className='relative flex p-2'>
|
||||
<div
|
||||
className={cn(
|
||||
'cursor-pointer rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg',
|
||||
showHighlightBorder && 'border-[2px] border-components-option-card-option-selected-border',
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className={cn(
|
||||
'relative flex rounded-t-xl p-2',
|
||||
)}>
|
||||
{
|
||||
showChildren && (
|
||||
<ArrowShape className='absolute bottom-[-13px] left-[13px] h-4 w-4 text-components-panel-bg' />
|
||||
effectColor && showEffectColor && (
|
||||
<div className='absolute left-[-2px] top-[-2px] h-14 w-14 rounded-full'>
|
||||
{HEADER_EFFECT_MAP[effectColor]}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
showChildren && effectColor && EffectMap[effectColor]
|
||||
}
|
||||
{
|
||||
icon && (
|
||||
<div className='mr-1 shrink-0 p-[3px]'>
|
||||
<div className='mr-1 flex h-[18px] w-[18px] shrink-0 items-center justify-center'>
|
||||
{icon}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className='grow py-1'>
|
||||
<div className='grow py-1 pt-[1px]'>
|
||||
<div className='flex items-center'>
|
||||
<div className='system-sm-medium flex grow items-center text-text-secondary'>
|
||||
{title}
|
||||
{
|
||||
isRecommended && (
|
||||
<Badge>
|
||||
<Badge className='ml-1 h-4 border-text-accent-secondary text-text-accent-secondary'>
|
||||
Recommend
|
||||
</Badge>
|
||||
)
|
||||
@ -92,7 +102,8 @@ const OptionCard = ({
|
||||
</div>
|
||||
{
|
||||
children && showChildren && (
|
||||
<div className='p-3'>
|
||||
<div className='relative rounded-b-xl bg-components-panel-bg p-3'>
|
||||
<ArrowShape className='absolute left-[14px] top-[-11px] h-4 w-4 text-components-panel-bg' />
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
import { FullTextSearch } from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import OptionCard from '../option-card'
|
||||
|
||||
const FullTextSearchCard = () => {
|
||||
return (
|
||||
<OptionCard
|
||||
icon={<FullTextSearch className='h-[15px] w-[15px] text-text-tertiary' />}
|
||||
title='Full-Text Search'
|
||||
description="Execute full-text search and vector searches simultaneously, re-rank to select the best match for the user's query. Users can choose to set weights or configure to a Rerank model."
|
||||
effectColor='purple'
|
||||
>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div>Vector Search Settings</div>
|
||||
<div>Additional Settings</div>
|
||||
</div>
|
||||
</OptionCard>
|
||||
)
|
||||
}
|
||||
|
||||
export default FullTextSearchCard
|
||||
@ -0,0 +1,21 @@
|
||||
import { HybridSearch } from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import OptionCard from '../option-card'
|
||||
|
||||
const HybridSearchCard = () => {
|
||||
return (
|
||||
<OptionCard
|
||||
icon={<HybridSearch className='h-[15px] w-[15px] text-text-tertiary' />}
|
||||
title='Hybrid Search'
|
||||
description="Execute full-text search and vector searches simultaneously, re-rank to select the best match for the user's query. Users can choose to set weights or configure to a Rerank model."
|
||||
effectColor='purple'
|
||||
isRecommended
|
||||
>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div>Vector Search Settings</div>
|
||||
<div>Additional Settings</div>
|
||||
</div>
|
||||
</OptionCard>
|
||||
)
|
||||
}
|
||||
|
||||
export default HybridSearchCard
|
||||
@ -0,0 +1,35 @@
|
||||
import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
|
||||
import VectorSearchCard from './vector-search'
|
||||
import FullTextSearchCard from './full-text-search'
|
||||
import HybridSearchCard from './hybrid-search'
|
||||
|
||||
const RetrievalSetting = () => {
|
||||
return (
|
||||
<Field
|
||||
fieldTitleProps={{
|
||||
title: 'Retrieval Setting',
|
||||
subTitle: (
|
||||
<div className='body-xs-regular flex items-center text-text-tertiary'>
|
||||
<a
|
||||
href=''
|
||||
className='text-text-accent'
|
||||
target='_blank'
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
|
||||
about retrieval method.
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
>
|
||||
<div className='space-y-1'>
|
||||
<VectorSearchCard />
|
||||
<FullTextSearchCard />
|
||||
<HybridSearchCard />
|
||||
</div>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
|
||||
export default RetrievalSetting
|
||||
@ -0,0 +1,20 @@
|
||||
import { VectorSearch } from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import OptionCard from '../option-card'
|
||||
|
||||
const VectorSearchCard = () => {
|
||||
return (
|
||||
<OptionCard
|
||||
icon={<VectorSearch className='h-[15px] w-[15px] text-text-tertiary' />}
|
||||
title='Vector Search'
|
||||
description='Generate query embeddings and search for the text chunk most similar to its vector representation.'
|
||||
effectColor='purple'
|
||||
>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div>Vector Search Settings</div>
|
||||
<div>Additional Settings</div>
|
||||
</div>
|
||||
</OptionCard>
|
||||
)
|
||||
}
|
||||
|
||||
export default VectorSearchCard
|
||||
@ -1,17 +1,40 @@
|
||||
import type { FC } from 'react'
|
||||
import { memo } from 'react'
|
||||
import type { KnowledgeBaseNodeType } from './types'
|
||||
import InputVariable from './components/input-variable'
|
||||
import ChunkStructure from './components/chunk-structure'
|
||||
import IndexMethod from './components/index-method'
|
||||
import RetrievalSetting from './components/retrieval-setting'
|
||||
import EmbeddingModel from './components/embedding-model'
|
||||
import type { NodePanelProps } from '@/app/components/workflow/types'
|
||||
import {
|
||||
Group,
|
||||
GroupWithBox,
|
||||
} from '@/app/components/workflow/nodes/_base/components/layout'
|
||||
import Split from '../_base/components/split'
|
||||
|
||||
const Panel: FC<NodePanelProps<KnowledgeBaseNodeType>> = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className='py-2'>
|
||||
<div className='px-4 py-2'>
|
||||
<GroupWithBox boxProps={{ withBorderBottom: true }}>
|
||||
<InputVariable />
|
||||
</GroupWithBox>
|
||||
<Group
|
||||
className='py-3'
|
||||
withBorderBottom
|
||||
>
|
||||
<ChunkStructure />
|
||||
</Group>
|
||||
<GroupWithBox>
|
||||
<div className='space-y-3'>
|
||||
<IndexMethod />
|
||||
<EmbeddingModel />
|
||||
<div className='pt-1'>
|
||||
<Split className='h-[1px]' />
|
||||
</div>
|
||||
<RetrievalSetting />
|
||||
</div>
|
||||
</div>
|
||||
</GroupWithBox>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||