@antv/dumi-theme-antv 0.8.0-beta.1 → 0.8.0-beta.11

package/dist/components/AI/HomeDialog/PromptTextarea/index.js

@@ -10,55 +10,86 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { DatasourceCard } from "./DatasourceCard";
 import { useEventListener } from 'ahooks';
-import { message, Tooltip, Upload } from 'antd';
 import classnames from 'classnames';
 import _ from 'lodash';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styles from "./index.module.less";
 import { SendButton } from "./SendButton";
-import { AIMode, FileIcons } from "../../constant";
 import { ChooseLib } from "./ChooseLib";
-import { useSiteData } from 'dumi';
+import { useSiteData, useIntl } from 'dumi';
 import { ic } from "../../../../slots/hooks";
 import { useTypewriter } from "../../../../hooks/useTypewriter";
+import { authStore, showLoginModal } from "../../../../model/auth";
+import { useSnapshot } from "valtio";
+import { AIChatStore } from "../../../../model/AIChat";
 var PLACEHOLDER = {
-  implement: '今天，你想可视化什么？',
-  solve: '今天，你想解决什么可视化问题？'
+  implement: 'ai.placeholder.implement',
+  solve: 'ai.placeholder.solve'
 };
-var uploadFileTooltip = '仅支持csv,json,tsv,txt文件，为了性能和成本，只会使用您数据的前几行作为样本';
-function PromptTextarea(props) {
+export var PromptTextarea = /*#__PURE__*/React.memo(function PromptTextareaInner(props) {
   var value = props.value,
     size = props.size,
     _onChange = props.onChange,
+    onDataSummaryChange = props.onDataSummaryChange,
     onConfirm = props.onConfirm,
     onCancel = props.onCancel,
     loading = props.loading,
-    fileMeta = props.fileMeta,
     mode = props.mode,
-    lib = props.lib,
-    onLibChange = props.onLibChange,
     _props$showAction = props.showAction,
     showAction = _props$showAction === void 0 ? true : _props$showAction;
-  var _useState = useState(false),
+  var snap = useSnapshot(AIChatStore);
+  var authSnap = useSnapshot(authStore);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var textareaRef = useRef(null);
+  var _useSiteData = useSiteData(),
+    themeConfig = _useSiteData.themeConfig;
+  useEffect(function () {
+    if (!themeConfig.isAntVSite && !snap.lib) {
+      AIChatStore.lib = themeConfig.title;
+    }
+  }, [themeConfig.isAntVSite, themeConfig.title]);
+  // 将fileMeta状态移到组件内部管理
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    showError = _useState2[0],
-    setShowError = _useState2[1];
+    fileMeta = _useState2[0],
+    setFileMeta = _useState2[1];
+
+  // ... 其他状态和hooks保持不变
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     focus = _useState4[0],
     setFocus = _useState4[1];
   var isCompact = size === 'compact';
-  var _useSiteData = useSiteData(),
-    themeConfig = _useSiteData.themeConfig;
   var typedPlaceholder = useTypewriter({
-    texts: ["".concat(themeConfig.title, "\u662F\u4EC0\u4E48\uFF1F"), ic(themeConfig.metas.description)]
+    texts: [formatMessage({
+      id: 'ai.placeholder.whatis'
+    }, {
+      title: themeConfig.title
+    }), ic(themeConfig.metas.description)]
   });
+
+  // 处理DataUploader的回调
+  var handleDataAnalyzed = function handleDataAnalyzed(analyzedData) {
+    setFileMeta(analyzedData.fileMeta);
+    if (onDataSummaryChange) {
+      onDataSummaryChange(analyzedData.dataSummary);
+    }
+  };
   function renderDatasourceCard() {
     if (((fileMeta === null || fileMeta === void 0 ? void 0 : fileMeta.type) === 'FILE' || (fileMeta === null || fileMeta === void 0 ? void 0 : fileMeta.type) === 'IMAGE') && fileMeta !== null && fileMeta !== void 0 && fileMeta.fileName) {
+      // 当点击DatasourceCard的关闭按钮时，应该清空状态
+      var handleClose = function handleClose() {
+        setFileMeta(null);
+        if (onDataSummaryChange) {
+          onDataSummaryChange('');
+        }
+      };
       return /*#__PURE__*/React.createElement(DatasourceCard, {
         type: fileMeta.type,
         title: fileMeta.fileName,
-        desc: fileMeta.fileSize
+        desc: fileMeta.fileSize,
+        onDelete: handleClose
       });
     } else {
       return null;
@@ -66,14 +97,18 @@ function PromptTextarea(props) {
   }
   var datasourceNode = renderDatasourceCard();
   var promptTextValid = Boolean(value);
-  var send = function send() {
-    if (!promptTextValid) {
-      message.warning('请输入指令');
-    } else {
-      setShowError(false);
+  var pureSend = function pureSend() {
+    if (promptTextValid) {
       onConfirm === null || onConfirm === void 0 || onConfirm();
     }
   };
+  var send = function send() {
+    if (!authSnap.isAuthenticated) {
+      showLoginModal(pureSend);
+      return;
+    }
+    pureSend();
+  };
   useEventListener('keydown', function (event) {
     if (event.key === 'Enter') {
       // 不区分 textarea 是否聚焦
@@ -82,6 +117,8 @@ function PromptTextarea(props) {
         send(); // 触发自定义事件
       }
     }
+  }, {
+    target: textareaRef
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.container, _defineProperty(_defineProperty(_defineProperty({}, styles.active, focus), styles.compact, isCompact), styles.withDatasource, Boolean(datasourceNode))),
@@ -97,9 +134,12 @@ function PromptTextarea(props) {
     },
     id: "prompt-textarea",
     className: classnames(styles.promptTextarea),
+    ref: textareaRef,
     placeholder:
     // (!isCompact && !themeConfig.isAntVSite && ic(themeConfig.metas.description)) ||
-    !isCompact && !themeConfig.isAntVSite ? typedPlaceholder : _.get(PLACEHOLDER, mode, '今天，你想可视化什么？'),
+    !isCompact && !themeConfig.isAntVSite ? typedPlaceholder : formatMessage({
+      id: _.get(PLACEHOLDER, mode, 'ai.placeholder.implement')
+    }),
     value: value,
     onChange: function onChange(evt) {
       _onChange(evt.target.value);
@@ -109,22 +149,12 @@ function PromptTextarea(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.dataActions
   }, showAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ChooseLib, {
-    value: lib,
-    onChange: onLibChange,
-    size: size
-  }), mode === AIMode.implement && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: isCompact ? "\u4E0A\u4F20\u6570\u636E\u3002".concat(uploadFileTooltip) : uploadFileTooltip
-  }, /*#__PURE__*/React.createElement(Upload, null, /*#__PURE__*/React.createElement("button", {
-    type: "button"
-  }, /*#__PURE__*/React.createElement("img", {
-    src: FileIcons.FILE
-  }), " ", !isCompact && '上传数据'))), /*#__PURE__*/React.createElement(Tooltip, {
-    title: isCompact && '上传图片'
-  }, /*#__PURE__*/React.createElement(Upload, null, /*#__PURE__*/React.createElement("button", {
-    type: "button"
-  }, /*#__PURE__*/React.createElement("img", {
-    src: FileIcons.IMAGE
-  }), " ", !isCompact && '上传图片')))))), /*#__PURE__*/React.createElement("div", {
+    size: size,
+    value: snap.lib,
+    onChange: function onChange(s) {
+      return AIChatStore.lib = s;
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
     className: styles.actions
   }, loading ? /*#__PURE__*/React.createElement("img", {
     className: styles.actionBtn,
@@ -133,7 +163,8 @@ function PromptTextarea(props) {
   }) : /*#__PURE__*/React.createElement(SendButton, {
     onClick: send,
     disabled: !promptTextValid,
-    tip: !promptTextValid ? "\u8BF7\u8F93\u5165\u5185\u5BB9\u540E\u53D1\u9001\u6307\u4EE4" : undefined
+    tip: !promptTextValid ? formatMessage({
+      id: 'ai.msgbox.send.tip'
+    }) : undefined
   }))));
-}
-export { PromptTextarea };
+});

