test-chat-sdk 0.0.0

package/src/components/ChatItem/ExpandParseTip.tsx

@@ -0,0 +1,333 @@
+import React, { ReactNode, useState, useEffect } from 'react';
+import { ChatContextType, DateInfoType, EntityInfoType, FilterItemType } from '../../common/type';
+import { Button, DatePicker, Row, Col } from 'antd';
+import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
+import Loading from './Loading';
+import FilterItem from './FilterItem';
+import classNames from 'classnames';
+import { isMobile } from '../../utils/utils';
+import dayjs, { Dayjs } from 'dayjs';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import { prefixCls, getTipNode } from './ParseTipUtils';
+import MarkDown from '../ChatMsg/MarkDown';
+import { getDataSetDetail } from '../../service';
+
+import 'dayjs/locale/zh-cn';
+
+dayjs.extend(quarterOfYear);
+dayjs.locale('zh-cn');
+
+const { RangePicker } = DatePicker;
+
+type Props = {
+  isSimpleMode?: boolean;
+  parseInfoOptions: ChatContextType[];
+  agentId?: number;
+  integrateSystem?: string;
+  parseTimeCost?: number;
+  isDeveloper?: boolean;
+  onSelectParseInfo: (parseInfo: ChatContextType) => void;
+  onSwitchEntity: (entityId: string) => void;
+  onFiltersChange: (filters: FilterItemType[]) => void;
+  onDateInfoChange: (dateRange: any) => void;
+  onRefresh: (parseInfo?: ChatContextType) => void;
+  handlePresetClick: any;
+  setSelectedDataSetIds: (ids: number[]) => void;
+};
+
+type RangeValue = [Dayjs, Dayjs];
+type RangeKeys = '近7日' | '近14日' | '近30日' | '本周' | '本月' | '上月' | '本季度' | '本年';
+
+const ExpandParseTip: React.FC<Props> = ({
+  isSimpleMode = false,
+  parseInfoOptions,
+  agentId,
+  integrateSystem,
+  parseTimeCost,
+  isDeveloper,
+  onSelectParseInfo,
+  onSwitchEntity,
+  onFiltersChange,
+  onDateInfoChange,
+  onRefresh,
+  handlePresetClick,
+  setSelectedDataSetIds,
+}) => {
+  const [currentParseInfo, setCurrentParseInfo] = useState<ChatContextType>();
+  const [availableDataSets, setAvailableDataSets] = useState<any[]>([]);
+  const [loadingDataSets, setLoadingDataSets] = useState(false);
+
+  useEffect(() => {
+    const fetchDataSets = async () => {
+      // 优先使用parseInfoOptions中的所有数据集选项，确保切换后仍然显示所有可用数据集
+      const dataSetsFromOptions = parseInfoOptions.map(option => option.dataSet).filter(Boolean);
+      
+      const currentDataSetIds = currentParseInfo?.dataSetIds;
+      if (currentDataSetIds && currentDataSetIds.length > 1) {
+        setLoadingDataSets(true);
+        try {
+          const dataSetDetails = await Promise.all(
+            currentDataSetIds.map(async (dataSetId: number) => {
+              try {
+                const response = await getDataSetDetail(dataSetId);
+                return response.data?.data || response.data;
+              } catch (error) {
+                console.error(`Failed to fetch dataset ${dataSetId}:`, error);
+                return null;
+              }
+            })
+          );
+          const validDataSets = dataSetDetails.filter(Boolean);
+          if (validDataSets.length > 0) {
+            setAvailableDataSets(validDataSets);
+          } else {
+            // 回退到parseInfoOptions中的数据集信息
+            setAvailableDataSets(dataSetsFromOptions);
+          }
+        } catch (error) {
+          console.error('Failed to fetch datasets:', error);
+          setAvailableDataSets(dataSetsFromOptions);
+        } finally {
+          setLoadingDataSets(false);
+        }
+      } else {
+        // 始终使用parseInfoOptions中的数据集信息，确保显示所有可用数据集
+        setAvailableDataSets(dataSetsFromOptions);
+      }
+    };
+
+    fetchDataSets();
+  }, [currentParseInfo?.dataSetIds, parseInfoOptions]);
+
+  const ranges: Record<RangeKeys, RangeValue> = {
+    近7日: [dayjs().subtract(7, 'day'), dayjs()],
+    近14日: [dayjs().subtract(14, 'day'), dayjs()],
+    近30日: [dayjs().subtract(30, 'day'), dayjs()],
+    本周: [dayjs().startOf('week'), dayjs().endOf('week')],
+    本月: [dayjs().startOf('month'), dayjs().endOf('month')],
+    上月: [
+      dayjs().subtract(1, 'month').startOf('month'),
+      dayjs().subtract(1, 'month').endOf('month'),
+    ],
+    本季度: [dayjs().startOf('quarter'), dayjs().endOf('quarter')], // 使用 quarterOfYear 插件
+    本年: [dayjs().startOf('year'), dayjs().endOf('year')],
+  };
+
+  const getNode = (tipTitle: ReactNode, tipNode?: ReactNode, failed?: boolean) => {
+    return (
+      <div className={`${prefixCls}-parse-tip`}>
+        {isSimpleMode ? (
+          <></>
+        ) : (
+          <div className={`${prefixCls}-title-bar`}>
+            {!failed ? (
+              <CheckCircleFilled className={`${prefixCls}-step-icon`} />
+            ) : (
+              <CloseCircleFilled className={`${prefixCls}-step-error-icon`} />
+            )}
+            <div className={`${prefixCls}-step-title`}>
+              {tipTitle}
+              {tipNode === undefined && <Loading />}
+            </div>
+          </div>
+        )}
+
+        {(tipNode || tipNode === null) && (
+          <div
+            className={classNames(
+              !isSimpleMode && `${prefixCls}-content-container`,
+              tipNode === null && `${prefixCls}-empty-content-container`,
+              failed && `${prefixCls}-content-container-failed`
+            )}
+          >
+            {tipNode}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const { modelId, queryMode, entity, nativeQuery } = currentParseInfo || {};
+
+  const entityAlias = entity?.alias?.[0]?.split('.')?.[0];
+
+  const getFilterContent = (filters: any, dateInfo: DateInfoType) => {
+    const itemValueClass = `${prefixCls}-tip-item-value`;
+    const { startDate, endDate } = dateInfo || {};
+    const tipItemOptionClass = classNames(`${prefixCls}-tip-item-option`, {
+      [`${prefixCls}-mobile-tip-item-option`]: isMobile,
+    });
+    const disabled = true;
+    return (
+      <div className={`${prefixCls}-tip-item-filter-content`}>
+        {!!dateInfo && (
+          <div className={tipItemOptionClass}>
+            <span className={`${prefixCls}-tip-item-filter-name`}>数据时间：</span>
+            {nativeQuery ? (
+              <span className={itemValueClass}>
+                {startDate === endDate ? startDate : `${startDate} ~ ${endDate}`}
+              </span>
+            ) : (
+              <RangePicker
+                value={[dayjs(startDate), dayjs(endDate)]}
+                onChange={onDateInfoChange}
+                format="YYYY-MM-DD"
+                disabled={disabled}
+                renderExtraFooter={() => (
+                  <Row gutter={[28, 28]}>
+                    {Object.keys(ranges).map(key => (
+                      <Col key={key}>
+                        <Button
+                          size="small"
+                          onClick={() => handlePresetClick(ranges[key as RangeKeys])}
+                        >
+                          {key}
+                        </Button>
+                      </Col>
+                    ))}
+                  </Row>
+                )}
+              />
+            )}
+          </div>
+        )}
+        {filters?.map((filter: any, index: number) => (
+          <FilterItem
+            disabled={disabled}
+            modelId={modelId!}
+            filters={filters}
+            filter={filter}
+            index={index}
+            chatContext={currentParseInfo!}
+            entityAlias={entityAlias}
+            agentId={agentId}
+            integrateSystem={integrateSystem}
+            onFiltersChange={onFiltersChange}
+            onSwitchEntity={onSwitchEntity}
+            key={`${filter.name}_${index}`}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  const getFiltersNode = parseInfo => {
+    const { dateInfo, dimensionFilters } = parseInfo;
+    return (
+      <>
+        {(!!dateInfo || !!dimensionFilters?.length) && (
+          <div className={`${prefixCls}-tip-item`}>
+            <div className={`${prefixCls}-tip-item-name`}>筛选条件：</div>
+            <div className={`${prefixCls}-tip-item-content`}>
+              {getFilterContent(dimensionFilters, dateInfo)}
+            </div>
+          </div>
+        )}
+      </>
+    );
+  };
+
+  return getNode(
+    <div className={`${prefixCls}-title-bar`}>
+      <div>
+        意图确认
+        {!!parseTimeCost && isDeveloper && (
+          <span className={`${prefixCls}-title-tip`}>(耗时: {parseTimeCost}ms)</span>
+        )}
+      </div>
+    </div>,
+
+    <>
+      <div>
+        {parseInfoOptions.map((parseInfo, index) => {
+          const { queryMode, properties, textInfo, id, dimensionFilters, entityInfo } =
+            parseInfo || {};
+          const { type: agentType } = properties || {};
+          return isSimpleMode ? (
+            <>
+              <div style={{ marginBottom: 10 }}>
+                <span
+                  className={`${prefixCls}-content-parser-options-title`}
+                  style={{ display: 'flex' }}
+                >
+                  <span style={{ paddingTop: 3, marginRight: 10 }}>解析{index + 1}: </span>{' '}
+                  <MarkDown markdown={textInfo} />
+                </span>
+              </div>
+            </>
+          ) : (
+            <div
+              style={{ marginBottom: 10, paddingBottom: 10, borderBottom: '1px solid #eee' }}
+              key={`${id}-${textInfo}`}
+            >
+              <div style={{ marginBottom: 10, height: '30px', lineHeight: '30px' }}>
+                <span className={`${prefixCls}-content-parser-options-title`}>
+                  解析{index + 1}:
+                </span>
+              </div>
+              <div className={`${prefixCls}-tip`}>
+                <>
+                  {getTipNode({ 
+                    parseInfo, 
+                    dimensionFilters, 
+                    entityInfo,
+                    onSwitchDataSet: (selectedDataSet) => {
+                      // 使用新选择的数据集ID重新调用查询
+                      setSelectedDataSetIds([selectedDataSet.id]);
+                      // 先更新状态，然后调用onRefresh
+                      setTimeout(() => {
+                        onRefresh({
+                          ...parseInfo,
+                          dataSet: selectedDataSet,
+                          dataSetIds: [selectedDataSet.id],
+                          id: parseInfo?.id || 0,
+                        } as ChatContextType);
+                      }, 0);
+                    },
+                    availableDataSets,
+                    loadingDataSets
+                  })}
+                  {!(!!agentType && queryMode !== 'LLM_S2SQL') && getFiltersNode(parseInfo)}
+                </>
+              </div>
+            </div>
+          );
+        })}
+
+        {parseInfoOptions?.length > 1 && (
+          <div className={`${prefixCls}-content-parser-container`}>
+            <div className={`${prefixCls}-content-options`}>
+              {!currentParseInfo && (
+                <span className={`${prefixCls}-breathing-text`}>
+                  请选择适合的解析意图，并进行下一步:
+                </span>
+              )}
+
+              {parseInfoOptions.map((parseInfo, index) => (
+                <div
+                  className={`${prefixCls}-content-option ${
+                    parseInfo.id === currentParseInfo?.id
+                      ? `${prefixCls}-content-option-active`
+                      : ''
+                  } ${currentParseInfo ? `${prefixCls}-content-option-disabled` : ''}`}
+                  onClick={() => {
+                    if (currentParseInfo) {
+                      return;
+                    }
+                    setCurrentParseInfo(parseInfo);
+                    onSelectParseInfo(parseInfo);
+                  }}
+                  key={parseInfo.id}
+                >
+                  解析{index + 1}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ExpandParseTip;

package/src/components/ChatItem/FilterItem.tsx

@@ -0,0 +1,209 @@
+import { Select, Spin, InputNumber, DatePicker } from 'antd';
+import { PREFIX_CLS } from '../../common/constants';
+import { ChatContextType, FilterItemType } from '../../common/type';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { queryDimensionValues } from '../../service';
+import { debounce, isArray } from 'lodash';
+import SwicthEntity from './SwitchEntity';
+import dayjs from 'dayjs';
+
+type Props = {
+  modelId: number;
+  filters: FilterItemType[];
+  filter: FilterItemType;
+  index: number;
+  chatContext: ChatContextType;
+  agentId?: number;
+  disabled?: boolean;
+  entityAlias?: string;
+  integrateSystem?: string;
+  onFiltersChange: (filters: FilterItemType[]) => void;
+  onSwitchEntity: (entityId: string) => void;
+};
+
+const FilterItem: React.FC<Props> = ({
+  disabled = false,
+  modelId,
+  filters,
+  filter,
+  index,
+  chatContext,
+  agentId,
+  entityAlias,
+  integrateSystem,
+  onFiltersChange,
+  onSwitchEntity,
+}) => {
+  const [options, setOptions] = useState<{ label: string; value: string | null }[]>([]);
+  const [loading, setLoading] = useState(false);
+  const fetchRef = useRef(0);
+
+  const prefixCls = `${PREFIX_CLS}-filter-item`;
+
+  const initData = async () => {
+    const { data } = await queryDimensionValues(
+      modelId,
+      filter.bizName,
+      agentId!,
+      filter.elementID,
+      ''
+    );
+    setOptions(
+      data?.resultList?.map((item: any) => ({
+        label: item[filter.bizName],
+        value: item[filter.bizName],
+      })) || []
+    );
+  };
+
+  useEffect(() => {
+    if (
+      (typeof filter.value === 'string' || isArray(filter.value)) &&
+      options.length === 0 &&
+      integrateSystem !== 'showcase'
+    ) {
+      initData();
+    }
+  }, []);
+
+  const debounceFetcher = useMemo(() => {
+    const loadOptions = (value: string) => {
+      fetchRef.current += 1;
+      const fetchId = fetchRef.current;
+      setOptions([]);
+      setLoading(true);
+      queryDimensionValues(modelId, filter.bizName, agentId!, filter.elementID, value).then(
+        newOptions => {
+          if (fetchId !== fetchRef.current) {
+            return;
+          }
+          setOptions(
+            newOptions.data?.resultList.map((item: any) => ({
+              label: item[filter.bizName],
+              value: item[filter.bizName],
+            })) || []
+          );
+          setLoading(false);
+        }
+      );
+    };
+
+    return debounce(loadOptions, 500);
+  }, [queryDimensionValues]);
+
+  const onOperatorChange = (value: string) => {
+    const newFilters = filters.map((item, indexValue) => {
+      if (item.bizName === filter.bizName && index === indexValue) {
+        item.operator = value;
+      }
+      return item;
+    });
+    onFiltersChange(newFilters);
+  };
+
+  const onChange = (value: string | string[] | number | null) => {
+    const newFilters = filters.map((item, indexValue) => {
+      if (item.bizName === filter.bizName && index === indexValue) {
+        item.value =
+          typeof filter.value === 'number' || filter.value === null
+            ? value
+            : isArray(value)
+            ? value
+            : `${value}`;
+        if (isArray(value)) {
+          if (value.length === 1) {
+            item.operator = '=';
+            item.value = value[0];
+          } else {
+            item.operator = 'IN';
+            item.value = value;
+          }
+        } else {
+          item.value =
+            typeof filter.value === 'number' || filter.value === null ? value : `${value}`;
+        }
+      }
+      return item;
+    });
+    onFiltersChange(newFilters);
+  };
+
+  const onDateChange = (_: any, date: string | string[]) => {
+    const newFilters = filters.map((item, indexValue) => {
+      if (item.bizName === filter.bizName && index === indexValue) {
+        item.value = date;
+      }
+      return item;
+    });
+    onFiltersChange(newFilters);
+  };
+
+  return (
+    <span className={prefixCls}>
+      <span className={`${prefixCls}-filter-name`}>{filter.name}：</span>
+      {(typeof filter.value === 'number' ||
+        filter.value === null ||
+        (filter.operator && !['IN', '=', 'LIKE'].includes(filter.operator))) &&
+        !filter.bizName?.includes('_id') && (
+          <Select
+            options={[
+              { label: '大于等于', value: '>=' },
+              { label: '大于', value: '>' },
+              { label: '等于', value: '=' },
+              { label: '小于等于', value: '<=' },
+              { label: '小于', value: '<' },
+            ]}
+            disabled={disabled}
+            className={`${prefixCls}-operator-control`}
+            value={filter.operator}
+            onChange={onOperatorChange}
+          />
+        )}
+      {(typeof filter.value === 'number' || filter.value === null) &&
+      !filter.bizName?.includes('_id') ? (
+        <InputNumber
+          disabled={disabled}
+          className={`${prefixCls}-input-number-control`}
+          value={filter.value}
+          onChange={onChange}
+        />
+      ) : typeof filter.value === 'string' && dayjs(filter.value, 'YYYY-MM-DD').isValid() ? (
+        <DatePicker value={dayjs(filter.value)} onChange={onDateChange} allowClear={false} />
+      ) : (typeof filter.value === 'string' || isArray(filter.value)) &&
+        !filter.bizName?.includes('_id') ? (
+        <Select
+          disabled={disabled}
+          value={filter.value}
+          options={options.filter(option => option.value !== '' && option.value !== null)}
+          className={`${prefixCls}-select-control`}
+          onSearch={debounceFetcher}
+          notFoundContent={loading ? <Spin size="small" /> : null}
+          onChange={onChange}
+          mode="multiple"
+          showSearch
+          allowClear
+        />
+      ) : entityAlias &&
+        ['歌曲', '艺人'].includes(entityAlias) &&
+        filter.bizName?.includes('_id') ? (
+        <>
+          <SwicthEntity
+            entityName={filter.value}
+            chatContext={chatContext}
+            onSwitchEntity={onSwitchEntity}
+          />
+          <span className={`${prefixCls}-switch-entity-tip`}>
+            (如未匹配到相关{entityAlias}，可点击{entityAlias === '艺人' ? '歌手' : entityAlias}
+            ID切换)
+          </span>
+        </>
+      ) : (
+        <span className={`${prefixCls}-filter-value`}>
+          {typeof filter.value !== 'object' ? filter.value : ''}
+        </span>
+      )}
+    </span>
+  );
+};
+
+export default FilterItem;

package/src/components/ChatItem/Loading.tsx

@@ -0,0 +1,14 @@
+import { PREFIX_CLS } from '../../common/constants';
+
+const Loading = () => {
+  const prefixCls = `${PREFIX_CLS}-item`;
+  return (
+    <span className={`${prefixCls}-loading`}>
+      <span className={`${prefixCls}-loading-dot`} />
+      <span className={`${prefixCls}-loading-dot`} />
+      <span className={`${prefixCls}-loading-dot`} />
+    </span>
+  );
+};
+
+export default Loading;