@lobehub/ui 1.3.0 → 1.5.0

package/lib/Markdown/style.js

@@ -26,29 +26,104 @@ var import_antd_style = require("antd-style");
 var useStyles = (0, import_antd_style.createStyles)(({ css, token, isDarkMode }) => {
   return {
     container: css`
+       color: ${isDarkMode ? token.colorTextSecondary : token.colorText};
+
+
+
       p {
         margin: 20px auto;
         line-height: 2;
         word-wrap: break-word;
         font-size: 14px;
         color: ${token.colorText};
+
+        &:not(:last-child) {
+          margin-bottom: 1em;
+        }
+      }
+
+      // hyperlink
+      a {
+        color: ${token.colorLink};
+
+        &:hover {
+          color: ${token.colorLinkHover};
+        }
+
+        &:active {
+          color: ${token.colorLinkActive};
+        }
+      }
+
+      img {
+        max-width: 100%;
+      }
+
+      // inline code
+      > :not([data-code-type='highlighter']) code {
+        padding: 2px 6px;
+        color: ${isDarkMode ? token["cyan-7"] : token.colorPrimaryText};
+        background: ${isDarkMode ? token["cyan-1"] : token.colorPrimaryBg};
+        border-radius: 4px;
+      }
+
+
+      // table
+      table {
+        width: 100%;
+        border-spacing: 0;
+        border: 1px solid ${token.colorBorder};
+        border-radius: ${token.borderRadius}px;
+        padding: 8px;
+        margin-block-start: 1em;
+        margin-block-end: 1em;
+        margin-inline-start: 0px;
+        margin-inline-end: 0px;
       }
 
-      p:not(:last-child) {
-        margin-bottom: 1em;
+      th {
+
+      }
+
+      thead {
+        tr {
+          th {
+            background: ${token.colorFillTertiary};
+            &:first-child {
+              border-top-left-radius: ${token.borderRadius}px;
+              border-bottom-left-radius: ${token.borderRadius}px;
+            }
+            &:last-child {
+              border-top-right-radius: ${token.borderRadius}px;
+              border-bottom-right-radius: ${token.borderRadius}px;
+            }
+          }
+        }
       }
 
-      blockquote p {
-        color: ${token.colorTextDescription};
+      th,
+      td {
+        padding-block-start: 10px;
+        padding-block-end: 10px;
+        padding-inline-start: 16px;
+        padding-inline-end: 16px;
       }
 
-      ol,
-      ul {
-        li {
-          line-height: 2;
-          display: list-item;
+      // blockquote
+      blockquote {
+        margin: 16px 0;
+        padding: 0 12px;
+        p {
+          font-style: italic;
+          color: ${token.colorTextDescription};
         }
       }
+
+      // list
+      ul li {
+        line-height: 1.8;
+      }
+    }
     `,
     code: css`
       padding: 2px 4px;

package/lib/MessageModal/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface MessageModalProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    editing?: boolean;
+    onEditingChange?: (editing: boolean) => void;
+    onChange?: (text: string) => void;
+    value: string;
+}
+declare const MessageModal: import("react").NamedExoticComponent<MessageModalProps>;
+export default MessageModal;

package/lib/MessageModal/index.js

@@ -0,0 +1,98 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/MessageModal/index.tsx
+var MessageModal_exports = {};
+__export(MessageModal_exports, {
+  default: () => MessageModal_default
+});
+module.exports = __toCommonJS(MessageModal_exports);
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var import_antd_style = require("antd-style");
+var import_react = require("react");
+var import_react_layout_kit = require("react-layout-kit");
+var import_use_merge_value = __toESM(require("use-merge-value"));
+var import_Markdown = __toESM(require("../Markdown"));
+var import_MessageInput = __toESM(require("../MessageInput"));
+var useStyles = (0, import_antd_style.createStyles)(({ css, prefixCls }) => ({
+  modal: css`
+    height: 70%;
+    .${prefixCls}-modal-header {
+      margin-bottom: 24px;
+    }
+  `,
+  body: css`
+    overflow-y: scroll;
+    max-height: 70vh;
+  `
+}));
+var MessageModal = (0, import_react.memo)(
+  ({ editing, open, onOpenChange, onEditingChange, value, onChange }) => {
+    const { styles } = useStyles();
+    const [isEdit, setTyping] = (0, import_use_merge_value.default)(false, {
+      value: editing,
+      onChange: onEditingChange
+    });
+    const [expand, setExpand] = (0, import_use_merge_value.default)(false, {
+      value: open,
+      onChange: onOpenChange
+    });
+    return /* @__PURE__ */ React.createElement(
+      import_antd.Modal,
+      {
+        open: expand,
+        width: 800,
+        onCancel: () => setExpand(false),
+        okText: "编辑",
+        onOk: () => {
+          setTyping(true);
+        },
+        footer: isEdit ? null : void 0,
+        cancelText: "关闭",
+        title: /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { horizontal: true, align: "center", gap: 4 }, /* @__PURE__ */ React.createElement(import_icons.AimOutlined, null), "提示词"),
+        className: styles.modal
+      },
+      isEdit ? /* @__PURE__ */ React.createElement(
+        import_MessageInput.default,
+        {
+          onConfirm: (text) => {
+            setTyping(false);
+            onChange == null ? void 0 : onChange(text);
+          },
+          onCancel: () => setTyping(false),
+          defaultValue: value,
+          height: 400
+        }
+      ) : /* @__PURE__ */ React.createElement(import_Markdown.default, { className: styles.body }, value)
+    );
+  }
+);
+var MessageModal_default = MessageModal;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/ThemeProvider/GlobalStyle.js

@@ -46,24 +46,6 @@ var GlobalStyle = import_antd_style.createGlobalStyle`
   #root {
 	  min-height: 100vh;
   }
-
-  @font-face {
-    font-family: AliPuHui;
-    font-weight: normal;
-    src: url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),
-    url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'),
-    url('//at.alicdn.com/t/webfont_exesdog9toj.ttf') format('truetype');
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: AliPuHui;
-    font-weight: bold;
-    src: url('https://at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2') format('woff2'),
-    url('https://at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff') format('woff');
-    font-display: swap;
-  }
-
   /* 定义滚动槽的样式 */
   ::-webkit-scrollbar {
     width: 0;

package/lib/index.d.ts

@@ -1,12 +1,17 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
+export { default as Avatar, type AvatarProps } from './Avatar';
+export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
 export { default as CopyButton, type CopyButtonProps } from './CopyButton';
 export { default as DraggablePanel, type DraggablePanelProps } from './DraggablePanel';
+export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { default as Highlighter, SyntaxHighlighter, type HighlighterProps, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
+export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';
 export { default as MessageInput, type MessageInputProps } from './MessageInput';
+export { default as MessageModal, type MessageModalProps } from './MessageModal';
 export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as Snippet, type SnippetProps } from './Snippet';

package/lib/index.js

@@ -30,14 +30,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ActionIcon: () => import_ActionIcon.default,
+  Avatar: () => import_Avatar.default,
+  ContextMenu: () => import_ContextMenu.default,
   CopyButton: () => import_CopyButton.default,
   DraggablePanel: () => import_DraggablePanel.default,
+  EditableMessage: () => import_EditableMessage.default,
   EditableText: () => import_EditableText.default,
   Highlighter: () => import_Highlighter.default,
   Icon: () => import_Icon.default,
+  List: () => import_List.default,
   Logo: () => import_Logo.default,
   Markdown: () => import_Markdown.default,
   MessageInput: () => import_MessageInput.default,
+  MessageModal: () => import_MessageModal.default,
   SearchBar: () => import_SearchBar.default,
   SideNav: () => import_SideNav.default,
   Snippet: () => import_Snippet.default,
@@ -53,14 +58,19 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var import_ActionIcon = __toESM(require("./ActionIcon"));
+var import_Avatar = __toESM(require("./Avatar"));
+var import_ContextMenu = __toESM(require("./ContextMenu"));
 var import_CopyButton = __toESM(require("./CopyButton"));
 var import_DraggablePanel = __toESM(require("./DraggablePanel"));
+var import_EditableMessage = __toESM(require("./EditableMessage"));
 var import_EditableText = __toESM(require("./EditableText"));
 var import_Highlighter = __toESM(require("./Highlighter"));
 var import_Icon = __toESM(require("./Icon"));
+var import_List = __toESM(require("./List"));
 var import_Logo = __toESM(require("./Logo"));
 var import_Markdown = __toESM(require("./Markdown"));
 var import_MessageInput = __toESM(require("./MessageInput"));
+var import_MessageModal = __toESM(require("./MessageModal"));
 var import_SearchBar = __toESM(require("./SearchBar"));
 var import_SideNav = __toESM(require("./SideNav"));
 var import_Snippet = __toESM(require("./Snippet"));
@@ -73,14 +83,19 @@ var import_Tooltip = __toESM(require("./Tooltip"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionIcon,
+  Avatar,
+  ContextMenu,
   CopyButton,
   DraggablePanel,
+  EditableMessage,
   EditableText,
   Highlighter,
   Icon,
+  List,
   Logo,
   Markdown,
   MessageInput,
+  MessageModal,
   SearchBar,
   SideNav,
   Snippet,

package/lib/styles/theme/base.js

@@ -33,7 +33,7 @@ var baseTheme = {
     borderRadiusSM: 3,
     borderRadiusLG: 8,
     controlHeight: 36,
-    fontFamily: `'Segoe UI', SegoeUI, AliPuHui, -apple-system ,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'`,
+    fontFamily: `'Segoe UI', SegoeUI, -apple-system ,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'`,
     fontFamilyCode: `'Hack Nerd Font Mono', 'Hack', 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace`
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -65,10 +65,12 @@
   "dependencies": {
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
+    "@floating-ui/react": "^0.24",
     "ahooks": "^3",
     "antd-style": "^3",
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
+    "dayjs": "^1",
     "leva": "^0.9.34",
     "lodash": "^4",
     "lucide-react": "latest",
@@ -78,6 +80,7 @@
     "react-layout-kit": "^1",
     "react-markdown": "^8",
     "react-rnd": "^10",
+    "remark-gfm": "^3.0.1",
     "shiki-es": "^0.2",
     "styled-components": "^6.0.0-rc.1",
     "use-merge-value": "^1",