test-chat-sdk 0.0.0

package/src/Chat/type.ts

@@ -0,0 +1,107 @@
+import { ChatContextType, MsgDataType, ParseTimeCostType, SendMsgParamsType } from '../common/type';
+
+export enum MessageTypeEnum {
+  TEXT = 'text', // 指标文本
+  QUESTION = 'question',
+  TAG = 'tag', // 标签
+  SUGGESTION = 'suggestion', // 建议
+  NO_PERMISSION = 'no_permission', // 无权限
+  SEMANTIC_DETAIL = 'semantic_detail', // 语义指标/维度等信息详情
+  PLUGIN = 'PLUGIN', // 插件
+  WEB_PAGE = 'WEB_PAGE', // 插件
+  RECOMMEND_QUESTIONS = 'recommend_questions', // 推荐问题
+  AGENT_LIST = 'agent_list', // 专家列表
+}
+
+export type MessageItem = {
+  id: string | number;
+  type?: MessageTypeEnum;
+  msg?: string;
+  questionId?: number;
+  msgValue?: string;
+  identityMsg?: string;
+  modelId?: number;
+  agentId?: number;
+  entityId?: string;
+  parseInfos?: ChatContextType[];
+  parseTimeCost?: ParseTimeCostType;
+  msgData?: MsgDataType;
+  quote?: string;
+  score?: number;
+  feedback?: string;
+  filters?: any;
+};
+
+export type ConversationDetailType = {
+  chatId: number;
+  chatName: string;
+  createTime?: string;
+  creator?: string;
+  lastQuestion?: string;
+  lastTime?: string;
+  initialMsgParams?: SendMsgParamsType;
+  isAdd?: boolean;
+};
+
+export enum MessageModeEnum {
+  INTERPRET = 'interpret',
+}
+
+export type ModelType = {
+  id: number;
+  name: string;
+  bizName: string;
+};
+
+export enum PluginShowTypeEnum {
+  DASHBOARD = 'DASHBOARD',
+  WIDGET = 'WIDGET',
+  URL = 'URL',
+  TAG = 'TAG',
+}
+
+export type PluginType = {
+  id: number;
+  name: string;
+  comment: string;
+};
+
+export type SuggestionItemType = {
+  id: number;
+  model: number;
+  name: string;
+  bizName: string;
+};
+
+export type SuggestionType = {
+  dimensions: SuggestionItemType[];
+  metrics: SuggestionItemType[];
+};
+
+export type AgentType = {
+  id: number;
+  name: string;
+  description: string;
+  examples: string[];
+  status: 0 | 1;
+  initialSendMsgParams?: SendMsgParamsType;
+  createdBy: string;
+  updatedBy: string;
+  createdAt: string;
+  updatedAt: string;
+  enableSearch: number;
+  enableFeedback: number;
+  toolConfig: string;
+  modelConfig: {
+    provider: string;
+    baseUrl: string;
+    apiKey: string;
+    modelName: string;
+    temperature: number;
+    timeOut: number;
+  };
+  multiTurnConfig: {
+    enableMultiTurn: boolean;
+  };
+  dataSetIds: number[];
+};

package/src/Copilot/constants.ts

@@ -0,0 +1,11 @@
+export const MODEL_PATH_MAP = {
+  song: '歌曲库',
+  'song-detail': '歌曲库',
+  singer: '艺人库',
+  'singer-detail': '艺人库',
+  album: '专辑库',
+  'album-detail': '专辑库',
+  'digital-album': '专辑库',
+  brand: '厂牌库',
+  'brand-detail': '厂牌库',
+};

package/src/Copilot/index.tsx