package/dist/components/AI/HomeDialog/PromptTextarea/index.module.less

@@ -7,10 +7,10 @@
   padding: 16px;
   gap: 16px;
   transition: all 0.2s;
-  border: 1px solid rgba(134, 144, 156, 0.2);
+  border: 1px solid rgba(134, 144, 156, 20%);
   border-radius: 16px;
-  background: #ffffff99;
-  box-shadow: 8px 8px 20px 0px #0000000a, inset 1px -1px 0 0px #ffffffe3;
+  background: #fff9;
+  box-shadow: 8px 8px 20px 0 #0000000a, inset 1px -1px 0 0 #ffffffe3;
   z-index: 10;
   display: flex;
   flex-direction: column;
@@ -37,6 +37,7 @@
 
       :global {
         button {
+          cursor: pointer;
           display: inline-flex;
           align-items: center;
           height: 32px;
@@ -51,8 +52,8 @@
 
           &.btn-error {
             color: #ff4d4f;
-            box-shadow: inset 1px -1px 0 0 rgba(255, 255, 255, 0.89),
-              0 0 12px 0 rgba(250, 16, 16, 0.23);
+            box-shadow: inset 1px -1px 0 0 rgba(255, 255, 255, 89%),
+              0 0 12px 0 rgba(250, 16, 16, 23%);
           }
 
           .btn-icon,
@@ -74,9 +75,9 @@
   }
 
   &.active {
-    background: #ffffff99;
+    background: #fff9;
     border: 1px solid #1677ff;
-    box-shadow: 0px 8px 20px 0px #1677ff29, inset 1px -1px 0 0px #ffffffe3;
+    box-shadow: 0 8px 20px 0 #1677ff29, inset 1px -1px 0 0 #ffffffe3;
 
     .promptTextarea::placeholder {
       color: transparent;
@@ -122,6 +123,6 @@
   background: transparent;
 
   &::placeholder {
-    color: rgba(122, 132, 153, 0.85);
+    color: rgba(122, 132, 153, 85%);
   }
 }

package/dist/components/AI/HomeDialog/RecommendCase/Card.js

@@ -3,22 +3,21 @@ import React from 'react';
 import styles from "./card.module.less";
 import { BarChartOutlined, QuestionCircleOutlined } from "@ant-design/icons";
 import { AIMode, AIModeMeta, COLORS } from "../../constant";
+import { FormattedMessage } from 'dumi';
 export var Card = function Card(_ref) {
   var _AIModeMeta$tag;
   var item = _ref.item,
-    index = _ref.index;
+    index = _ref.index,
+    onClick = _ref.onClick;
   var query = item.query,
     description = item.description,
     _item$imageUrls = item.imageUrls,
     imageUrls = _item$imageUrls === void 0 ? [] : _item$imageUrls,
-    link = item.link,
     tag = item.tag;
   var style = COLORS[index];
   var handleClick = function handleClick(e) {
     e.stopPropagation();
-    var urlObj = new URL(location.href);
-    urlObj.hash = "";
-    window.open(urlObj.toString(), '_blank');
+    onClick === null || onClick === void 0 || onClick();
   };
   var popoverContent = /*#__PURE__*/React.createElement("div", {
     className: styles.popoverContent
@@ -26,13 +25,17 @@ export var Card = function Card(_ref) {
     className: styles.popoverItem
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.popoverLabel
-  }, "\u6848\u4F8B\u540D"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "ai.recommend.card.caseName"
+  })), /*#__PURE__*/React.createElement("div", {
     className: styles.popoverValue
   }, query)), /*#__PURE__*/React.createElement("div", {
     className: styles.popoverItem
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.popoverLabel
-  }, "\u63CF\u8FF0\u4FE1\u606F"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "ai.recommend.card.description"
+  })), /*#__PURE__*/React.createElement("div", {
     className: styles.popoverValue
   }, description)));
   return /*#__PURE__*/React.createElement(Popover, {
@@ -54,7 +57,9 @@ export var Card = function Card(_ref) {
     className: styles.typeIcon
   }), /*#__PURE__*/React.createElement("span", {
     className: styles.typeText
-  }, ((_AIModeMeta$tag = AIModeMeta[tag]) === null || _AIModeMeta$tag === void 0 ? void 0 : _AIModeMeta$tag.name) || tag)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: ((_AIModeMeta$tag = AIModeMeta[tag]) === null || _AIModeMeta$tag === void 0 ? void 0 : _AIModeMeta$tag.name) || tag
+  }))), /*#__PURE__*/React.createElement("div", {
     className: styles.title
   }, query), /*#__PURE__*/React.createElement("div", {
     className: styles.imageContainer

package/dist/components/AI/HomeDialog/RecommendCase/card.module.less

@@ -8,7 +8,7 @@
   overflow: hidden;
   position: relative;
   aspect-ratio: 292 / 208;
-  background: rgba(22, 119, 255, 0.06);
+  background: rgba(22, 119, 255, 6%);
 
   .typeTag {
     display: flex;

package/dist/components/AI/HomeDialog/RecommendCase/index.js

@@ -15,34 +15,58 @@ import styles from "./index.module.less";
 import { ReloadOutlined } from "@ant-design/icons";
 import RecommendJson from "./recommend.json";
 import classnames from "classnames";
+import { FormattedMessage, useSiteData } from 'dumi';
+import { sampleSize } from "lodash-es";
 export var RecommendCase = function RecommendCase(props) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     loading = _useState2[0],
     setLoading = _useState2[1];
+  var _useSiteData = useSiteData(),
+    themeConfig = _useSiteData.themeConfig;
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     list = _useState4[0],
     setList = _useState4[1];
   var fetchList = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var data;
+    var _themeConfig$ai, data;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          try {
-            setLoading(true);
-            data = RecommendJson;
-            setList(data.slice(0, 4));
-          } catch (err) {
-            console.log(err);
-          } finally {
-            setLoading(false);
+          _context.prev = 0;
+          setLoading(true);
+          data = [];
+          if (!(themeConfig !== null && themeConfig !== void 0 && (_themeConfig$ai = themeConfig.ai) !== null && _themeConfig$ai !== void 0 && _themeConfig$ai.recommend)) {
+            _context.next = 9;
+            break;
           }
-        case 1:
+          _context.next = 6;
+          return fetch(themeConfig.ai.recommend).then(function (res) {
+            return res.json();
+          });
+        case 6:
+          data = _context.sent;
+          _context.next = 10;
+          break;
+        case 9:
+          data = RecommendJson;
+        case 10:
+          setList(sampleSize(data, 4));
+          _context.next = 16;
+          break;
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](0);
+          console.log(_context.t0);
+        case 16:
+          _context.prev = 16;
+          setLoading(false);
+          return _context.finish(16);
+        case 19:
         case "end":
           return _context.stop();
       }
-    }, _callee);
+    }, _callee, null, [[0, 13, 16, 19]]);
   })), [list]);
   useEffect(function () {
     fetchList();
@@ -56,12 +80,16 @@ export var RecommendCase = function RecommendCase(props) {
     className: styles.title
   }, /*#__PURE__*/React.createElement("span", {
     className: styles.quickStart
-  }, "\u7CBE\u9009\u6848\u4F8B"), /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "ai.recommend.title"
+  })), /*#__PURE__*/React.createElement("span", {
     className: styles.refresh,
     onClick: function onClick() {
       return fetchList();
     }
-  }, /*#__PURE__*/React.createElement(ReloadOutlined, null), "\u6362\u4E00\u6279")), /*#__PURE__*/React.createElement(Spin, {
+  }, /*#__PURE__*/React.createElement(ReloadOutlined, null), /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "ai.recommend.refresh"
+  }))), /*#__PURE__*/React.createElement(Spin, {
     spinning: loading,
     wrapperClassName: classnames(styles.listContainer, props.className)
   }, /*#__PURE__*/React.createElement("div", {
@@ -70,7 +98,11 @@ export var RecommendCase = function RecommendCase(props) {
     return /*#__PURE__*/React.createElement(Card, {
       key: item.caseId,
       item: item,
-      index: index
+      index: index,
+      onClick: function onClick() {
+        var _props$onClick;
+        (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, item);
+      }
     });
   }))));
 };

