@gientech/modual 2.0.4 → 2.0.5

package/src/modules/assistantConfig/components/Graph.tsx

@@ -0,0 +1,177 @@
+import { useState, useEffect, useRef } from 'react';
+import ResourceBinderItem from './ResourceBinderItem';
+import SearchableSelector, { type SearchableSelectorRef } from './SearchableSelector';
+import { Button, Modal } from 'antd';
+import { Plus } from 'lucide-react';
+import Icon from '../assets/graph.svg';
+import AxiosInstance from '../server';
+
+const GraphSection = ({ url, token, role, eventsEmit, sectionData }: any) => {
+  const [options, setOptions]: any = useState([]);
+  const [data, setData]: any = useState([]);
+  const [isModalShow, setIsModalShow] = useState(false);
+  const selectorRef = useRef<SearchableSelectorRef>(null);
+
+  const { fetchGraphs } = AxiosInstance({
+    url,
+    token,
+    role,
+    eventsEmit,
+  });
+
+  useEffect(() => {
+    getList();
+  }, []);
+
+  useEffect(() => {
+    if (sectionData) {
+      let _data = [] as any;
+      (sectionData || []).map((g: any) => {
+        const _targetGraph = (options || []).find((i: any) => i.key === g.index_name);
+        if (_targetGraph) {
+          const { key, label } = _targetGraph;
+          _data.push({
+            key,
+            label,
+          });
+        }
+      });
+      setData(_data);
+    }
+  }, [sectionData, options]);
+
+  const getList = async () => {
+    try {
+      const res = await fetchGraphs();
+      if (res?.dataList) {
+        const options = (res?.dataList || []).map((item: any) => {
+          return {
+            key: item.schemaId,
+            label: item.name,
+          };
+        });
+        setOptions(options);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleEventsEmit = (name: string, eventsData?: any) => {
+    switch (name) {
+      case 'removeItem':
+        const _data = data.filter((p: any) => p.key !== eventsData.key);
+        setData([..._data]);
+        handleDatatoSubmit(_data);
+        break;
+    }
+  };
+
+  const handleDatatoSubmit = (selectedItems: any) => {
+    const graph_nb_name = (selectedItems || []).map((s: any) => {
+      return {
+        graph_name: s.label,
+        index_name: s.key,
+      };
+    });
+    eventsEmit && eventsEmit('graph_selected', graph_nb_name);
+  };
+
+  const handleOk = () => {
+    // 通过 ref 获取选中的项
+    const selectedItems = selectorRef.current?.getSelectedItems() || [];
+    setData(selectedItems);
+    setIsModalShow(false);
+    handleDatatoSubmit(selectedItems);
+  };
+
+  return (
+    <div style={{ borderBottom: '1px solid #E5E6EB', padding: '12px 0 ' }}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <img src={Icon} />
+          <span
+            className="font-medium "
+            style={{
+              marginLeft: '10px',
+            }}
+          >
+            图谱库
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            color="primary"
+            variant="outlined"
+            size="small"
+            icon={<Plus size={14} />}
+            onClick={() => setIsModalShow(true)}
+          >
+            添加
+          </Button>
+        </div>
+      </div>
+      {data?.length > 0 && (
+        <ResourceBinderItem
+          countText={data?.length > 0 ? `已选：${data?.length}个图谱` : undefined}
+          eventsEmit={handleEventsEmit}
+          data={data}
+        />
+      )}
+
+      <Modal
+        width={740}
+        title="选择图谱"
+        okText="确定"
+        cancelText="取消"
+        className="assistant-config-resource-bind-modal"
+        open={isModalShow}
+        onOk={handleOk}
+        destroyOnHidden
+        onCancel={() => setIsModalShow(false)}
+      >
+        <SearchableSelector
+          ref={selectorRef}
+          dataSource={options}
+          value={data}
+          searchPlaceholder="搜索名称..."
+          width="700px"
+          height="500px"
+          title="图谱"
+          renderItem={item => {
+            return (
+              <div className="flex ">
+                <img src={Icon} alt="add" />
+                <span
+                  style={{
+                    marginLeft: 8,
+                    marginRight: 8,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                  title={item.label}
+                >
+                  {item.label}
+                </span>
+              </div>
+            );
+          }}
+          renderSelectedItem={item => {
+            return (
+              <div className="flex items-center">
+                <img src={Icon} alt="add" />
+                <div style={{ marginLeft: '12px' }}>
+                  <div style={{ fontWeight: 500 }}>{item.label}</div>
+                </div>
+              </div>
+            );
+          }}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default GraphSection;

package/src/modules/assistantConfig/components/Knowledge.tsx

@@ -0,0 +1,276 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import ResourceBinderItem from './ResourceBinderItem';
+import SearchableSelector, { type SearchableSelectorRef } from './SearchableSelector';
+import { Button, Modal, Select } from 'antd';
+import { Plus } from 'lucide-react';
+import Icon from '../assets/knowledge.svg';
+import AxiosInstance from '../server';
+
+const KnowledgeSection = ({ url, token, role, sectionData, createBy, eventsEmit }: any) => {
+  const [options, setOptions]: any = useState();
+  const [data, setData]: any = useState([]);
+  const [isModalShow, setIsModalShow] = useState(false);
+  const selectorRef = useRef<SearchableSelectorRef>(null);
+  const [loading, setLoading] = useState(false);
+  const [tagOptions, setTagOptions] = useState([]);
+  const tagIdMap = useRef(new Map()).current;
+  const { fetchKnowledgeBase, getBizLabelLabels } = AxiosInstance({
+    url,
+    token,
+    role,
+    eventsEmit,
+  });
+
+  const hasInitialized = useRef(false);
+
+  useEffect(() => {
+    // 如果已经初始化过，不再执行
+    if (hasInitialized.current) return;
+
+    if (createBy) {
+      getList(createBy);
+      hasInitialized.current = true;
+    } else {
+      getList();
+      hasInitialized.current = true;
+    }
+  }, [createBy]);
+
+  useEffect(() => {
+    if (sectionData && options?.length > 0) {
+      const kbNames = sectionData?.knowledge_base_name_source;
+      const kbNamesArr = kbNames && (Array.isArray(kbNames) ? kbNames : kbNames.split(';'));
+      let _list = [] as any;
+      (kbNamesArr || []).forEach((kb: string) => {
+        const selKb = (sectionData?.selectedKnowledgeBase || []).find((k: any) => k.name == kb);
+        const _targetKb = (options || []).find((i: any) => i.knowledge_base_name_source === kb);
+        if (_targetKb) {
+          const { key, label, knowledge_base_name, knowledge_base_name_source } = _targetKb;
+          _list.push({
+            key,
+            label,
+            knowledge_base_name, //初始名
+            knowledge_base_name_source, //展示名
+            tags: selKb?.labels,
+          });
+        }
+      });
+      setData(_list);
+    }
+  }, [sectionData, options]);
+
+  const getList = async (params?: any) => {
+    try {
+      const res = await fetchKnowledgeBase(params);
+      if (res) {
+        const options = (res || []).map((kb: any) => {
+          // 没错： knowledge_base_name_source是展示名， knowledge_base_name是初始名
+          return {
+            key: kb.id,
+            label: kb.kbName, //展示名
+            knowledge_base_name: kb.primitiveName, //初始名
+            knowledge_base_name_source: kb.kbName, //展示名
+          };
+        });
+        setOptions(options);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleEventsEmit = (name: string, eventsData?: any) => {
+    switch (name) {
+      case 'removeItem':
+        const _data = data.filter((p: any) => p.key !== eventsData.key);
+        setData([..._data]);
+        handleDatatoSubmit(_data);
+        break;
+      case 'removeTag':
+        const index = data.findIndex((d: any) => d.key == eventsData.key);
+        if (index !== -1) {
+          // 替换元素
+          data[index] = eventsData;
+        }
+
+        setData([...data]);
+        handleDatatoSubmit(data);
+        break;
+    }
+  };
+
+  const handleDatatoSubmit = (selectedItems: any) => {
+    const knowledge_base_name = (selectedItems || [])
+      .map((s: any) => s?.knowledge_base_name || '')
+      .filter((key: string) => key)
+      .join(';');
+    const knowledge_base_name_source = (selectedItems || [])
+      .map((s: any) => s?.knowledge_base_name_source || '')
+      .filter((key: string) => key)
+      .join(';');
+    const selectedKnowledgeBase = (selectedItems || [])
+      .filter((s: any) => Array.isArray(s?.tags) && s.tags?.length > 0)
+      .map((s: any) => {
+        return {
+          id: s.key,
+          name: s.label,
+          knowledge_base_name_source: s.knowledge_base_name_source,
+          labels: s.tags,
+        };
+      });
+
+    eventsEmit &&
+      eventsEmit('knowledge_selected', {
+        knowledge_base_name,
+        knowledge_base_name_source,
+        selectedKnowledgeBase,
+      });
+  };
+
+  const handleOk = () => {
+    // 通过 ref 获取选中的项
+    const selectedItems = selectorRef.current?.getSelectedItems() || [];
+    setData(selectedItems);
+    setIsModalShow(false);
+    handleDatatoSubmit(selectedItems);
+  };
+
+  // 监听下拉框展开事件
+  const handleDropdownVisibleChange = async (open: boolean, targetId: number) => {
+    if (open) {
+      const o = tagIdMap.get(targetId);
+      if (o) {
+        setTagOptions(o);
+        return;
+      }
+      // 如果尚未加载过数据，则发起请求
+      if (!loading) {
+        try {
+          setLoading(true);
+          const res: any = await getBizLabelLabels({ kbNames: [targetId] });
+
+          if (Array.isArray(res)) {
+            const label = res.length ? res[0].label : '';
+            const labels = label
+              ? (label || '').split(',').map((item: any) => {
+                  return { label: item, value: item };
+                })
+              : [];
+
+            tagIdMap.set(targetId, labels);
+            setTagOptions(labels);
+          }
+          setLoading(false);
+        } catch (error) {
+          console.error('Error fetching data:', error);
+          setLoading(false);
+        }
+      }
+    }
+  };
+
+  return (
+    <div style={{ borderBottom: '1px solid #E5E6EB', padding: '12px 0 ' }}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <img src={Icon} />
+          <span
+            className="font-medium "
+            style={{
+              marginLeft: '10px',
+            }}
+          >
+            知识库
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            color="primary"
+            variant="outlined"
+            size="small"
+            icon={<Plus size={14} />}
+            onClick={() => setIsModalShow(true)}
+          >
+            添加
+          </Button>
+        </div>
+      </div>
+      {data?.length > 0 && (
+        <ResourceBinderItem
+          countText={data?.length > 0 ? `已选：${data?.length}个知识库` : undefined}
+          eventsEmit={handleEventsEmit}
+          data={data}
+        />
+      )}
+
+      <Modal
+        width={740}
+        className="assistant-config-resource-bind-modal"
+        title="选择知识库"
+        okText="确定"
+        cancelText="取消"
+        open={isModalShow}
+        onOk={handleOk}
+        onCancel={() => setIsModalShow(false)}
+        destroyOnHidden
+      >
+        <SearchableSelector
+          ref={selectorRef}
+          dataSource={options}
+          value={data}
+          searchPlaceholder="搜索名称..."
+          width="700px"
+          height="500px"
+          title="知识库"
+          renderItem={item => {
+            return (
+              <div className="flex ">
+                <img src={Icon} alt="add" />
+                <span
+                  style={{
+                    marginLeft: 8,
+                    marginRight: 8,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                  title={item.label}
+                >
+                  {item.label}
+                </span>
+              </div>
+            );
+          }}
+          renderSelectedItem={(item, updateItemData) => {
+            return (
+              <div className="flex ">
+                <img src={Icon} alt="add" />
+                <div style={{ marginLeft: '12px' }}>
+                  <div style={{ marginBottom: '8px', fontWeight: 500 }}>{item.label}</div>
+                  <Select
+                    mode="tags"
+                    placeholder="选择标签..."
+                    maxTagCount={1}
+                    value={item.tags || []}
+                    onChange={tags => {
+                      updateItemData(tags);
+                    }}
+                    style={{ width: 250 }}
+                    options={tagOptions}
+                    loading={loading}
+                    onOpenChange={(open: boolean) => {
+                      handleDropdownVisibleChange(open, item.knowledge_base_name);
+                    }}
+                  />
+                </div>
+              </div>
+            );
+          }}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default React.memo(KnowledgeSection);

package/src/modules/assistantConfig/components/NotFoundContent.tsx

@@ -0,0 +1,21 @@
+const NotFoundContent = () => {
+  return (
+    <div className="w-full h-[80px] rounded-md flex flex-col justify-center items-center">
+      <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+        <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+          <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+          <g fill-rule="nonzero" stroke="#d9d9d9">
+            <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+            <path
+              d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+              fill="#fafafa"
+            ></path>
+          </g>
+        </g>
+      </svg>
+      <div>暂无可用模型</div>
+    </div>
+  );
+};
+
+export default NotFoundContent;

package/src/modules/assistantConfig/components/Paragraph.tsx

@@ -0,0 +1,51 @@
+import { useState, type PropsWithChildren } from 'react';
+import { ChevronUp, ChevronDown } from 'lucide-react';
+type ParagraphTitleProps = {
+  title: string;
+  defaultExpanded?: boolean;
+  className?: string;
+};
+
+const ParagraphTitle = ({
+  title,
+  defaultExpanded = true,
+  className,
+  children,
+}: PropsWithChildren<ParagraphTitleProps>) => {
+  const [expanded, setExpanded] = useState<boolean>(defaultExpanded);
+
+  return (
+    <div className={className}>
+      <div className="flex items-center justify-between" style={{ marginBottom: '10px' }}>
+        <div className="flex items-center">
+          <div
+            style={{
+              width: '3px',
+              height: '12px',
+              backgroundColor: '#4E6EF2',
+              borderRadius: '6px',
+              marginRight: '6px',
+            }}
+          ></div>
+          <div className="font-bold">{title}</div>
+        </div>
+        {expanded ? (
+          <ChevronUp onClick={() => setExpanded(v => !v)} color="#4E6EF2" size={18} />
+        ) : (
+          <ChevronDown onClick={() => setExpanded(v => !v)} color="#4E5969" size={18} />
+        )}
+      </div>
+      {children ? (
+        <div
+          style={{
+            display: expanded ? 'block' : 'none',
+          }}
+        >
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default ParagraphTitle;

package/src/modules/assistantConfig/components/ParamsItem.tsx

@@ -0,0 +1,39 @@
+import { Form, Col } from 'antd';
+import { useMemo } from 'react';
+import SliderInput from './SliderInput';
+const { Item } = Form;
+
+const ParamsItem = ({ label, name, configScale }: any) => {
+  const config = useMemo(() => {
+    return configScale[name];
+  }, [configScale]);
+
+  const validateNumber = (min: number, max: number) => ({
+    validator(_: any, value: any) {
+      // 自定义验证逻辑
+      if (value === null || value === undefined) {
+        return Promise.reject('请输入有效数字');
+      }
+      if (typeof +value !== 'number' || isNaN(+value)) {
+        return Promise.reject('只能输入数字');
+      }
+      if (value < min || value > max) {
+        return Promise.reject(`请输入${min}到${max}之间的数字`);
+      }
+      return Promise.resolve();
+    },
+  });
+  return (
+    <Col span={12}>
+      <Item
+        label={label}
+        name={name}
+        tooltip={config.tooltip}
+        rules={[{ required: true, message: '' }, validateNumber(config.min, config.max)]}
+      >
+        <SliderInput min={config.min} max={config.max} step={config.step} />
+      </Item>
+    </Col>
+  );
+};
+export default ParamsItem;

package/src/modules/assistantConfig/components/ResourceBinderItem.tsx

@@ -0,0 +1,133 @@
+import { useState } from 'react';
+import { Tag, Button } from 'antd';
+import { ChevronUp, ChevronDown, CircleX, X } from 'lucide-react';
+
+interface Items {
+  key: string;
+  label: string;
+  tags?: string[];
+}
+
+const ResourceBinderItem = ({
+  countText,
+  eventsEmit,
+  data,
+}: {
+  countText?: string;
+  eventsEmit: (name: string, data?: any) => void;
+  data: Items[];
+}) => {
+  const [expanded, setExpanded] = useState(true);
+  return (
+    <div
+      style={{
+        marginTop: 8,
+      }}
+    >
+      {countText && (
+        <div className="flex items-center gap-2">
+          <span style={{ color: expanded ? '#4E6EF2' : '#4E5969' }}>{countText}</span>
+          {expanded ? (
+            <ChevronUp onClick={() => setExpanded(v => !v)} color="#4E6EF2" size={14} />
+          ) : (
+            <ChevronDown onClick={() => setExpanded(v => !v)} color="#4E5969" size={14} />
+          )}
+        </div>
+      )}
+
+      <div
+        style={{
+          display: expanded ? 'block' : 'none',
+        }}
+      >
+        {data.map(item => (
+          <BindTagItem key={item.key} item={item} eventsEmit={eventsEmit} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const BindTagItem = ({ item, eventsEmit }: any) => {
+  const [expanded, setExpanded] = useState(true);
+
+  return (
+    <div
+      key={item.key}
+      className="flex items-center justify-between"
+      style={{ padding: '8px 12px', borderRadius: 6 }}
+    >
+      <div>
+        <div style={{ color: '#1D2129' }} className="flex items-center">
+          {item.label}
+          {item?.tags?.length > 0 && (
+            <>
+              <span
+                style={{
+                  color: '#4E5969',
+                  marginLeft: '6px',
+                  marginRight: 6,
+                }}
+              >
+                ({item?.tags?.length}个标签)
+              </span>
+              {expanded ? (
+                <ChevronUp onClick={() => setExpanded(v => !v)} color="#4E6EF2" size={14} />
+              ) : (
+                <ChevronDown onClick={() => setExpanded(v => !v)} color="#4E5969" size={14} />
+              )}
+            </>
+          )}
+        </div>
+
+        {item?.tags?.length > 0 && (
+          <div
+            className="flex flex-wrap gap-4"
+            style={{
+              display: expanded ? 'block' : 'none',
+              marginTop: 8,
+            }}
+          >
+            {(item?.tags || []).map((tag: string) => (
+              <Button
+                key={tag}
+                iconPosition="end"
+                type="text"
+                style={{
+                  backgroundColor: '#F0F0F0',
+                  padding: '2px 6px',
+                  height: 22,
+                  borderRadius: 2,
+                  color: '#1D2129',
+                  margin: 5,
+                }}
+                icon={
+                  <X
+                    size={14}
+                    color="#86909C"
+                    onClick={() => {
+                      const newItem = {
+                        ...item,
+                        tags: item.tags.filter((t: any) => t !== tag),
+                      };
+                      eventsEmit(`removeTag`, newItem);
+                    }}
+                  />
+                }
+              >
+                {tag}
+              </Button>
+            ))}
+          </div>
+        )}
+      </div>
+      <Button
+        type="text"
+        icon={<CircleX size={14} />}
+        onClick={() => eventsEmit(`removeItem`, item)}
+      ></Button>
+    </div>
+  );
+};
+
+export default ResourceBinderItem;