@gientech/modual 1.2.7 → 1.2.9-fix

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

@@ -0,0 +1,144 @@
+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/databse.svg';
+import AxiosInstance from '../server';
+
+const maxCount = 10;
+
+const DatabaseSection = ({ url, token, role, eventsEmit, sectionData, disabled }: any) => {
+  const [options, setOptions]: any = useState([]);
+  const [data, setData]: any = useState([]);
+  const [isModalShow, setIsModalShow] = useState(false);
+  const selectorRef = useRef<SearchableSelectorRef>(null);
+
+  const { fetchDatabases } = AxiosInstance({
+    url,
+    token,
+    role,
+    eventsEmit,
+  });
+
+  useEffect(() => {
+    getList();
+  }, []);
+
+  useEffect(() => {
+    if (sectionData) {
+      setData(sectionData);
+    }
+  }, [sectionData]);
+
+  const getList = async () => {
+    try {
+      const res = await fetchDatabases();
+      if (res) {
+        const options = (res || []).map((item: any) => {
+          return {
+            key: item.primitiveName,
+            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]);
+        eventsEmit && eventsEmit('database_selected', _data);
+        break;
+    }
+  };
+
+  const handleOk = () => {
+    // 通过 ref 获取选中的项
+    const selectedItems = selectorRef.current?.getSelectedItems() || [];
+    setData(selectedItems);
+    setIsModalShow(false);
+    eventsEmit && eventsEmit('database_selected', 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)}
+            disabled={data.length >= maxCount || disabled}
+          >
+            添加
+          </Button>
+        </div>
+      </div>
+      {data?.length > 0 && (
+        <ResourceBinderItem
+          countText={data?.length > 0 ? `已选：${data?.length}个数据库` : undefined}
+          eventsEmit={handleEventsEmit}
+          data={data}
+        />
+      )}
+
+      <Modal
+        width={740}
+        title="选择数据库"
+        okText="确定"
+        cancelText="取消"
+        open={isModalShow}
+        onOk={handleOk}
+        onCancel={() => setIsModalShow(false)}
+        destroyOnHidden
+      >
+        <SearchableSelector
+          ref={selectorRef}
+          dataSource={options}
+          value={data}
+          searchPlaceholder="搜索数据库..."
+          width="700px"
+          height="500px"
+          title="数据库"
+          maxCount={maxCount}
+          renderItem={item => {
+            return (
+              <div className="flex ">
+                <img src={Icon} alt="add" />
+                <span
+                  style={{
+                    marginLeft: 8,
+                  }}
+                >
+                  {item.label}
+                </span>
+              </div>
+            );
+          }}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default DatabaseSection;

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

@@ -0,0 +1,156 @@
+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) {
+      const _data = sectionData.map((g: any) => {
+        return {
+          key: g.index_name,
+          label: g.graph_name,
+        };
+      });
+      setData(_data);
+    }
+  }, [sectionData]);
+
+  const getList = async () => {
+    try {
+      const res = await fetchGraphs();
+      if (res?.records) {
+        const options = (res?.records || []).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="取消"
+        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,
+                  }}
+                >
+                  {item.label}
+                </span>
+              </div>
+            );
+          }}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default GraphSection;

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

@@ -0,0 +1,266 @@
+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) => {
+  console.log('助手配置——zhishiku', role, sectionData, createBy);
+
+  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;
+      const kbNamesArr = kbNames && (Array.isArray(kbNames) ? kbNames : kbNames.split(';'));
+
+      const _list = (kbNamesArr || []).map((kb: string) => {
+        const selKb = (sectionData?.selectedKnowledgeBase || []).find((k: any) => k.name == kb);
+        const optionKb = (options || []).find((i: any) => i.label === kb);
+        const { key, label, knowledge_base_name, knowledge_base_name_source } = optionKb;
+        return {
+          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) => {
+          return {
+            key: kb.id,
+            label: kb.kbName,
+            knowledge_base_name: kb.kbName,
+            knowledge_base_name_source: kb.primitiveName,
+          };
+        });
+        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?.label || '')
+      .filter(key => key)
+      .join(';');
+    const knowledge_base_name_source = (selectedItems || [])
+      .map((s: any) => s?.knowledge_base_name_source || '')
+      .filter(key => key)
+      .join(';');
+    const selectedKnowledgeBase = (selectedItems || []).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}
+        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,
+                  }}
+                >
+                  {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;