package/dist/components/AI/HomeDialog/RecommendCase/index.module.less

@@ -2,6 +2,7 @@
   margin-top: 32px;
   margin-left: auto;
   margin-right: auto;
+  z-index: 10;
 }
 
 .title {
@@ -27,15 +28,15 @@
     display: flex;
     gap: 2px;
     align-items: center;
-
     font-size: 12px;
-    color: rgba(78, 89, 105, 0.6);
+    color: rgba(78, 89, 105, 60%);
   }
 }
 
 .listContainer {
   width: 100%;
 }
+
 .list {
   display: grid;
   grid-template-columns: repeat(4, 1fr);

package/dist/components/AI/HomeDialog/index.js

@@ -13,25 +13,24 @@ import { ModeSelector } from "./ModeSelector";
 import { useLocalStorageState } from 'ahooks';
 import { AIMode } from "../constant";
 import classnames from 'classnames';
-import { useSiteData } from 'dumi';
+import { useLocale } from 'dumi';
 import { createNewSession } from "../../../model/AIChat";
 export function HomeDialog(props) {
-  var _useSiteData = useSiteData(),
-    themeConfig = _useSiteData.themeConfig;
-  var _useState = useState(!themeConfig.isAntVSite ? themeConfig.title : undefined),
-    _useState2 = _slicedToArray(_useState, 2),
-    lib = _useState2[0],
-    setLib = _useState2[1];
+  var locale = useLocale();
   var _useLocalStorageState = useLocalStorageState('use-local-storage-ai-mode-type', {
       defaultValue: AIMode.implement
     }),
     _useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 2),
     mode = _useLocalStorageState2[0],
     setMode = _useLocalStorageState2[1];
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    promptText = _useState2[0],
+    setPromptText = _useState2[1];
   var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    promptText = _useState4[0],
-    setPromptText = _useState4[1];
+    fileSummary = _useState4[0],
+    setFileSummary = _useState4[1];
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.content, props.className),
     style: props.style
