@antv/dumi-theme-antv 0.8.0-beta.2 → 0.8.0-beta.21

package/dist/builtins/Playground/index.module.less

@@ -2,7 +2,6 @@
   width: 100%;
   height: 400px;
   position: relative;
-
   margin: 0;
   padding: 0;
   border: 1px solid #f0f0f0;

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

@@ -27,9 +27,9 @@
 
   .slogan {
     background: linear-gradient(to right, #6d81ba, #6475ff);
-    -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
-    margin: 0px;
+    margin: 0;
     font-size: 16px;
   }
 }

package/dist/components/AI/HomeDialog/ModeSelector/ModeSelectorDropdown.js

@@ -0,0 +1,42 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Dropdown, Space } from 'antd';
+import { useIntl } from 'dumi';
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { AIChatStore } from "../../../../model/AIChat";
+import { AIModeMeta } from "../../constant";
+export function ModeSelectorDropdown() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var snap = useSnapshot(AIChatStore);
+  var items = Object.entries(AIModeMeta).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return {
+      key: key,
+      label: formatMessage({
+        id: value.shortName
+      }),
+      icon: value.icon,
+      // @ts-ignore
+      onClick: function onClick() {
+        return AIChatStore.mode = key;
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    menu: {
+      items: items
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button"
+  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(Space, null, AIModeMeta[snap.mode].icon, formatMessage({
+    id: AIModeMeta[snap.mode].shortName
+  })))));
+}

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

@@ -21,11 +21,10 @@
   display: flex;
   flex-direction: row;
   gap: 6px;
-
   backdrop-filter: blur(12px);
   padding: 4px;
   border-radius: 26px;
-  box-shadow: inset 1px -1px 0 0 rgba(255, 255, 255, 0.89);
+  box-shadow: inset 1px -1px 0 0 rgba(255, 255, 255, 89%);
 
   &::before {
     border-radius: 26px;
@@ -40,12 +39,12 @@
     opacity: 0.75;
     background-image: linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0.02) 0%,
-      rgba(217, 217, 217, 0.06) 50%,
-      rgba(29, 33, 41, 0) 100%
+      rgba(255, 255, 255, 2%) 0%,
+      rgba(217, 217, 217, 6%) 50%,
+      rgba(29, 33, 41, 0%) 100%
     );
-    box-shadow: inset 1px -1px 0 0 rgba(255, 255, 255, 0.89);
-    background: rgba(255, 255, 255, 0.5);
+    box-shadow: inset 1px -1px 0 0 rgba(255, 255, 255, 89%);
+    background: rgba(255, 255, 255, 50%);
   }
 
   .switchBtn {
@@ -53,7 +52,6 @@
     align-items: center;
     justify-content: center;
     gap: 8px;
-
     width: 120px;
     height: 38px;
     cursor: pointer;
@@ -68,42 +66,48 @@
     &.active {
       color: #1d2129;
       font-weight: 500;
-
-      background: #ffffff;
+      background: #fff;
       border-color: #eeeef0;
-      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 8%);
     }
   }
 }
 
 .datasetSelectorModal {
-  top: 0px;
-  padding-bottom: 0px;
+  top: 0;
+  padding-bottom: 0;
 
   .listItemContent {
     cursor: pointer;
     border: none;
     line-height: 22px;
+
     &.disabled {
       color: #86909c;
       cursor: not-allowed;
     }
+
     &:hover {
       background: #1677ff1a;
     }
+
     &:not(.disabled):hover {
       color: #1677ff;
     }
+
     padding: 7px 16px 7px 7px;
+
     &--multiline {
       padding: 4px 16px 4px 7px;
     }
   }
+
   .selected {
     background: #1677ff1a;
     font-weight: 500;
     color: #1677ff;
   }
+
   .nameWrapper {
     flex: 1 1;
     min-width: 0;
@@ -122,20 +126,24 @@
         min-width: 0;
       }
     }
