test-chat-sdk 0.0.0

package/src/components/ChatMsg/Bar/index.tsx

@@ -0,0 +1,208 @@
+import { CHART_BLUE_COLOR, CHART_SECONDARY_COLOR, PREFIX_CLS } from '../../../common/constants';
+import { MsgDataType } from '../../../common/type';
+import {
+  formatByDataFormatType,
+  getChartLightenColor,
+  getFormattedValue,
+} from '../../../utils/utils';
+import type { ECharts } from 'echarts';
+import * as echarts from 'echarts';
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import NoPermissionChart from '../NoPermissionChart';
+import { ColumnType } from '../../../common/type';
+import { Spin } from 'antd';
+import { ChartItemContext } from '../../ChatItem';
+import { useExportByEcharts } from '../../../hooks';
+
+type Props = {
+  data: MsgDataType;
+  question?: string;
+  triggerResize?: boolean;
+  loading: boolean;
+  metricField: ColumnType;
+  onApplyAuth?: (model: string) => void;
+};
+
+const BarChart: React.FC<Props> = ({
+  data,
+  question="",
+  triggerResize,
+  loading,
+  metricField,
+  onApplyAuth,
+}) => {
+  const chartRef = useRef<any>();
+  const instanceRef = useRef<ECharts>();
+
+  const { queryColumns, queryResults, entityInfo } = data;
+
+  const categoryColumnName =
+    queryColumns?.find(column => column.showType === 'CATEGORY')?.bizName || '';
+  const metricColumn = queryColumns?.find(column => column.showType === 'NUMBER');
+  const metricColumnName = metricColumn?.bizName || '';
+
+  const renderChart = () => {
+    let instanceObj: any;
+    if (!instanceRef.current) {
+      instanceObj = echarts.init(chartRef.current);
+      instanceRef.current = instanceObj;
+    } else {
+      instanceObj = instanceRef.current;
+    }
+    const data = (queryResults || []);
+    const xData = data.map(item =>
+      item[categoryColumnName] !== undefined ? item[categoryColumnName] : '未知'
+    );
+    instanceObj.setOption({
+      xAxis: {
+        type: 'category',
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: CHART_SECONDARY_COLOR,
+          },
+        },
+        axisLabel: {
+          width: 200,
+          overflow: 'truncate',
+          showMaxLabel: true,
+          hideOverlap: false,
+          interval: 0,
+          color: '#333',
+          rotate: 30,
+        },
+        data: xData,
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            opacity: 0.3,
+          },
+        },
+        axisLabel: {
+          formatter: function (value: any) {
+            return value === 0
+              ? 0
+              : metricField.dataFormatType === 'percent'
+              ? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat)
+              : getFormattedValue(value);
+          },
+        },
+      },
+      tooltip: {
+        trigger: 'axis',
+        formatter: function (params: any[]) {
+          const param = params[0];
+          const valueLabels = params
+            .map(
+              (item: any) =>
+                `<div style="margin-top: 3px;">${
+                  item.marker
+                } <span style="display: inline-block; width: 70px; margin-right: 12px;">${
+                  item.seriesName
+                }</span><span style="display: inline-block; width: 90px; text-align: right; font-weight: 500;">${
+                  item.value === ''
+                    ? '-'
+                    : metricField.dataFormatType === 'percent' ||
+                      metricField.dataFormatType === 'decimal'
+                    ? formatByDataFormatType(item.value, metricField.dataFormatType, metricField.dataFormat)
+                    : getFormattedValue(item.value)
+                }</span></div>`
+            )
+            .join('');
+          return `${param.name}<br />${valueLabels}`;
+        },
+      },
+      grid: {
+        left: '2%',
+        right: '1%',
+        bottom: '3%',
+        top: 20,
+        containLabel: true,
+      },
+      series: {
+        type: 'bar',
+        name: metricColumn?.name,
+        barWidth: 20,
+        itemStyle: {
+          borderRadius: [10, 10, 0, 0],
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: CHART_BLUE_COLOR },
+            { offset: 1, color: getChartLightenColor(CHART_BLUE_COLOR) },
+          ]),
+        },
+        label: {
+          show: true,
+          position: 'top',
+          formatter: function ({ value }: any) {
+            return value === 0
+              ? 0
+              : metricField.dataFormatType === 'percent'
+              ? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat)
+              : getFormattedValue(value);
+          },
+        },
+        data: data.map(item => {
+          return item[metricColumn?.bizName || ''];
+        }),
+      },
+    });
+    instanceObj.resize();
+  };
+
+  useEffect(() => {
+    if (queryResults && queryResults.length > 0 && metricColumn?.authorized) {
+      renderChart();
+    }
+  }, [queryResults]);
+
+  useEffect(() => {
+    if (triggerResize && instanceRef.current) {
+      instanceRef.current.resize();
+    }
+  }, [triggerResize]);
+
+  if (metricColumn && !metricColumn?.authorized) {
+    return (
+      <NoPermissionChart
+        model={entityInfo?.dataSetInfo.name || ''}
+        chartType="barChart"
+        onApplyAuth={onApplyAuth}
+      />
+    );
+  }
+
+  const prefixCls = `${PREFIX_CLS}-bar`;
+
+  const { downloadChartAsImage } = useExportByEcharts({
+    instanceRef,
+    question,
+  });
+
+  const { register } = useContext(ChartItemContext);
+
+  register('downloadChartAsImage', downloadChartAsImage);
+
+  return (
+    <div>
+      <div className={`${prefixCls}-top-bar`}>
+        <div className={`${prefixCls}-indicator-name`}>{question}</div>
+      </div>
+      <Spin spinning={loading}>
+        <div className={`${prefixCls}-chart`} ref={chartRef} />
+      </Spin>
+    </div>
+  );
+};
+
+export default BarChart;

