first commit

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

@@ -0,0 +1,70 @@
+import { isMobile } from '../../utils/utils';
+import { DislikeOutlined, LikeOutlined } from '@ant-design/icons';
+import { Button, message } from 'antd';
+import { CLS_PREFIX } from '../../common/constants';
+
+type Props = {
+  isLastMessage?: boolean;
+};
+
+const Tools: React.FC<Props> = ({ isLastMessage }) => {
+  const prefixCls = `${CLS_PREFIX}-tools`;
+
+  const changeChart = () => {
+    message.info('正在开发中，敬请期待');
+  };
+
+  const addToDashboard = () => {
+    message.info('正在开发中，敬请期待');
+  };
+
+  const lockDomain = () => {
+    message.info('正在开发中，敬请期待');
+  };
+
+  const like = () => {
+    message.info('正在开发中，敬请期待');
+  };
+
+  const dislike = () => {
+    message.info('正在开发中，敬请期待');
+  };
+
+  const lockDomainSection = isLastMessage && (
+    <Button shape="round" onClick={lockDomain}>
+      锁定主题域
+    </Button>
+  );
+
+  const feedbackSection = isLastMessage && (
+    <div className={`${prefixCls}-feedback`}>
+      <div>这个回答正确吗？</div>
+      <LikeOutlined className={`${prefixCls}-like`} onClick={like} />
+      <DislikeOutlined className={`${prefixCls}-dislike`} onClick={dislike} />
+    </div>
+  );
+
+  if (isMobile) {
+    return (
+      <div className={`${prefixCls}-mobile-tools`}>
+        {isLastMessage && <div className={`${prefixCls}-tools`}>{lockDomainSection}</div>}
+        {feedbackSection}
+      </div>
+    );
+  }
+
+  return (
+    <div className={prefixCls}>
+      <Button shape="round" onClick={changeChart}>
+        切换图表
+      </Button>
+      <Button shape="round" onClick={addToDashboard}>
+        加入看板
+      </Button>
+      {lockDomainSection}
+      {feedbackSection}
+    </div>
+  );
+};
+
+export default Tools;

webapp/packages/chat-sdk/src/components/Tools/style.less

@@ -0,0 +1,37 @@
+@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;
+    margin-left: 4px;
+    color: var(--text-color-third);
+    column-gap: 6px;
+  }
+
+  &-like {
+    margin-right: 4px;
+  }
+
+  &-mobile-tools {
+    display: flex;
+    flex-direction: column;
+    margin-top: 12px;
+    row-gap: 10px;
+  }
+
+  &-tools {
+    margin-top: 0;
+  }
+
+  &-feedback {
+    margin-left: 2px;
+  }
+}