test-chat-sdk 0.0.0

package/src/components/MetricOptions/index.tsx

@@ -0,0 +1,75 @@
+import { CLS_PREFIX } from '../../common/constants';
+import { FieldType } from '../../common/type';
+import classNames from 'classnames';
+import { isMobile } from '../../utils/utils';
+
+type Props = {
+  metrics: FieldType[];
+  defaultMetric?: FieldType;
+  currentMetric?: FieldType;
+  isMetricCard?: boolean;
+  onSelectMetric: (metric?: FieldType) => void;
+};
+
+const MetricOptions: React.FC<Props> = ({
+  metrics,
+  defaultMetric,
+  currentMetric,
+  isMetricCard,
+  onSelectMetric,
+}) => {
+  const DEFAULT_DIMENSION_COUNT = isMobile ? 2 : 5;
+  const prefixCls = `${CLS_PREFIX}-metric-options`;
+
+  const defaultMetrics = metrics
+    .filter(metric => metric.id !== defaultMetric?.id)
+    .slice(0, DEFAULT_DIMENSION_COUNT);
+
+  const sectionClass = classNames(`${prefixCls}-section`, {
+    [`${prefixCls}-metric-card`]: isMetricCard,
+  });
+
+  if (!defaultMetrics.length) {
+    return null;
+  }
+
+  return (
+    <div className={prefixCls}>
+      <div className={sectionClass}>
+        <div className={`${prefixCls}-title`}>推荐相关指标：</div>
+        <div className={`${prefixCls}-content`}>
+          {defaultMetrics.map((metric, index) => {
+            const itemNameClass = classNames(`${prefixCls}-content-item-name`, {
+              [`${prefixCls}-content-item-active`]: currentMetric?.id === metric.id,
+            });
+            return (
+              <div>
+                <span
+                  className={itemNameClass}
+                  onClick={() => {
+                    onSelectMetric(currentMetric?.id === metric.id ? defaultMetric : metric);
+                  }}
+                >
+                  {metric.name}
+                </span>
+                {index !== defaultMetrics.length - 1 && <span>、</span>}
+              </div>
+            );
+          })}
+        </div>
+        {currentMetric?.id !== defaultMetric?.id && (
+          <div
+            className={`${prefixCls}-cancel-select`}
+            onClick={() => {
+              onSelectMetric(defaultMetric);
+            }}
+          >
+            取消
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MetricOptions;

package/src/components/MetricOptions/style.less

@@ -0,0 +1,69 @@
+@import '../../styles/index.less';
+
+@metric-options-prefix-cls: ~'@{supersonic-chat-prefix}-metric-options';
+
+.@{metric-options-prefix-cls} {
+  display: flex;
+  flex-direction: column;
+
+  &-section {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    column-gap: 6px;
+    row-gap: 4px;
+  }
+
+  &-metric-card {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    background-color: #fff;
+    width: fit-content;
+    padding: 2px 4px;
+    font-size: 12px;
+  }
+
+  &-title {
+    color: var(--text-color-third);
+  }
+  
+  &-content {
+    display: flex;
+    align-items: center;
+  }
+
+  &-content-item-name {
+    color: var(--chat-blue);
+    font-weight: 500;
+    border-bottom: 1px solid var(--chat-blue);
+    padding: 1px;
+    cursor: pointer;
+  }
+
+  &-content-item-active {
+    color: #fff;
+    border-bottom: none;
+    background-color: var(--chat-blue);
+    border-radius: 2px;
+  }
+
+  &-menu-item-active {
+    color: var(--chat-blue);
+  }
+
+  &-cancel-select {
+    margin-left: 12px;
+    color: var(--text-color-third);
+    cursor: pointer;
+    padding: 0 4px;
+    border: 1px solid var(--text-color-third);
+    border-radius: 4px;
+    font-size: 12px;
+
+    &:hover {
+      color: var(--chat-blue);
+      border-color: var(--chat-blue);
+    }
+  }
+}

package/src/components/RecommendOptions/index.tsx

@@ -0,0 +1,126 @@
+import { getFormattedValue, isMobile } from '../../utils/utils';
+import { Table, Avatar } from 'antd';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { queryEntities } from '../../service';
+import { CLS_PREFIX } from '../../common/constants';
+import IconFont from '../IconFont';
+import classNames from 'classnames';
+
+type Props = {
+  entityId: string | number;
+  modelId: number;
+  modelName: string;
+  onSelect: (option: string) => void;
+};
+
+const RecommendOptions: React.FC<Props> = ({ entityId, modelId, modelName, onSelect }) => {
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const prefixCls = `${CLS_PREFIX}-recommend-options`;
+
+  const initData = async () => {
+    setLoading(true);
+    const res = await queryEntities(entityId, modelId);
+    setLoading(false);
+    setData(res.data);
+  };
+
+  useEffect(() => {
+    if (entityId) {
+      initData();
+    }
+  }, [entityId]);
+
+  const getSectionOptions = () => {
+    const basicColumn = {
+      dataIndex: 'name',
+      key: 'name',
+      title: '基本信息',
+      render: (name: string, record: any) => {
+        return (
+          <div className={`${prefixCls}-item-name-column`}>
+            <Avatar
+              shape="square"
+              icon={<IconFont type={modelName === '艺人库' ? 'icon-geshou' : 'icon-zhuanji'} />}
+              src={record.url}
+            />
+            <div className={`${prefixCls}-entity-name`}>
+              {name}
+              {record.ver && record.ver !== '完整版' && record.ver !== '-' && `(${record.ver})`}
+              {record.singerName && ` - ${record.singerName}`}
+            </div>
+          </div>
+        );
+      },
+    };
+
+    const playCntColumnIdex = modelName.includes('歌曲')
+      ? 'tme3platAvgLogYyPlayCnt'
+      : 'tme3platJsPlayCnt';
+
+    const columns = isMobile
+      ? [basicColumn]
+      : [
+          basicColumn,
+          modelName.includes('艺人')
+            ? {
+                dataIndex: 'onlineSongCnt',
+                key: 'onlineSongCnt',
+                title: '在架歌曲数',
+                align: 'center',
+                render: (onlineSongCnt: string) => {
+                  return onlineSongCnt ? getFormattedValue(+onlineSongCnt) : '-';
+                },
+              }
+            : {
+                dataIndex: 'publishTime',
+                key: 'publishTime',
+                title: '发布时间',
+                align: 'center',
+                render: (publishTime: string) => {
+                  return publishTime ? moment(publishTime).format('YYYY-MM-DD') : '-';
+                },
+              },
+          {
+            dataIndex: playCntColumnIdex,
+            key: playCntColumnIdex,
+            align: 'center',
+            title: modelName.includes('歌曲') ? '近7天日均运营播放量' : '昨日结算播放量',
+            render: (value: string) => {
+              return value ? getFormattedValue(+value) : '-';
+            },
+          },
+        ];
+
+    return (
+      <Table
+        rowKey="id"
+        columns={columns as any}
+        dataSource={data}
+        showHeader={!isMobile}
+        size="small"
+        pagination={false}
+        loading={loading}
+        className={`${prefixCls}-table`}
+        rowClassName={`${prefixCls}-table-row`}
+        onRow={record => {
+          return {
+            onClick: () => {
+              onSelect(record.id);
+            },
+          };
+        }}
+      />
+    );
+  };
+
+  const recommendOptionsClass = classNames(prefixCls, {
+    [`${prefixCls}-mobile-mode`]: isMobile,
+  });
+
+  return <div className={recommendOptionsClass}>{getSectionOptions()}</div>;
+};
+
+export default RecommendOptions;

package/src/components/RecommendOptions/style.less

@@ -0,0 +1,24 @@
+@import '../../styles/index.less';
+
+@recommend-options-prefix-cls: ~'@{supersonic-chat-prefix}-recommend-options';
+
+.@{recommend-options-prefix-cls} {
+  padding: 8px 0 12px;
+
+  &-item-name-column {
+    display: flex;
+    align-items: center;
+    column-gap: 6px;
+  }
+
+  &-entity-name {
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+
+  &-table-row {
+    cursor: pointer;
+  }
+}
+

package/src/components/Tools/FeedbackModal.tsx

@@ -0,0 +1,55 @@
+import { Modal, Input, message } from 'antd';
+import { CLS_PREFIX } from '../../common/constants';
+import { useState } from 'react';
+
+const { TextArea } = Input;
+
+type Props = {
+  visible: boolean;
+  feedbackValue: string;
+  onSubmit: (feedback: string) => void;
+  onClose: () => void;
+};
+
+const FeedbackModal: React.FC<Props> = ({ visible, feedbackValue, onSubmit, onClose }) => {
+  const [feedback, setFeedback] = useState(feedbackValue);
+  const prefixCls = `${CLS_PREFIX}-tools`;
+
+  const onOk = () => {
+    if (feedback.trim() === '') {
+      message.warning('请输入点评内容');
+      return;
+    }
+    onSubmit(feedback);
+  };
+
+  const onFeedbackChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setFeedback(e.target.value);
+  };
+
+  return (
+    <Modal
+      open={visible}
+      title="点评一下~"
+      onOk={onOk}
+      onCancel={onClose}
+      okText="提交"
+      cancelText="取消"
+    >
+      <div className={`${prefixCls}-feedback-item`}>
+        <div className={`${prefixCls}-feedback-item-title`}>评价</div>
+        <TextArea
+          placeholder="请输入评价"
+          rows={3}
+          value={feedback}
+          onChange={onFeedbackChange}
+          onClick={e => {
+            e.stopPropagation();
+          }}
+        />
+      </div>
+    </Modal>
+  );
+};
+
+export default FeedbackModal;

package/src/components/Tools/index.tsx

@@ -0,0 +1,126 @@
+import { isMobile } from '../../utils/utils';
+import {
+  DislikeOutlined,
+  LikeOutlined,
+  DownloadOutlined,
+  RedoOutlined,
+  FileJpgOutlined,
+} from '@ant-design/icons';
+import { Button } from 'antd';
+import { CLS_PREFIX } from '../../common/constants';
+import { useContext, useState } from 'react';
+import classNames from 'classnames';
+import { updateQAFeedback } from '../../service';
+import { useMethodRegister } from '../../hooks';
+import { ChartItemContext } from '../ChatItem';
+
+type Props = {
+  queryId: number;
+  scoreValue?: number;
+  isLastMessage?: boolean;
+  isParserError?: boolean;
+  isSimpleMode?: boolean;
+  onExportData?: () => void;
+  onReExecute?: (queryId: number) => void;
+};
+
+const Tools: React.FC<Props> = ({
+  queryId,
+  scoreValue,
+  isLastMessage,
+  isParserError = false,
+  isSimpleMode = false,
+  onExportData,
+  onReExecute,
+}) => {
+  const [score, setScore] = useState(scoreValue || 0);
+  const [exportLoading, setExportLoading] = useState<boolean>(false);
+  const prefixCls = `${CLS_PREFIX}-tools`;
+
+  const like = () => {
+    setScore(5);
+    updateQAFeedback(queryId, 5);
+  };
+
+  const dislike = () => {
+    setScore(1);
+    updateQAFeedback(queryId, 1);
+  };
+
+  const likeClass = classNames(`${prefixCls}-like`, {
+    [`${prefixCls}-feedback-active`]: score === 5,
+  });
+  const dislikeClass = classNames(`${prefixCls}-dislike`, {
+    [`${prefixCls}-feedback-active`]: score === 1,
+  });
+
+  const { call } = useContext(ChartItemContext);
+
+  return (
+    <div className={prefixCls}>
+      {!isMobile && (
+        <div className={`${prefixCls}-feedback`}>
+          {/* <div>这个回答正确吗？</div> */}
+
+          <div className={`${prefixCls}-feedback-left`}>
+            {!isParserError && (
+              <>
+                <Button
+                  size="small"
+                  onClick={() => {
+                    setExportLoading(true);
+                    onExportData?.();
+                    setTimeout(() => {
+                      setExportLoading(false);
+                    }, 1000);
+                  }}
+                  type="text"
+                  loading={exportLoading}
+                >
+                  <DownloadOutlined />
+                  <span className={`${prefixCls}-font-style`}>导出数据</span>
+                </Button>
+                {!isSimpleMode && (
+                  <Button
+                    size="small"
+                    onClick={() => {
+                      call('downloadChartAsImage');
+                    }}
+                    type="text"
+                  >
+                    <FileJpgOutlined />
+                    <span className={`${prefixCls}-font-style`}>导出图片</span>
+                  </Button>
+                )}
+                {isLastMessage && (
+                  <Button
+                    size="small"
+                    onClick={() => {
+                      onReExecute?.(queryId);
+                    }}
+                    type="text"
+                  >
+                    <RedoOutlined />
+                    <span className={`${prefixCls}-font-style`}>再试一次</span>
+                  </Button>
+                )}
+              </>
+            )}
+          </div>
+          <div className={`${prefixCls}-feedback-left`}>
+            <LikeOutlined className={likeClass} onClick={like} style={{ marginRight: 10 }} />
+            <DislikeOutlined
+              className={dislikeClass}
+              onClick={e => {
+                e.stopPropagation();
+                dislike();
+              }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tools;

package/src/components/Tools/style.less

@@ -0,0 +1,67 @@
+@import '../../styles/index.less';
+
+@tools-cls: ~'@{supersonic-chat-prefix}-tools';
+
+.@{tools-cls} {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+  column-gap: 6px;
+
+  &-feedback {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 10px 0 10px;
+    color: var(--text-color-third);
+    column-gap: 20px;
+  }
+
+
+  &-like {
+    margin-right: 4px;
+  }
+
+  &-feedback-active {
+    color: rgb(234, 197, 79);
+  }
+
+  &-mobile-tools {
+    display: flex;
+    flex-direction: column;
+    margin-top: 12px;
+    row-gap: 10px;
+  }
+
+  &-tools {
+    margin-top: 0;
+  }
+
+  &-feedback {
+    margin-left: 2px;
+  }
+
+  &-feedback-item {
+    display: flex;
+    align-items: flex-start;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  &-feedback-item-title {
+    width: 40px;
+    margin-right: 20px;
+    text-align: right;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color);
+  }
+
+  &-font-style {
+    font-size: 12px;
+    color: grey;
+    font-style: italic;
+    text-align: center;
+  }
+}

package/src/demo/Chat.tsx

@@ -0,0 +1,73 @@
+import { Input } from 'antd';
+import styles from './style.module.less';
+import { useEffect, useState } from 'react';
+import ChatItem from '../components/ChatItem';
+import { MsgDataType } from '../common/type';
+
+const { Search } = Input;
+
+const Chat = () => {
+  const [inputMsg, setInputMsg] = useState('');
+  const [msg, setMsg] = useState('');
+  const [triggerResize, setTriggerResize] = useState(false);
+  const [chatItemVisible, setChatItemVisible] = useState(false);
+
+  const onWindowResize = () => {
+    setTriggerResize(true);
+    setTimeout(() => {
+      setTriggerResize(false);
+    }, 0);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', onWindowResize);
+    return () => {
+      window.removeEventListener('resize', onWindowResize);
+    };
+  }, []);
+
+  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    setInputMsg(value);
+  };
+
+  const onSearch = () => {
+    setMsg(inputMsg);
+    setChatItemVisible(false);
+    setTimeout(() => {
+      setChatItemVisible(true);
+    }, 200);
+  };
+
+  const onMsgDataLoaded = (msgData: MsgDataType) => {};
+
+  //预发环境： 5: 查信息，6: 智能圈选，12：问指标，15：歌曲库，16：艺人库
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.inputMsg}>
+        <Search
+          placeholder="请输入问题"
+          value={inputMsg}
+          onChange={onInputChange}
+          onSearch={onSearch}
+        />
+      </div>
+      {msg && chatItemVisible && (
+        <div className={styles.chatItem}>
+          <ChatItem
+            msg={msg}
+            agentId={5}
+            conversationId={112211121}
+            onMsgDataLoaded={onMsgDataLoaded}
+            triggerResize={triggerResize}
+            integrateSystem="wiki"
+            isDeveloper
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Chat;

package/src/demo/ChatDemo.tsx

@@ -0,0 +1,14 @@
+import Chat from '../Chat';
+import styles from './style.module.less';
+
+type Props = {};
+
+const ChatDemo: React.FC<Props> = () => {
+  return (
+    <div className={styles.chatDemo}>
+      <Chat isDeveloper />
+    </div>
+  );
+};
+
+export default ChatDemo;

package/src/demo/CopilotDemo.tsx

@@ -0,0 +1,43 @@
+import { Button, Space } from 'antd';
+import styles from './style.module.less';
+import Copilot from '../Copilot';
+import { useRef } from 'react';
+
+const buttonParams = [
+  {
+    msg: '周杰伦 艺人趋势解读',
+    agentId: 8,
+    modelId: 23,
+    filters: [{ bizName: 'singer_id', elementID: 283, value: 4558 }],
+  },
+  {
+    msg: '林俊杰 艺人趋势解读',
+    agentId: 8,
+    modelId: 23,
+    filters: [{ bizName: 'singer_id', elementID: 283, value: 4286 }],
+  },
+];
+
+const CopilotDemo = () => {
+  const copilotRef = useRef<any>();
+
+  return (
+    <div className={styles.copilotDemo}>
+      <Space>
+        {buttonParams.map(params => (
+          <Button
+            key={params.msg}
+            onClick={() => {
+              copilotRef?.current?.sendCopilotMsg(params);
+            }}
+          >
+            {params.msg}
+          </Button>
+        ))}
+      </Space>
+      <Copilot isDeveloper ref={copilotRef} />
+    </div>
+  );
+};
+
+export default CopilotDemo;

package/src/demo/style.module.less

@@ -0,0 +1,19 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+  padding: 20px;
+  background:
+    linear-gradient(180deg,rgba(23,74,228,0) 29.44%,rgba(23,74,228,.06)),linear-gradient(90deg,#f3f3f7,#f3f3f7 20%,#ebf0f9 60%,#f3f3f7 80%,#f3f3f7);
+  height: 100vh;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.copilotDemo {
+  padding: 20px;
+}
+
+.chatDemo {
+  height: 100vh;
+}

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useMethodRegister';
+export * from './useComposing';
+export * from './useExportByEcharts';