@@ -44,10 +43,6 @@ export function HomeDialog(props) {
   }), /*#__PURE__*/React.createElement(PromptTextarea, {
     mode: mode,
     value: promptText,
-    lib: lib,
-    onLibChange: function onLibChange(v) {
-      setLib(v);
-    },
     onChange: function onChange(val) {
       setPromptText(val);
     },
@@ -55,12 +50,19 @@ export function HomeDialog(props) {
       createNewSession({
         promptText: promptText,
         mode: mode,
-        lib: lib,
-        jump: true
+        jump: true,
+        context: fileSummary,
+        lang: locale.id
       });
     },
-    style: props.promptTextareaStyle
+    style: props.promptTextareaStyle,
+    onDataSummaryChange: setFileSummary
   }), /*#__PURE__*/React.createElement(RecommendCase, {
-    className: props.recommendCaseClassName
+    className: props.recommendCaseClassName,
+    onClick: function onClick(val) {
+      if (val !== null && val !== void 0 && val.query) {
+        setPromptText(val.query);
+      }
+    }
   }));
 }

package/dist/components/AI/constant.js

@@ -6,11 +6,11 @@ export var AIMode = {
 };
 export var AIModeMeta = {
   implement: {
-    name: '可视化研发',
+    name: 'ai.mode.implement',
     icon: /*#__PURE__*/React.createElement(BarChartOutlined, null)
   },
   solve: {
-    name: '可视化答疑',
+    name: 'ai.mode.solve',
     icon: /*#__PURE__*/React.createElement(QuestionCircleOutlined, null)
   }
 };