+
     .desc {
       font-size: 12px;
       color: #86909ccc;
       line-height: 22px;
     }
   }
+
   .list {
     background: #ffffffdb;
-    padding: 10px 18px 18px 18px;
+    padding: 10px 18px 18px;
+
     :global {
       .ant-input-affix-wrapper {
         margin-bottom: 8px;
         border-radius: 6px;
         color: #5a607f65;
+
         .ant-input-prefix {
           margin-right: 8px;
         }
@@ -148,13 +156,16 @@
     .ant-alert-info .ant-alert-icon {
       color: #1677ff;
     }
+
     .ant-modal-footer {
       button {
         box-shadow: none;
+
         &.ant-btn-primary {
           color: white;
           background: #1677ff;
         }
+
         background: none;
         border: none;
         border-radius: 6px;
@@ -162,15 +173,18 @@
         width: 60px;
         height: 32px;
         color: #4e5969e6;
+
         &:disabled {
           background: #4e59693c;
           color: white;
         }
       }
     }
+
     .ant-modal-close-x {
       display: none;
     }
+
     .ant-modal-body {
       padding: 0;
     }
@@ -178,21 +192,26 @@
     .ant-modal-header {
       border-radius: 8px 8px 0 0;
     }
+
     .ant-modal-content {
       border-radius: 8px;
     }
+
     .ant-modal-content {
       background-color: rgb(251, 252, 253);
     }
+
     .ant-tabs-nav {
       padding-left: 18px;
       padding-right: 18px;
       margin-bottom: 0;
     }
+
     .ant-tabs-tab {
       font-size: 14px;
-      padding: 14px 0 13px 0;
+      padding: 14px 0 13px;
     }
+
     .ant-alert {
       padding: 4px 15px;
     }
@@ -214,7 +233,6 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-
     font-size: 14px;
     color: #5a607fe0;
   }
@@ -230,17 +248,17 @@
     .switchBtn {
       width: 100px;
       border-radius: 12px;
-      background: #ffffff;
+      background: #fff;
       border: 1px solid #5a607fe0;
       opacity: 0.4;
-      box-shadow: 0px 3px 12px 0px #0000000a;
+      box-shadow: 0 3px 12px 0 #0000000a;
       font-size: 14px;
       color: #86909c;
       line-height: 24px;
       height: 24px;
 
       &.active {
-        background: #ffffff;
+        background: #fff;
         border: 1px solid #2d84ff;
         color: #1677ff;
         opacity: 1;
@@ -261,12 +279,11 @@
   border-radius: 4px;
   margin-left: 8px;
   flex-shrink: 0;
-
   color: #86909c;
-  background: rgba(0, 0, 0, 0.04);
+  background: rgba(0, 0, 0, 4%);
 
   &.primary {
     color: #f68b02;
-    background: rgba(246, 144, 61, 0.1);
+    background: rgba(246, 144, 61, 10%);
   }
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Dropdown } from "antd";
-import { useProducts } from "../../../../../hooks/useProducts";
-import { useLocale, useIntl, FormattedMessage } from "dumi";
+import { useAntVConfig, useProducts } from "../../../../../hooks/useProducts";
+import { useLocale, FormattedMessage } from "dumi";
 import styles from "./index.module.less";
 export function ChooseLib(props) {
   var _data$find;
@@ -15,11 +15,20 @@ export function ChooseLib(props) {
   var _useProducts = useProducts(),
     _useProducts$data = _useProducts.data,
     data = _useProducts$data === void 0 ? [] : _useProducts$data;
+  var _useAntVConfig = useAntVConfig(),
+    _useAntVConfig$data = _useAntVConfig.data,
+    _useAntVConfig$data2 = _useAntVConfig$data === void 0 ? {
+      library: []
+    } : _useAntVConfig$data,
+    _useAntVConfig$data2$ = _useAntVConfig$data2.library,
+    library = _useAntVConfig$data2$ === void 0 ? [] : _useAntVConfig$data2$;
   var onSelect = function onSelect(key) {
     onChange === null || onChange === void 0 || onChange(key);
   };
   var items = data.filter(function (item) {
-    return item.lang === lang && ["G2", "F2", "S2", "G6", "X6", "AVA"].includes(item.title);
+    return item.lang === lang && library.map(function (l) {
+      return l.toUpperCase();
+    }).includes(item.title);
   }).map(function (item) {
     return {
       key: item.title,
@@ -35,7 +44,6 @@ export function ChooseLib(props) {
       }
     };
   });
-  var intl = useIntl();
   return /*#__PURE__*/React.createElement(Dropdown, {
     menu: {
       items: items

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

@@ -1,5 +1,4 @@
 .icon {
-  object-fit: cover;
   width: 25px;
   height: 25px;
 }

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

@@ -3,11 +3,10 @@
   align-items: center;
   height: 32px;
   position: relative;
-
   padding-left: 8px;
   padding-right: 12px;
-  background: rgba(212, 215, 219, 0.4);
-  border: 1px solid rgba(222, 226, 241, 0.7);
+  background: rgba(212, 215, 219, 40%);
+  border: 1px solid rgba(222, 226, 241, 70%);
   border-radius: 8px;
 
   img {
@@ -24,6 +23,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
   .desc {
     margin-left: 16px;
     font-size: 10px;

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

@@ -10,23 +10,24 @@ 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 { 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, useIntl } from 'dumi';
 import { ic } from "../../../../slots/hooks";
 import { useTypewriter } from "../../../../hooks/useTypewriter";
-import { DataUploader } from "./Uploader/DataUploader";
+import { authStore, showLoginModal } from "../../../../model/auth";
+import { useSnapshot } from "valtio";
+import { AIChatStore } from "../../../../model/AIChat";
+import { ModeSelectorDropdown } from "../ModeSelector/ModeSelectorDropdown";
 var PLACEHOLDER = {
   implement: 'ai.placeholder.implement',
   solve: 'ai.placeholder.solve'
 };
-function PromptTextarea(props) {
+export var PromptTextarea = /*#__PURE__*/React.memo(function PromptTextareaInner(props) {
   var value = props.value,
     size = props.size,
     _onChange = props.onChange,
@@ -34,14 +35,22 @@ function PromptTextarea(props) {
     onConfirm = props.onConfirm,
     onCancel = props.onCancel,
     loading = props.loading,
-    mode = props.mode,
-    lib = props.lib,
-    onLibChange = props.onLibChange,
     _props$showAction = props.showAction,
-    showAction = _props$showAction === void 0 ? true : _props$showAction;
+    showAction = _props$showAction === void 0 ? true : _props$showAction,
+    _props$showModeSelect = props.showModeSelector,
+    showModeSelector = _props$showModeSelect === void 0 ? false : _props$showModeSelect;
+  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),
@@ -54,8 +63,6 @@ function PromptTextarea(props) {
     focus = _useState4[0],
     setFocus = _useState4[1];
   var isCompact = size === 'compact';
-  var _useSiteData = useSiteData(),
-    themeConfig = _useSiteData.themeConfig;
   var typedPlaceholder = useTypewriter({
     texts: [formatMessage({
       id: 'ai.placeholder.whatis'
@@ -92,11 +99,18 @@ function PromptTextarea(props) {
   }
   var datasourceNode = renderDatasourceCard();
   var promptTextValid = Boolean(value);
-  var send = function send() {
+  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 是否聚焦
@@ -105,6 +119,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))),
@@ -120,10 +136,11 @@ function PromptTextarea(props) {
     },
     id: "prompt-textarea",
     className: classnames(styles.promptTextarea),
+    ref: textareaRef,
     placeholder:
     // (!isCompact && !themeConfig.isAntVSite && ic(themeConfig.metas.description)) ||
     !isCompact && !themeConfig.isAntVSite ? typedPlaceholder : formatMessage({
-      id: _.get(PLACEHOLDER, mode, 'ai.placeholder.implement')
+      id: _.get(PLACEHOLDER, snap.mode, 'ai.placeholder.implement')
     }),
     value: value,
     onChange: function onChange(evt) {
@@ -134,26 +151,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(DataUploader, {
-    onDataAnalyzed: handleDataAnalyzed,
-    isCompact: isCompact,
-    tooltipText: formatMessage({
-      id: 'ai.upload.tooltip'
-    })
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    title: isCompact ? formatMessage({
-      id: 'ai.upload.image'
-    }) : undefined
-  }, /*#__PURE__*/React.createElement(Upload, null, /*#__PURE__*/React.createElement("button", {
-    type: "button"
-  }, /*#__PURE__*/React.createElement("img", {
-    src: FileIcons.IMAGE
-  }), " ", !isCompact && formatMessage({
-    id: 'ai.upload.image'
-  }))))))), /*#__PURE__*/React.createElement("div", {
+    size: size,
+    value: snap.lib,
+    onChange: function onChange(s) {
+      return AIChatStore.lib = s;
+    }
+  })), showModeSelector && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModeSelectorDropdown, null))), /*#__PURE__*/React.createElement("div", {
     className: styles.actions
   }, loading ? /*#__PURE__*/React.createElement("img", {
     className: styles.actionBtn,
@@ -166,5 +169,4 @@ function PromptTextarea(props) {
       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;
@@ -52,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,
@@ -75,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;
@@ -123,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

@@ -1,25 +1,28 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import { Popover } from 'antd';
 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';
+import { FormattedMessage, useLocale } from 'dumi';
 export var Card = function Card(_ref) {
   var _AIModeMeta$tag;
   var item = _ref.item,
-    index = _ref.index;
-  var query = item.query,
-    description = item.description,
+    index = _ref.index,
+    onClick = _ref.onClick;
+  var _item$query = item.query,
+    query = _item$query === void 0 ? {} : _item$query,
+    _item$description = item.description,
+    description = _item$description === void 0 ? {} : _item$description,
     _item$imageUrls = item.imageUrls,
     imageUrls = _item$imageUrls === void 0 ? [] : _item$imageUrls,
-    link = item.link,
     tag = item.tag;
   var style = COLORS[index];
+  var locale = useLocale();
+  var lang = locale.id === 'zh' ? 'zh' : 'en';
   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
@@ -31,7 +34,7 @@ export var Card = function Card(_ref) {
     id: "ai.recommend.card.caseName"
   })), /*#__PURE__*/React.createElement("div", {
     className: styles.popoverValue
-  }, query)), /*#__PURE__*/React.createElement("div", {
+  }, _typeof(query) === 'object' ? query[lang] : query)), /*#__PURE__*/React.createElement("div", {
     className: styles.popoverItem
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.popoverLabel
@@ -39,7 +42,7 @@ export var Card = function Card(_ref) {
     id: "ai.recommend.card.description"
   })), /*#__PURE__*/React.createElement("div", {
     className: styles.popoverValue
-  }, description)));
+  }, _typeof(description) === 'object' ? description[lang] : description)));
   return /*#__PURE__*/React.createElement(Popover, {
     content: popoverContent,
     placement: "top",
@@ -63,7 +66,7 @@ export var Card = function Card(_ref) {
     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", {
+  }, _typeof(query) === 'object' ? query[lang] : query), /*#__PURE__*/React.createElement("div", {
     className: styles.imageContainer
   }, imageUrls.slice(0, 2).map(function (item, idx) {
     return /*#__PURE__*/React.createElement("img", {

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;
@@ -100,7 +100,7 @@
   }
 
   .popoverContent {
-    max-width: 372px;
+    max-width: 800px;
 
     .popoverItem {
       display: flex;
@@ -112,7 +112,7 @@
         color: #1d2129e6;
         line-height: 22px;
         font-weight: 500;
-        min-width: 56px;
+        min-width: 80px;
       }
 
       .popoverValue {