@@ -0,0 +1,149 @@
+import IconFont from '../components/IconFont';
+import { CaretRightOutlined, CloseOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import {
+  ForwardRefRenderFunction,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import Chat from '../Chat';
+import { AgentType } from '../Chat/type';
+import { setToken } from '../utils/utils';
+import { SendMsgParamsType } from '../common/type';
+import styles from './style.module.less';
+import { copilotTitle } from '../common/env';
+
+type Props = {
+  token?: string;
+  agentIds?: number[];
+  noInput?: boolean;
+  isDeveloper?: boolean;
+  integrateSystem?: string;
+  apiUrl?: string;
+  onReportMsgEvent?: (msg: string, valid: boolean) => void;
+  onOpenChatPage?: (agentId?: number) => void;
+};
+
+const Copilot: ForwardRefRenderFunction<any, Props> = (
+  {
+    token,
+    agentIds,
+    noInput,
+    isDeveloper,
+    integrateSystem,
+    apiUrl,
+    onReportMsgEvent,
+    onOpenChatPage,
+  },
+  ref
+) => {
+  const [chatVisible, setChatVisible] = useState(false);
+  const [copilotMinimized, setCopilotMinimized] = useState(false);
+  const [currentAgent, setCurrentAgent] = useState<AgentType>();
+
+  const chatRef = useRef<any>();
+
+  useImperativeHandle(ref, () => ({
+    sendCopilotMsg,
+  }));
+
+  useEffect(() => {
+    if (token) {
+      setToken(token);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    if (apiUrl) {
+      localStorage.setItem('SUPERSONIC_CHAT_API_URL', apiUrl);
+    }
+  }, [apiUrl]);
+
+  const sendCopilotMsg = (params: SendMsgParamsType) => {
+    chatRef?.current?.sendCopilotMsg(params);
+    updateChatVisible(true);
+  };
+
+  const updateChatVisible = (visible: boolean) => {
+    setChatVisible(visible);
+  };
+
+  const onToggleChatVisible = () => {
+    updateChatVisible(!chatVisible);
+  };
+
+  const onCloseChat = () => {
+    updateChatVisible(false);
+  };
+
+  const onTransferChat = () => {
+    onOpenChatPage?.(currentAgent?.id);
+  };
+
+  const onMinimizeCopilot = (e: any) => {
+    e.stopPropagation();
+    updateChatVisible(false);
+    setCopilotMinimized(true);
+  };
+
+  const copilotClass = classNames(styles.copilot, {
+    [styles.copilotMinimized]: copilotMinimized,
+  });
+
+  const chatPopoverClass = classNames(styles.chatPopover, {
+    [styles.c2System]: integrateSystem === 'c2',
+  });
+
+  return (
+    <>
+      <div
+        className={copilotClass}
+        onMouseEnter={() => {
+          setCopilotMinimized(false);
+        }}
+        onClick={onToggleChatVisible}
+      >
+        <IconFont type="icon-copilot-fill" />
+        <div className={styles.minimizeWrapper} onClick={onMinimizeCopilot}>
+          <div className={styles.minimize}>-</div>
+        </div>
+      </div>
+      <div className={styles.copilotContent} style={{ display: chatVisible ? 'block' : 'none' }}>
+        <div className={chatPopoverClass}>
+          <div className={styles.header}>
+            <div className={styles.leftSection}>
+              <CloseOutlined className={styles.close} onClick={onCloseChat} />
+              {onOpenChatPage && (
+                <IconFont
+                  type="icon-weibiaoti-"
+                  className={styles.transfer}
+                  onClick={onTransferChat}
+                />
+              )}
+            </div>
+            <div className={styles.title}>{copilotTitle}</div>
+          </div>
+          <div className={styles.chat}>
+            <Chat
+              chatVisible={chatVisible}
+              agentIds={agentIds}
+              noInput={noInput}
+              isDeveloper={isDeveloper}
+              integrateSystem={integrateSystem}
+              isCopilot
+              onCurrentAgentChange={setCurrentAgent}
+              onReportMsgEvent={onReportMsgEvent}
+              ref={chatRef}
+            />
+          </div>
+        </div>
+        <CaretRightOutlined className={styles.rightArrow} />
+      </div>
+    </>
+  );
+};
+
+export default forwardRef(Copilot);

package/src/Copilot/style.module.less

@@ -0,0 +1,151 @@
+.copilot {
+  position: fixed;
+  right: 8px;
+  bottom: 220px;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 54px;
+  height: 54px;
+  color: #fff;
+  font-size: 26px;
+  background-color: var(--chat-blue);
+  background-clip: padding-box;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, 0.1);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  &.copilotMinimized {
+    right: -40px;
+  }
+
+  .minimizeWrapper {
+    position: absolute;
+    top: -18px;
+    right: -6px;
+    display: none;
+    width: 22px;
+    height: 22px;
+    padding: 4px;
+    cursor: pointer;
+
+    .minimize {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding-bottom: 5px;
+      background-color: var(--text-color-fifth-4);
+      border-radius: 50%;
+      transition: all 0.1s ease-in-out;
+    }
+
+    &:hover {
+      .minimize {
+        background-color: var(--text-color-fifth);
+      }
+    }
+  }
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: 8px 8px 20px rgba(55, 99, 170, 0.3);
+
+    .minimizeWrapper {
+      display: block;
+    }
+  }
+}
+
+.chatPopover {
+  position: fixed;
+  right: 90px;
+  bottom: 5vh;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  width: 70vw;
+  min-width: 1100px;
+  height: 90vh;
+  overflow: hidden;
+  box-shadow: 4px 4px 10px rgba(55, 99, 170, 0.3), -2px -2px 16px rgba(55, 99, 170, 0.3);
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out,
+    -webkit-transform 0.3s ease-in-out;
+
+  &.c2System {
+    width: calc(100vw - 180px);
+  }
+
+  .header {
+    position: relative;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    padding-right: 16px;
+    padding-left: 16px;
+    background: linear-gradient(81.62deg, #2870ea 8.72%, var(--chat-blue) 85.01%);
+    box-shadow: 1px 1px 8px #1b4aef5c;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      font-size: 16px;
+    }
+
+    .leftSection {
+      position: absolute;
+      left: 16px;
+      display: flex;
+      align-items: center;
+      color: #fff;
+      font-size: 16px;
+      column-gap: 20px;
+
+      .close {
+        font-size: 18px;
+        cursor: pointer;
+      }
+
+      .transfer {
+        cursor: pointer;
+      }
+
+      .fullscreen {
+        font-size: 20px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .chat {
+    height: calc(90vh - 40px);
+  }
+
+  &.fullscreen {
+    bottom: 0;
+    left: 60px;
+    width: calc(100vw - 150px);
+    height: 100vh;
+
+    .chat {
+      height: calc(100vh - 50px);
+    }
+  }
+}
+
+.rightArrow {
+  position: fixed;
+  right: 69px;
+  bottom: 232px;
+  z-index: 999;
+  color: var(--chat-blue);
+  font-size: 30px;
+}

package/src/ShowCase/index.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useState } from 'react';
+import styles from './style.module.less';
+import { ShowCaseItemType } from './type';
+import { queryShowCase } from './service';
+import Text from '../Chat/components/Text';
+import ChatItem from '../components/ChatItem';
+import { HistoryMsgItemType } from '../common/type';
+import { Spin } from 'antd';
+import classNames from 'classnames';
+import { isMobile } from '../utils/utils';
+import { useThrottleFn } from 'ahooks';
+
+type Props = {
+  height?: number | string;
+  agentId: number;
+  onSendMsg?: (msg: string) => void;
+};
+
+const ShowCase: React.FC<Props> = ({ height, agentId, onSendMsg }) => {
+  const [showCaseList, setShowCaseList] = useState<ShowCaseItemType[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [pageNo, setPageNo] = useState(1);
+
+  const showcaseRef = useRef<any>(null);
+
+  const updateData = async (pageNoValue: number) => {
+    if (pageNoValue === 1) {
+      setLoading(true);
+    }
+    const res = await queryShowCase(agentId, pageNoValue, isMobile ? 10 : 20);
+    if (pageNoValue === 1) {
+      setLoading(false);
+    }
+    const showCaseMapRes: any = res.data.showCaseMap || {};
+    const list = Object.keys(showCaseMapRes)
+      .reduce((result: ShowCaseItemType[], key: string) => {
+        result.push({ msgList: showCaseMapRes[key], caseId: key });
+        return result;
+      }, [])
+      .sort((a, b) => {
+        return (b.msgList?.[0]?.score || 3) - (a.msgList?.[0]?.score || 3);
+      });
+    setShowCaseList(pageNoValue === 1 ? list : [...showCaseList, ...list]);
+  };
+
+  const { run: handleScroll } = useThrottleFn(
+    e => {
+      const bottom =
+        e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight ||
+        e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight + 0.5;
+      if (bottom) {
+        updateData(pageNo + 1);
+        setPageNo(pageNo + 1);
+      }
+    },
+    {
+      leading: true,
+      trailing: true,
+      wait: 200,
+    }
+  );
+
+  useEffect(() => {
+    if (isMobile) {
+      return;
+    }
+    const el = showcaseRef.current;
+    el?.addEventListener('scroll', handleScroll);
+    return () => {
+      el.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (agentId) {
+      setShowCaseList([]);
+      updateData(1);
+      setPageNo(1);
+    }
+  }, [agentId]);
+
+  const showCaseClass = classNames(styles.showCase, { [styles.mobile]: isMobile });
+
+  return (
+    <Spin spinning={loading} size="large">
+      <div className={showCaseClass} style={{ height }} ref={showcaseRef}>
+        <div className={styles.showCaseContent}>
+          {showCaseList.map(showCaseItem => {
+            return (
+              <div key={showCaseItem.caseId} className={styles.showCaseItem}>
+                {showCaseItem.msgList
+                  .filter((chatItem: HistoryMsgItemType) => !!chatItem.queryResult)
+                  .slice(0, 1)
+                  .map((chatItem: HistoryMsgItemType) => {
+                    return (
+                      <div className={styles.showCaseChatItem} key={chatItem.questionId}>
+                        <Text position="right" data={chatItem.queryText} anonymousUser />
+                        <ChatItem
+                          msg={chatItem.queryText}
+                          parseInfos={chatItem.parseInfos}
+                          msgData={chatItem.queryResult}
+                          conversationId={chatItem.chatId}
+                          agentId={agentId}
+                          integrateSystem="showcase"
+                          score={chatItem.score}
+                          onSendMsg={onSendMsg}
+                        />
+                      </div>
+                    );
+                  })}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </Spin>
+  );
+};
+
+export default ShowCase;

package/src/ShowCase/service.ts

@@ -0,0 +1,12 @@
+import axios from '../service/axiosInstance';
+import { isMobile } from '../utils/utils';
+import { ShowCaseType } from './type';
+
+const prefix = isMobile ? '/openapi' : '/api';
+
+export function queryShowCase(agentId: number, current: number, pageSize: number) {
+  return axios.post<ShowCaseType>(`${prefix}/chat/manage/queryShowCase?agentId=${agentId}`, {
+    current,
+    pageSize,
+  });
+}

package/src/ShowCase/style.module.less

@@ -0,0 +1,46 @@
+.showCase {
+  position: relative;
+  height: 100%;
+  padding: 0 20px;
+  overflow-y: auto;
+  padding-bottom: 2px;
+
+  .showCaseContent {
+    column-count: 2;
+    column-gap: 20px;
+
+    .showcaseLoading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 400px;
+    }
+
+    .showCaseItem {
+      display: flex;
+      flex-direction: column;
+      row-gap: 12px;
+      padding: 12px;
+      margin-bottom: 20px;
+      overflow-y: auto;
+      border-radius: 12px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
+      background: linear-gradient(180deg, rgba(23, 74, 228, 0) 29.44%, rgba(23, 74, 228, 0.06) 100%),
+      linear-gradient(90deg, #f3f3f7 0%, #f3f3f7 20%, #ebf0f9 60%, #f3f3f7 80%, #f3f3f7 100%);
+
+      .showCaseChatItem {
+        display: flex;
+        flex-direction: column;
+        row-gap: 12px;
+      }
+    }
+  }
+
+  &.mobile {
+    padding: 0 4px;
+    .showCaseContent {
+      column-count: 1;
+    }
+  }
+}

package/src/ShowCase/type.ts

@@ -0,0 +1,14 @@
+import { HistoryMsgItemType } from "../common/type";
+
+export type ShowCaseMapType = Record<number, HistoryMsgItemType[]>;
+
+export type ShowCaseItemType = {
+  caseId: string;
+  msgList: HistoryMsgItemType[];
+}
+
+export type ShowCaseType = {
+  showCaseMap: ShowCaseMapType,
+  current: number,
+  pageSize: number,
+}

package/src/common/constants.ts

@@ -0,0 +1,93 @@
+import { MsgValidTypeEnum } from './type';
+
+export enum NumericUnit {
+  None = '无',
+  TenThousand = '万',
+  EnTenThousand = 'w',
+  OneHundredMillion = '亿',
+  Thousand = 'k',
+  Million = 'M',
+  Giga = 'G',
+}
+
+export const PRIMARY_COLOR = '#f87653';
+export const CHART_BLUE_COLOR = '#446dff';
+
+export const CHAT_BLUE = '#1b4aef';
+
+export const CHART_SECONDARY_COLOR = 'rgba(153, 153, 153, 0.3)';
+
+export const CLS_PREFIX = 'ss-chat';
+
+export const DATE_TYPES = {
+  DAY: [
+    { label: '近7天', value: 7 },
+    { label: '近30天', value: 30 },
+    { label: '近60天', value: 60 },
+    { label: '近90天', value: 90 },
+  ],
+  WEEK: [
+    { label: '近4周', value: 4 },
+    { label: '近12周', value: 12 },
+    { label: '近24周', value: 24 },
+    { label: '近52周', value: 52 },
+  ],
+  MONTH: [
+    { label: '近3个月', value: 3 },
+    { label: '近6个月', value: 6 },
+    { label: '近12个月', value: 12 },
+    { label: '近24个月', value: 24 },
+  ],
+};
+
+export const THEME_COLOR_LIST = [
+  '#3369FF',
+  '#36D2B8',
+  '#DB8D76',
+  '#47B359',
+  '#8545E6',
+  '#E0B18B',
+  '#7258F3',
+  '#0095FF',
+  '#52CC8F',
+  '#6675FF',
+  '#CC516E',
+  '#5CA9E6',
+];
+
+export const PARSE_ERROR_TIP = '智能助理不太懂您说什么呐，回去一定补充知识';
+
+export const SEARCH_EXCEPTION_TIP =
+  '查询出错啦，数据库可能出现异常或者负载繁忙，请联系管理员或者稍后重试';
+
+export const MSG_VALID_TIP = {
+  [MsgValidTypeEnum.SEARCH_EXCEPTION]: '数据查询异常',
+  [MsgValidTypeEnum.INVALID]: '智能助理不太懂您说什么呐，回去一定补充知识',
+};
+
+export const PREFIX_CLS = 'ss-chat';
+
+export const AGG_TYPE_MAP = {
+  SUM: '总计',
+  AVG: '平均值',
+  MAX: '最大值',
+  MIN: '最小值',
+};
+
+export enum MsgContentTypeEnum {
+  TEXT = 'TEXT',
+  METRIC_CARD = 'METRIC_CARD',
+  TABLE = 'TABLE',
+  METRIC_TREND = 'METRIC_TREND',
+  METRIC_BAR = 'METRIC_BAR',
+  MARKDOWN = 'MARKDOWN',
+  METRIC_PIE = 'METRIC_PIE',
+}
+
+export enum ChatContextTypeQueryTypeEnum {
+  AGGREGATE = 'AGGREGATE',
+  METRIC_TAG = 'METRIC_TAG',
+  ID = 'ID',
+  DETAIL = 'DETAIL',
+  OTHER = 'OTHER',
+}

package/src/common/env.ts

@@ -0,0 +1,5 @@
+export const userAvatarUrl = '';
+
+export const webPageHost = '';
+
+export const copilotTitle = 'Copilot';