test-chat-sdk 0.0.0

package/src/components/ChatItem/ParseTip.tsx

@@ -0,0 +1,322 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import { ChatContextType, DateInfoType, EntityInfoType, FilterItemType } from '../../common/type';
+import { Button, DatePicker, Row, Col } from 'antd';
+import { CheckCircleFilled, CloseCircleFilled, ReloadOutlined } from '@ant-design/icons';
+import Loading from './Loading';
+import FilterItem from './FilterItem';
+import MarkDown from '../ChatMsg/MarkDown';
+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 { getDataSetDetail } from '../../service';
+
+import 'dayjs/locale/zh-cn';
+
+dayjs.extend(quarterOfYear);
+dayjs.locale('zh-cn');
+
+const { RangePicker } = DatePicker;
+
+type Props = {
+  parseLoading: boolean;
+  parseInfoOptions: ChatContextType[];
+  parseTip: string;
+  currentParseInfo?: ChatContextType;
+  agentId?: number;
+  dimensionFilters: FilterItemType[];
+  dateInfo: DateInfoType;
+  entityInfo: EntityInfoType;
+  integrateSystem?: string;
+  parseTimeCost?: number;
+  isDeveloper?: boolean;
+  isSimpleMode?: 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 ParseTip: React.FC<Props> = ({
+  isSimpleMode = false,
+  parseLoading,
+  parseInfoOptions,
+  parseTip,
+  currentParseInfo,
+  agentId,
+  dimensionFilters,
+  dateInfo,
+  entityInfo,
+  integrateSystem,
+  parseTimeCost,
+  isDeveloper,
+  onSelectParseInfo,
+  onSwitchEntity,
+  onFiltersChange,
+  onDateInfoChange,
+  onRefresh,
+  handlePresetClick,
+  setSelectedDataSetIds,
+}) => {
+  const [availableDataSets, setAvailableDataSets] = useState<any[]>([]);
+  const [loadingDataSets, setLoadingDataSets] = useState(false);
+  
+  // 获取候选数据集的详细信息
+  useEffect(() => {
+    const fetchCandidateDataSets = async () => {
+      // 优先使用parseInfoOptions中的所有数据集选项，确保切换后仍然显示所有可用数据集
+      const dataSetsFromOptions = parseInfoOptions.map(option => option.dataSet).filter(Boolean);
+      
+      // 获取所有唯一的数据集ID（从parseInfoOptions和currentParseInfo中）
+      const allDataSetIds = new Set<number>();
+      
+      // 从parseInfoOptions中添加所有数据集ID
+      parseInfoOptions.forEach(option => {
+        if (option.dataSet?.id) {
+          allDataSetIds.add(option.dataSet.id);
+        }
+        if (option.dataSetIds) {
+          option.dataSetIds.forEach(id => allDataSetIds.add(id));
+        }
+      });
+      
+      // 从currentParseInfo中添加数据集ID
+      if (currentParseInfo?.dataSetIds) {
+        currentParseInfo.dataSetIds.forEach(id => allDataSetIds.add(id));
+      }
+      if (currentParseInfo?.dataSet?.id) {
+        allDataSetIds.add(currentParseInfo.dataSet.id);
+      }
+      
+      const uniqueDataSetIds = Array.from(allDataSetIds);
+      
+      if (uniqueDataSetIds.length > 0) {
+        setLoadingDataSets(true);
+        try {
+          // 获取所有唯一数据集的详细信息
+          const dataSetPromises = uniqueDataSetIds.map(dataSetId => 
+            getDataSetDetail(dataSetId).then(response => response.data?.data || response.data)
+          );
+          const dataSetDetails = await Promise.all(dataSetPromises);
+          setAvailableDataSets(dataSetDetails);
+        } catch (error) {
+          console.error('获取候选数据集信息失败:', error);
+          // 如果API调用失败，回退到使用parseInfoOptions中的数据集信息
+          setAvailableDataSets(dataSetsFromOptions);
+        } finally {
+          setLoadingDataSets(false);
+        }
+      } else {
+        // 始终使用parseInfoOptions中的数据集信息，确保显示所有可用数据集
+        setAvailableDataSets(dataSetsFromOptions);
+      }
+    };
+    
+    fetchCandidateDataSets();
+  }, [currentParseInfo?.dataSetIds, currentParseInfo?.dataSet?.id, 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`}>
+        <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(
+              `${prefixCls}-content-container`,
+              tipNode === null && `${prefixCls}-empty-content-container`,
+              failed && `${prefixCls}-content-container-failed`
+            )}
+          >
+            {tipNode}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (parseLoading) {
+    return getNode('意图解析中');
+  }
+
+  if (parseTip) {
+    return getNode(
+      <>
+        意图解析失败
+        {!!parseTimeCost && isDeveloper && (
+          <span className={`${prefixCls}-title-tip`}>(耗时: {parseTimeCost}ms)</span>
+        )}
+      </>,
+      parseTip,
+      true
+    );
+  }
+
+  if (isSimpleMode || parseInfoOptions.length === 0) {
+    return null;
+  }
+
+  const {
+    modelId,
+    queryMode,
+    properties,
+    entity,
+    nativeQuery,
+    textInfo = '',
+  } = currentParseInfo || {};
+
+  const entityAlias = entity?.alias?.[0]?.split('.')?.[0];
+
+  const getFilterContent = (filters: any) => {
+    const itemValueClass = `${prefixCls}-tip-item-value`;
+    const { startDate, endDate } = dateInfo || {};
+    const tipItemOptionClass = classNames(`${prefixCls}-tip-item-option`, {
+      [`${prefixCls}-mobile-tip-item-option`]: isMobile,
+    });
+    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"
+                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
+            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 = () => {
+    return (
+      <>
+        {(!!dateInfo || !!dimensionFilters?.length) && (
+          <div className={`${prefixCls}-tip-item`}>
+            <div className={`${prefixCls}-tip-item-name`}>筛选条件：</div>
+            <div className={`${prefixCls}-tip-item-content`}>
+              {getFilterContent(dimensionFilters)}
+            </div>
+          </div>
+        )}
+        <Button className={`${prefixCls}-reload`} size="small" onClick={() => onRefresh(currentParseInfo)}>
+          <ReloadOutlined />
+          重新查询
+        </Button>
+      </>
+    );
+  };
+
+  const { type: agentType } = properties || {};
+
+  const tipNode = (
+    <div className={`${prefixCls}-tip`}>
+      {getTipNode({ 
+        parseInfo: currentParseInfo, 
+        dimensionFilters, 
+        entityInfo,
+        onSwitchDataSet: (selectedDataSet) => {
+          // 设置选择的数据集ID并重新调用查询
+          if (selectedDataSet.id !== currentParseInfo?.dataSet?.id) {
+            // 直接设置数据集ID并重新调用查询
+            setSelectedDataSetIds([selectedDataSet.id]);
+            // 立即使用新选择的数据集ID刷新查询
+            // 先更新状态，然后调用onRefresh
+              setTimeout(() => {
+                onRefresh({
+                  ...currentParseInfo,
+                  dataSet: selectedDataSet,
+                  dataSetIds: [selectedDataSet.id],
+                  id: currentParseInfo?.id || 0
+                } as ChatContextType);
+              }, 0);
+          }
+        },
+        availableDataSets: availableDataSets,
+        loadingDataSets: loadingDataSets
+      })}
+      {!(!!agentType && queryMode !== 'LLM_S2SQL') && getFiltersNode()}
+    </div>
+  );
+
+  return getNode(
+    <div className={`${prefixCls}-title-bar`}>
+      <div>
+        意图解析
+        {!!parseTimeCost && isDeveloper && (
+          <span className={`${prefixCls}-title-tip`}>(耗时: {parseTimeCost}ms)</span>
+        )}
+      </div>
+    </div>,
+    // isSimpleMode ? <MarkDown markdown={textInfo} /> : queryMode === 'PLAIN_TEXT' ? null : tipNode
+    queryMode === 'PLAIN_TEXT' ? null : tipNode
+  );
+};
+
+export default ParseTip;

package/src/components/ChatItem/ParseTipUtils.tsx

@@ -0,0 +1,205 @@
+import { ChatContextTypeQueryTypeEnum } from '../../common/constants';
+import { AGG_TYPE_MAP, PREFIX_CLS } from '../../common/constants';
+import { useState } from 'react';
+import { Dropdown, Menu } from 'antd';
+
+export const MAX_OPTION_VALUES_COUNT = 2;
+
+export const prefixCls = `${PREFIX_CLS}-item`;
+
+export const getTipNode = ({ parseInfo, dimensionFilters, entityInfo, onSwitchDataSet, availableDataSets, loadingDataSets }) => {
+  const {
+    dataSet,
+    dimensions,
+    metrics,
+    aggType,
+    queryMode,
+    queryType,
+    properties,
+    entity,
+    elementMatches,
+  } = parseInfo || {};
+  const dimensionItems = dimensions?.filter(item => item.type === 'DIMENSION');
+  const itemValueClass = `${prefixCls}-tip-item-value`;
+  const entityId = dimensionFilters?.length > 0 ? dimensionFilters[0].value : undefined;
+  const entityAlias = entity?.alias?.[0]?.split('.')?.[0];
+  const entityName = elementMatches?.find(item => item.element?.type === 'ID')?.element.name;
+
+  const { type: agentType, name: agentName } = properties || {};
+
+  const fields =
+    queryMode === 'TAG_DETAIL' ? dimensionItems?.concat(metrics || []) : dimensionItems;
+
+  // 处理数据集切换菜单
+  const handleDataSetSelect = (selectedDataSet) => {
+    if (onSwitchDataSet && selectedDataSet.id !== dataSet?.id) {
+      onSwitchDataSet(selectedDataSet);
+    }
+  };
+
+  const renderDataSetMenu = () => {
+    if (loadingDataSets) {
+      return (
+        <Menu>
+          <Menu.Item key="loading" disabled>
+            <div style={{ padding: '8px 12px', color: '#999' }}>
+              加载中...
+            </div>
+          </Menu.Item>
+        </Menu>
+      );
+    }
+
+    if (!availableDataSets || availableDataSets.length <= 1) {
+      return null;
+    }
+
+    const menuItems = availableDataSets
+      .map(ds => ({
+        key: ds.id,
+        label: (
+          <div 
+            onClick={() => handleDataSetSelect(ds)}
+            style={{ 
+              padding: '8px 12px', 
+              cursor: 'pointer',
+              backgroundColor: ds.id === dataSet?.id ? '#f0f8ff' : 'transparent',
+              fontWeight: ds.id === dataSet?.id ? 'bold' : 'normal',
+              color: ds.id === dataSet?.id ? '#1890ff' : '#333'
+            }}
+          >
+            {ds.name}
+            {ds.id === dataSet?.id && (
+              <span style={{ marginLeft: '8px', color: '#52c41a', fontSize: '12px' }}>
+                ✓ 当前使用
+              </span>
+            )}
+          </div>
+        ),
+      }));
+
+    if (menuItems.length === 0) {
+      return null;
+    }
+
+    return (
+      <Menu>
+        {menuItems.map(item => (
+          <Menu.Item key={item.key}>
+            {item.label}
+          </Menu.Item>
+        ))}
+      </Menu>
+    );
+  };
+
+  return (
+    <div className={`${prefixCls}-tip-content`}>
+      {!!agentType && queryMode !== 'LLM_S2SQL' ? (
+        <div className={`${prefixCls}-tip-item`}>
+          将由{agentType === 'plugin' ? '插件' : '内置'}工具
+          <span className={itemValueClass}>{agentName}</span>来解答
+        </div>
+      ) : (
+        <>
+          {(queryMode?.includes('ENTITY') || queryMode === 'LLM_S2SQL') &&
+          typeof entityId === 'string' &&
+          !!entityAlias &&
+          !!entityName ? (
+            <div className={`${prefixCls}-tip-item`}>
+              <div className={`${prefixCls}-tip-item-name`}>{entityAlias}：</div>
+              <div className={itemValueClass}>{entityName}</div>
+            </div>
+          ) : (
+            <div className={`${prefixCls}-tip-item`}>
+              <div className={`${prefixCls}-tip-item-name`}>数据集：</div>
+              <div className={itemValueClass}>
+                <Dropdown
+                  overlay={renderDataSetMenu() || <Menu />}
+                  placement="bottomLeft"
+                  trigger={['click']}
+                  disabled={loadingDataSets || !availableDataSets || availableDataSets.length <= 1}
+                >
+                  <span 
+                    style={{ 
+                      cursor: (loadingDataSets || !availableDataSets || availableDataSets.length <= 1) ? 'default' : 'pointer',
+                      textDecoration: (loadingDataSets || !availableDataSets || availableDataSets.length <= 1) ? 'none' : 'underline'
+                    }}
+                  >
+                    {loadingDataSets ? '加载中...' : dataSet?.name}
+                    {!loadingDataSets && availableDataSets && availableDataSets.length > 1 && (
+                      <span style={{ marginLeft: '4px', fontSize: '12px' }}>▼</span>
+                    )}
+                  </span>
+                </Dropdown>
+              </div>
+            </div>
+          )}
+          {(queryType === ChatContextTypeQueryTypeEnum.AGGREGATE ||
+            queryType === 'METRIC_TAG' ||
+            queryType === 'DETAIL') && (
+            <div className={`${prefixCls}-tip-item`}>
+              <div className={`${prefixCls}-tip-item-name`}>，可点击切换，查询模式：</div>
+              <div className={itemValueClass}>
+                {queryType === ChatContextTypeQueryTypeEnum.AGGREGATE || queryType === 'METRIC_TAG'
+                  ? '聚合模式'
+                  : '明细模式'}
+              </div>
+            </div>
+          )}
+          {queryType !== 'DETAIL' &&
+            metrics &&
+            metrics.length > 0 &&
+            !dimensions?.some(item => item.bizName?.includes('_id')) && (
+              <div className={`${prefixCls}-tip-item`}>
+                <div className={`${prefixCls}-tip-item-name`}>指标：</div>
+                <div className={itemValueClass}>
+                  {metrics.map(metric => metric.name).join('、')}
+                </div>
+              </div>
+            )}
+          {[
+            'METRIC_GROUPBY',
+            'METRIC_ORDERBY',
+            'TAG_DETAIL',
+            'LLM_S2SQL',
+            'METRIC_FILTER',
+          ].includes(queryMode!) &&
+            fields &&
+            fields.length > 0 && (
+              <div className={`${prefixCls}-tip-item`}>
+                <div className={`${prefixCls}-tip-item-name`}>
+                  {queryType === 'DETAIL' ? '查询字段' : '下钻维度'}：
+                </div>
+                <div className={itemValueClass}>
+                  {fields
+                    .slice(0, MAX_OPTION_VALUES_COUNT)
+                    .map(field => field.name)
+                    .join('、')}
+                  {fields.length > MAX_OPTION_VALUES_COUNT && '...'}
+                </div>
+              </div>
+            )}
+          {queryMode !== 'TAG_ID' &&
+            !dimensions?.some(item => item.bizName?.includes('_id')) &&
+            entityInfo?.dimensions
+              ?.filter(dimension => dimension.value != null)
+              .map(dimension => (
+                <div className={`${prefixCls}-tip-item`} key={dimension.itemId}>
+                  <div className={`${prefixCls}-tip-item-name`}>{dimension.name}：</div>
+                  <div className={itemValueClass}>{dimension.value}</div>
+                </div>
+              ))}
+          {(queryMode === 'METRIC_ORDERBY' || queryMode === 'METRIC_MODEL') &&
+            aggType &&
+            aggType !== 'NONE' && (
+              <div className={`${prefixCls}-tip-item`}>
+                <div className={`${prefixCls}-tip-item-name`}>聚合方式：</div>
+                <div className={itemValueClass}>{AGG_TYPE_MAP[aggType]}</div>
+              </div>
+            )}
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/ChatItem/SimilarQuestionItem.tsx

@@ -0,0 +1,84 @@
+import { CheckCircleFilled, DownOutlined, LoadingOutlined, UpOutlined } from '@ant-design/icons';
+import { PREFIX_CLS } from '../../common/constants';
+import { SimilarQuestionType } from '../../common/type';
+import { useEffect, useState } from 'react';
+import { querySimilarQuestions } from '../../service';
+
+type Props = {
+  queryId?: number;
+  similarQueries?: SimilarQuestionType[];
+  defaultExpanded?: boolean;
+  onSelectQuestion: (question: SimilarQuestionType) => void;
+};
+
+const SimilarQuestions: React.FC<Props> = ({
+  queryId,
+  similarQueries,
+  defaultExpanded,
+  onSelectQuestion,
+}) => {
+  const [similarQuestions, setSimilarQuestions] = useState<SimilarQuestionType[]>(
+    similarQueries || []
+  );
+  const [expanded, setExpanded] = useState(defaultExpanded || false);
+  const [loading, setLoading] = useState(false);
+
+  const tipPrefixCls = `${PREFIX_CLS}-item`;
+  const prefixCls = `${PREFIX_CLS}-similar-questions`;
+
+  const initData = async () => {
+    setLoading(true);
+    const res = await querySimilarQuestions(queryId!);
+    setLoading(false);
+    setSimilarQuestions(res.data?.similarQueries || []);
+  };
+
+  useEffect(() => {
+    if (expanded && similarQuestions?.length === 0 && queryId) {
+      initData();
+    }
+  }, [expanded, queryId]);
+
+  const onToggleExpanded = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <div className={`${tipPrefixCls}-parse-tip`}>
+      <div className={`${tipPrefixCls}-title-bar`}>
+        <CheckCircleFilled className={`${tipPrefixCls}-step-icon`} />
+        <div className={`${tipPrefixCls}-step-title`}>
+          推荐相似问题
+          <span className={`${prefixCls}-toggle-expand-btn`} onClick={onToggleExpanded}>
+            {loading ? <LoadingOutlined /> : expanded ? <UpOutlined /> : <DownOutlined />}
+          </span>
+        </div>
+      </div>
+      <div className={prefixCls}>
+        {expanded && (
+          <div className={`${prefixCls}-content`}>
+            {Array.isArray(similarQuestions) && similarQuestions.length > 0 ? (
+              similarQuestions?.slice(0, 5).map((question, index) => {
+                return (
+                  <div
+                    className={`${prefixCls}-question`}
+                    key={question.queryText}
+                    onClick={() => {
+                      onSelectQuestion(question);
+                    }}
+                  >
+                    {index + 1}. {question.queryText}
+                  </div>
+                );
+              })
+            ) : (
+              <>暂无推荐</>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SimilarQuestions;