package/src/components/ChatMsg/Bar/style.less

@@ -0,0 +1,60 @@
+@import '../../../styles/index.less';
+
+@bar-cls: ~'@{supersonic-chat-prefix}-bar';
+
+.@{bar-cls} {
+
+  &-chart {
+    height: 260px;
+    margin-top: 16px;
+  }
+
+  &-top-bar {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    column-gap: 8px;
+    row-gap: 12px;
+  }
+
+  &-filter-section-wrapper {
+    display: flex;
+    align-items: center;
+    color: var(--text-color-third);
+  }
+
+  &-filter-section {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    column-gap: 12px;
+    color: var(--text-color-third);
+  }
+
+  &-filter-item {
+    display: flex;
+    align-items: center;
+  }
+
+  &-filter-item-label {
+    color: var(--text-color-third);
+  }
+
+  &-filter-item-value {
+    color: var(--text-color);
+    font-weight: 500;
+  }
+
+  &-indicator-name {
+    font-size: 14px;
+    color: var(--text-color);
+    font-weight: 500;
+    margin-top: 2px;
+  }
+
+  &-date-range {
+    margin-top: 12px;
+    font-size: 13px;
+    color: var(--text-color-third);
+  }
+}

package/src/components/ChatMsg/DateOptions/index.tsx

