add chat plugin and split query to parse and execute (#25)

* [feature](webapp) add drill down dimensions and metric period compare and modify layout

* [feature](webapp) add drill down dimensions and metric period compare and modify layout

* [feature](webapp) gitignore add supersonic-webapp

* [feature](webapp) gitignore add supersonic-webapp

* [feature](webapp) add chat plugin and split query to parse and execute

* [feature](webapp) add chat plugin and split query to parse and execute

* [feature](webapp) add chat plugin and split query to parse and execute

---------

Co-authored-by: williamhliu <williamhliu@tencent.com>

webapp/packages/chat-sdk/src/components/Tools/index.tsx

@@ -1,20 +1,49 @@
 import { isMobile } from '../../utils/utils';
 import { DislikeOutlined, LikeOutlined } from '@ant-design/icons';
-import { Button, message } from 'antd';
+import { Button, Popover, message } from 'antd';
 import { CLS_PREFIX } from '../../common/constants';
 import { MsgDataType } from '../../common/type';
+import RecommendOptions from '../RecommendOptions';
+import { useState } from 'react';
+import classNames from 'classnames';
+import { updateQAFeedback } from '../../service';
 
 type Props = {
   data: MsgDataType;
+  scoreValue?: number;
   isLastMessage?: boolean;
   isMobileMode?: boolean;
+  onSwitchEntity: (entityId: string) => void;
+  onChangeChart: () => void;
 };
 
-const Tools: React.FC<Props> = ({ data, isLastMessage, isMobileMode }) => {
+const Tools: React.FC<Props> = ({
+  data,
+  scoreValue,
+  isLastMessage,
+  isMobileMode,
+  onSwitchEntity,
+  onChangeChart,
+}) => {
+  const [recommendOptionsOpen, setRecommendOptionsOpen] = useState(false);
+  const { queryColumns, queryResults, queryId, chatContext, queryMode } = data || {};
+  const [score, setScore] = useState(scoreValue || 0);
+
   const prefixCls = `${CLS_PREFIX}-tools`;
 
+  const noDashboard =
+    (queryColumns?.length === 1 &&
+      queryColumns[0].showType === 'CATEGORY' &&
+      queryResults?.length === 1) ||
+    (!queryMode.includes('METRIC') && !queryMode.includes('ENTITY'));
+
+  console.log(
+    'chatContext?.properties?.CONTEXT?.plugin?.name',
+    chatContext?.properties?.CONTEXT?.plugin?.name
+  );
+
   const changeChart = () => {
-    message.info('正在开发中，敬请期待');
+    onChangeChart();
   };
 
   const addToDashboard = () => {
@@ -22,32 +51,73 @@ const Tools: React.FC<Props> = ({ data, isLastMessage, isMobileMode }) => {
   };
 
   const like = () => {
-    message.info('正在开发中，敬请期待');
+    setScore(5);
+    updateQAFeedback(queryId, 5);
   };
 
   const dislike = () => {
-    message.info('正在开发中，敬请期待');
+    setScore(1);
+    updateQAFeedback(queryId, 1);
   };
 
-  const feedbackSection = isLastMessage && (
-    <div className={`${prefixCls}-feedback`}>
-      <div>这个回答正确吗？</div>
-      <LikeOutlined className={`${prefixCls}-like`} onClick={like} />
-      <DislikeOutlined className={`${prefixCls}-dislike`} onClick={dislike} />
-    </div>
-  );
+  const switchEntity = (option: string) => {
+    setRecommendOptionsOpen(false);
+    onSwitchEntity(option);
+  };
+
+  const likeClass = classNames(`${prefixCls}-like`, {
+    [`${prefixCls}-feedback-active`]: score === 5,
+  });
+  const dislikeClass = classNames(`${prefixCls}-dislike`, {
+    [`${prefixCls}-feedback-active`]: score === 1,
+  });
 
   return (
     <div className={prefixCls}>
-      {!isMobile && !isMobileMode && (
+      {/* {isLastMessage && chatContext?.domainId && entityInfo?.entityId && (
+        <Popover
+          content={
+            <RecommendOptions
+              entityId={entityInfo.entityId}
+              domainId={chatContext.domainId}
+              domainName={chatContext.domainName}
+              isMobileMode={isMobileMode}
+              onSelect={switchEntity}
+            />
+          }
+          placement={isMobileMode ? 'top' : 'right'}
+          trigger="click"
+          open={recommendOptionsOpen}
+          onOpenChange={open => setRecommendOptionsOpen(open)}
+        >
+          <Button shape="round">切换其他匹配内容</Button>
+        </Popover>
+      )} */}
+      {!isMobile && (
         <>
-          <Button shape="round" onClick={changeChart}>
-            切换图表
-          </Button>
-          <Button shape="round" onClick={addToDashboard}>
-            加入看板
-          </Button>
-          {feedbackSection}
+          {queryMode === 'METRIC_FILTER' && (
+            <Button shape="round" onClick={changeChart}>
+              切换图表
+            </Button>
+          )}
+          {!noDashboard && (
+            <Button shape="round" onClick={addToDashboard}>
+              加入看板
+            </Button>
+          )}
+          {isLastMessage && (
+            <div className={`${prefixCls}-feedback`}>
+              <div>这个回答正确吗？</div>
+              <LikeOutlined className={likeClass} onClick={like} />
+              <DislikeOutlined
+                className={dislikeClass}
+                onClick={e => {
+                  e.stopPropagation();
+                  dislike();
+                }}
+              />
+            </div>
+          )}
         </>
       )}
     </div>