@@ -0,0 +1,46 @@
+import classNames from 'classnames';
+import { CLS_PREFIX, DATE_TYPES } from '../../../common/constants';
+import { isMobile } from '../../../utils/utils';
+import { ChatContextType } from '../../../common/type';
+
+type Props = {
+  chatContext: ChatContextType;
+  currentDateOption?: number;
+  onSelectDateOption: (value: number) => void;
+};
+
+const DateOptions: React.FC<Props> = ({ chatContext, currentDateOption, onSelectDateOption }) => {
+  const prefixCls = `${CLS_PREFIX}-date-options`;
+
+  const dateOptions = DATE_TYPES[chatContext?.dateInfo?.period] || DATE_TYPES.DAY;
+
+  return (
+    <div className={prefixCls}>
+      {dateOptions.map((dateOption: { label: string; value: number }, index: number) => {
+        const dateOptionClass = classNames(`${prefixCls}-item`, {
+          [`${prefixCls}-date-active`]: dateOption.value === currentDateOption,
+          [`${prefixCls}-date-mobile`]: isMobile,
+        });
+        return (
+          <>
+            <div
+              key={dateOption.value}
+              className={dateOptionClass}
+              onClick={() => {
+                onSelectDateOption(dateOption.value);
+              }}
+            >
+              {dateOption.label}
+              {dateOption.value === currentDateOption && (
+                <div className={`${prefixCls}-active-identifier`} />
+              )}
+            </div>
+            {index !== dateOptions.length - 1 && <div className={`${prefixCls}-item-divider`} />}
+          </>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DateOptions;

package/src/components/ChatMsg/DateOptions/style.less

@@ -0,0 +1,43 @@
+@import '../../../styles/index.less';
+
+@date-options-prefix-cls: ~'@{supersonic-chat-prefix}-date-options';
+
+.@{date-options-prefix-cls} {
+  display: flex;
+  align-items: center;
+  column-gap: 20px;
+  font-size: 14px;
+  
+  &-item {
+    position: relative;
+    color: var(--text-color-secondary);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--chat-blue);
+    }
+  }
+
+  &-date-active {
+    color: var(--chat-blue);
+  }
+
+  &-date-mobile {
+    font-size: 12px;
+  }
+
+  &-active-identifier {
+    position: absolute;
+    bottom: -6px;
+    width: 100%;
+    height: 4px;
+    background-color: var(--chat-blue);
+    border-radius: 4px 4px 0 0;
+  }
+
+  &-item-divider {
+    width: 1px;
+    height: 16px;
+    background-color: var(--text-color-fifth);
+  }
+}

package/src/components/ChatMsg/FilterSection/index.tsx

@@ -0,0 +1,42 @@
+import { PREFIX_CLS } from '../../../common/constants';
+import { ChatContextType, EntityInfoType } from '../../../common/type';
+
+type Props = {
+  chatContext?: ChatContextType;
+  entityInfo?: EntityInfoType;
+};
+
+const FilterSection: React.FC<Props> = ({ chatContext, entityInfo }) => {
+  const prefixCls = `${PREFIX_CLS}-filter-section`;
+
+  const entityInfoList =
+    entityInfo?.dimensions?.filter(dimension => !dimension.bizName.includes('photo')) || [];
+
+  const { dimensionFilters } = chatContext || {};
+
+  const hasFilterSection = dimensionFilters && dimensionFilters.length > 0;
+
+  return hasFilterSection ? (
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-field-label`}>筛选条件：</div>
+      <div className={`${prefixCls}-filter-values`}>
+        {(entityInfoList.length > 0 ? entityInfoList : dimensionFilters).map(filterItem => {
+          const filterValue =
+            typeof filterItem.value === 'string' ? [filterItem.value] : filterItem.value || [];
+          return (
+            <div
+              className={`${prefixCls}-filter-item`}
+              key={filterItem.name}
+              title={filterValue.join('、')}
+            >
+              <span className={`${prefixCls}-field-name`}>{filterItem.name}：</span>
+              <span className={`${prefixCls}-filter-value`}>{filterValue.join('、')}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  ) : null;
+};
+
+export default FilterSection;

package/src/components/ChatMsg/FilterSection/style.less

@@ -0,0 +1,37 @@
+@import '../../../styles/index.less';
+
+@filter-section-prefix-cls: ~'@{supersonic-chat-prefix}-filter-section';
+
+.@{filter-section-prefix-cls} {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  row-gap: 12px;
+  color: var(--text-color-secondary);
+  font-weight: normal;
+  font-size: 13px;
+
+  &-field-label {
+    color: var(--text-color-fourth);
+  }
+
+  &-filter-values {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    column-gap: 12px;
+  }
+
+  &-filter-item {
+    color: var(--text-color-third);
+    max-width: 200px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &-filter-value {
+    color: var(--text-color);
+    font-weight: 500;
+  }
+}

package/src/components/ChatMsg/MarkDown/index.tsx

@@ -0,0 +1,26 @@
+import { CLS_PREFIX } from '../../../common/constants';
+import rehypeHighlight from 'rehype-highlight';
+import remarkGfm from 'remark-gfm';
+import Markdown from 'react-markdown';
+import 'github-markdown-css/github-markdown.css';
+import 'highlight.js/styles/github.css';
+
+type Props = {
+  markdown: string;
+  loading?: boolean;
+  onApplyAuth?: (model: string) => void;
+};
+
+const MarkDown: React.FC<Props> = ({ markdown, loading, onApplyAuth }) => {
+  const prefixCls = `${CLS_PREFIX}-markdown`;
+
+  return (
+    <div className={`${prefixCls} markdown-body`} style={{ fontSize: 14 }}>
+      <Markdown rehypePlugins={[rehypeHighlight]} remarkPlugins={[remarkGfm]}>
+        {markdown}
+      </Markdown>
+    </div>
+  );
+};
+
+export default MarkDown;

package/src/components/ChatMsg/MarkDown/style.less

@@ -0,0 +1,9 @@
+@import '../../../styles/index.less';
+
+@markdown-prefix-cls: ~'@{supersonic-chat-prefix}-markdown';
+
+.@{markdown-prefix-cls} {
+  margin-top: 6px;
+
+
+}

package/src/components/ChatMsg/Message/index.tsx

@@ -0,0 +1,105 @@
+import { EntityInfoType, ChatContextType } from '../../../common/type';
+import { PREFIX_CLS } from '../../../common/constants';
+
+type Props = {
+  position: 'left' | 'right';
+  width?: number | string;
+  maxWidth?: number | string;
+  height?: number | string;
+  title?: string;
+  followQuestions?: string[];
+  bubbleClassName?: string;
+  chatContext?: ChatContextType;
+  entityInfo?: EntityInfoType;
+  children?: React.ReactNode;
+  isMobileMode?: boolean;
+  queryMode?: string;
+};
+
+const Message: React.FC<Props> = ({
+  width,
+  maxWidth,
+  height,
+  children,
+  bubbleClassName,
+  entityInfo,
+  queryMode,
+  chatContext,
+}) => {
+  const prefixCls = `${PREFIX_CLS}-message`;
+
+  const { modelName, dateInfo, dimensionFilters } = chatContext || {};
+  const { startDate, endDate } = dateInfo || {};
+
+  const entityInfoList =
+    entityInfo?.dimensions?.filter(dimension => !dimension.bizName.includes('photo')) || [];
+
+  return (
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-content`}>
+        <div className={`${prefixCls}-body`}>
+          <div
+            className={`${prefixCls}-bubble${bubbleClassName ? ` ${bubbleClassName}` : ''}`}
+            style={{ width, height, maxWidth }}
+            onClick={e => {
+              e.stopPropagation();
+            }}
+          >
+            {(queryMode === 'METRIC_ID' || queryMode === 'TAG_DETAIL') &&
+              entityInfoList.length > 0 && (
+                <div className={`${prefixCls}-info-bar`}>
+                  <div className={`${prefixCls}-main-entity-info`}>
+                    {entityInfoList.slice(0, 4).map(dimension => {
+                      return (
+                        <div className={`${prefixCls}-info-item`} key={dimension.bizName}>
+                          <div className={`${prefixCls}-info-name`}>{dimension.name}：</div>
+                          {dimension.bizName.includes('photo') ? (
+                            <img width={40} height={40} src={dimension.value} alt="" />
+                          ) : (
+                            <div className={`${prefixCls}-info-value`}>{dimension.value}</div>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            {queryMode === 'TAG_LIST_FILTER' && (
+              <div className={`${prefixCls}-info-bar`}>
+                <div className={`${prefixCls}-main-entity-info`}>
+                  <div className={`${prefixCls}-info-item`}>
+                    <div className={`${prefixCls}-info-name`}>数据模型：</div>
+                    <div className={`${prefixCls}-info-value`}>{modelName}</div>
+                  </div>
+                  <div className={`${prefixCls}-info-item`}>
+                    <div className={`${prefixCls}-info-name`}>时间：</div>
+                    <div className={`${prefixCls}-info-value`}>
+                      {startDate === endDate ? startDate : `${startDate} ~ ${endDate}`}
+                    </div>
+                  </div>
+                  {dimensionFilters && dimensionFilters?.length > 0 && (
+                    <div className={`${prefixCls}-info-item`}>
+                      <div className={`${prefixCls}-info-name`}>筛选条件：</div>
+                      {dimensionFilters.map((filter, index) => (
+                        <div className={`${prefixCls}-info-value`}>
+                          <span>{filter.name}：</span>
+                          <span>
+                            {Array.isArray(filter.value) ? filter.value.join('、') : filter.value}
+                          </span>
+                          {index !== dimensionFilters.length - 1 && <span>、</span>}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+            <div className={`${prefixCls}-children`}>{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Message;

package/src/components/ChatMsg/Message/style.less

@@ -0,0 +1,119 @@
+@import '../../../styles/index.less';
+
+@msg-prefix-cls: ~'@{supersonic-chat-prefix}-message';
+
+.@{msg-prefix-cls} {
+  &-title-bar {
+    display: flex;
+    align-items: baseline;
+    column-gap: 10px;
+    margin-bottom: 6px;
+  }
+
+  &-model-name {
+    color: var(--text-color);
+    margin-left: 4px;
+    font-weight: 500;
+    font-size: 15px;
+  }
+
+  &-top-bar {
+    position: relative;
+    max-width: 80%;
+    color: var(--text-color-third);
+    font-size: 13px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &-content {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &-body {
+    width: 100%;
+  }
+
+  &-bubble {
+    position: relative;
+    box-sizing: border-box;
+    min-width: 1px;
+    max-width: 100%;
+    padding: 8px 16px 10px;
+    background: rgba(255, 255, 255, 0.8);
+    border: 1px solid transparent;
+    border-radius: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
+  }
+
+  &-filter-section {
+    display: flex;
+    align-items: center;
+    color: var(--text-color-secondary);
+    font-weight: normal;
+    font-size: 13px;
+  }
+
+  &-filter-values {
+    display: flex;
+    align-items: center;
+    column-gap: 6px;
+  }
+
+  &-filter-item {
+    padding: 2px 12px;
+    color: var(--text-color-secondary);
+    background-color: #edf2f2;
+    border-radius: 13px;
+    max-width: 200px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &-tip {
+    margin-left: 6px;
+    color: var(--text-color-third);
+  }
+
+  &-info-bar {
+    display: flex;
+    align-items: center;
+    row-gap: 12px;
+    flex-wrap: wrap;
+    margin-top: 2px;
+    margin-bottom: 12px;
+    column-gap: 20px;
+    color: var(--text-color-secondary);
+    background: rgba(133, 156, 241, 0.1);
+    padding: 4px 12px;
+    width: fit-content;
+    border-radius: 8px;
+  }
+
+  &-main-entity-info {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 20px;
+    row-gap: 10px;
+  }
+
+  &-info-item {
+    display: flex;
+    align-items: center;
+  }
+
+  &-info-name {
+    color: var(--text-color-secondary);
+  }
+
+  &-info-value {
+    color: var(--text-color);
+    font-weight: 500;
+  }
+}
+
+