@ant-design/agentic-ui 2.0.8 → 2.0.10

package/dist/MarkdownInputField/AttachmentButton/index.d.ts

@@ -1,7 +1,8 @@
 import { default as React } from 'react';
 import { AttachmentButtonPopoverProps } from './AttachmentButtonPopover';
-import { AttachmentFile } from './types';
+import { AttachmentFile, UploadResponse } from './types';
 export * from './AttachmentButtonPopover';
+export type { AttachmentFile, UploadResponse } from './types';
 /**
  * AttachmentButton 组件的属性
  */
@@ -17,6 +18,28 @@ export type AttachmentButtonProps = {
      * }
      */
     upload?: (file: AttachmentFile) => Promise<string>;
+    /**
+     * 处理文件上传的函数（返回完整响应对象）。返回一个 Promise，解析为 UploadResponse 对象。
+     * 优先级高于 upload 接口，返回的完整响应对象会存储在 file.uploadResponse 中。
+     * @param file - 要上传的附件文件
+     * @param index - 文件在上传队列中的索引
+     * @returns 解析为 UploadResponse 对象的 Promise
+     * @example
+     * const uploadWithResponse = async (file: AttachmentFile, index: number) => {
+     *   const response = await api.uploadFile(file);
+     *   return {
+     *     contentId: null,
+     *     errorMessage: null,
+     *     fileId: response.fileId,
+     *     fileName: response.fileName,
+     *     fileSize: file.size,
+     *     fileType: response.fileType,
+     *     fileUrl: response.fileUrl,
+     *     uploadStatus: 'SUCCESS'
+     *   };
+     * }
+     */
+    uploadWithResponse?: (file: AttachmentFile, index: number) => Promise<UploadResponse>;
     /**
      * 存储当前附件文件的 Map，以文件 ID 为键，文件对象为值
      * @example
@@ -86,6 +109,7 @@ export declare const upLoadFileToServer: (files: ArrayLike<File>, props: {
     fileMap?: Map<string, AttachmentFile> | undefined;
     onFileMapChange?: ((files?: Map<string, AttachmentFile>) => void) | undefined;
     upload?: ((file: AttachmentFile, index: number) => Promise<string>) | undefined;
+    uploadWithResponse?: ((file: AttachmentFile, index: number) => Promise<UploadResponse>) | undefined;
     maxFileSize?: number | undefined;
     maxFileCount?: number | undefined;
     minFileCount?: number | undefined;

package/dist/MarkdownInputField/AttachmentButton/index.js

@@ -46,7 +46,7 @@ var waitTime = (time) => {
   });
 };
 var upLoadFileToServer = (files, props) => __async(void 0, null, function* () {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const map = props.fileMap || /* @__PURE__ */ new Map();
   const hideLoading = message.loading(
     ((_a = props.locale) == null ? void 0 : _a.uploading) || "Uploading..."
@@ -98,24 +98,41 @@ var upLoadFileToServer = (files, props) => __async(void 0, null, function* () {
           continue;
         }
         try {
-          const url = (yield (_h = props == null ? void 0 : props.upload) == null ? void 0 : _h.call(props, file, index)) || file.previewUrl;
-          if (url) {
+          let url;
+          let isSuccess = false;
+          let errorMsg = null;
+          if (props.uploadWithResponse) {
+            const uploadResult = yield props.uploadWithResponse(file, index);
+            url = uploadResult.fileUrl;
+            isSuccess = uploadResult.uploadStatus === "SUCCESS";
+            errorMsg = uploadResult.errorMessage || null;
+            file.uploadResponse = uploadResult;
+          } else if (props.upload) {
+            url = yield props.upload(file, index);
+            isSuccess = !!url;
+          } else {
+            url = file.previewUrl;
+            isSuccess = !!url;
+          }
+          if (isSuccess && url) {
             file.status = "done";
             file.url = url;
             map.set(file.uuid || "", file);
-            (_i = props.onFileMapChange) == null ? void 0 : _i.call(props, map);
-            message.success(((_j = props.locale) == null ? void 0 : _j.uploadSuccess) || "Upload success");
+            (_h = props.onFileMapChange) == null ? void 0 : _h.call(props, map);
+            message.success(((_i = props.locale) == null ? void 0 : _i.uploadSuccess) || "Upload success");
           } else {
             file.status = "error";
             map.set(file.uuid || "", file);
-            (_k = props.onFileMapChange) == null ? void 0 : _k.call(props, map);
-            message.error(((_l = props.locale) == null ? void 0 : _l.uploadFailed) || "Upload failed");
+            (_j = props.onFileMapChange) == null ? void 0 : _j.call(props, map);
+            const failedMsg = errorMsg || ((_k = props.locale) == null ? void 0 : _k.uploadFailed) || "Upload failed";
+            message.error(failedMsg);
           }
         } catch (error2) {
           file.status = "error";
           map.set(file.uuid || "", file);
-          (_m = props.onFileMapChange) == null ? void 0 : _m.call(props, map);
-          message.error(((_n = props.locale) == null ? void 0 : _n.uploadFailed) || "Upload failed");
+          (_l = props.onFileMapChange) == null ? void 0 : _l.call(props, map);
+          const errorMessage = error2 instanceof Error ? error2.message : ((_m = props.locale) == null ? void 0 : _m.uploadFailed) || "Upload failed";
+          message.error(errorMessage);
         }
         index++;
       }
@@ -136,8 +153,8 @@ var upLoadFileToServer = (files, props) => __async(void 0, null, function* () {
         map.set(file.uuid || "", file);
       }
     });
-    message.error(((_o = props.locale) == null ? void 0 : _o.uploadFailed) || "Upload failed");
-    (_p = props.onFileMapChange) == null ? void 0 : _p.call(props, map);
+    message.error(((_n = props.locale) == null ? void 0 : _n.uploadFailed) || "Upload failed");
+    (_o = props.onFileMapChange) == null ? void 0 : _o.call(props, map);
   } finally {
     hideLoading();
   }

package/dist/MarkdownInputField/AttachmentButton/types.d.ts

@@ -1,6 +1,21 @@
+/**
+ * 上传响应对象类型
+ */
+export type UploadResponse = {
+    contentId?: string | null;
+    errorMessage?: string | null;
+    fileId: string;
+    fileName: string;
+    fileSize?: number | null;
+    fileType: string;
+    fileUrl: string;
+    uploadStatus: 'SUCCESS' | 'FAIL' | string;
+};
 export type AttachmentFile = File & {
     url?: string;
     status?: 'error' | 'uploading' | 'done';
     uuid?: string;
     previewUrl?: string;
+    /** 上传响应数据（使用 uploadWithResponse 时会填充此字段） */
+    uploadResponse?: UploadResponse;
 };

package/dist/MarkdownInputField/BeforeToolContainer/BeforeToolContainer.js

@@ -19,8 +19,85 @@ var __spreadValues = (a, b) => {
 import { GripVertical, Menu } from "@sofa-design/icons";
 import { ConfigProvider, Popover } from "antd";
 import classNames from "classnames";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useStyle } from "../../components/ActionItemBox";
+import { useRefFunction } from "../../hooks/useRefFunction";
+var INTERACTIVE_SELECTOR = 'button, a, input, textarea, select, [role="button"], [contenteditable="true"], [data-no-pan]';
+var PAN_THRESHOLD = 6;
+var SCROLL_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  gap: 8,
+  overflowX: "auto",
+  overflowY: "hidden",
+  WebkitOverflowScrolling: "touch",
+  overscrollBehavior: "contain",
+  touchAction: "pan-x"
+};
+var POPOVER_OVERLAY_STYLE = { padding: 0 };
+var DraggablePopupItem = React.memo((props) => {
+  const {
+    entry,
+    index,
+    basePrefixCls,
+    hashId,
+    draggingIndex,
+    overIndex,
+    isHandlePressRef,
+    onDragStart,
+    onDragOver,
+    onDrop,
+    onDragEnd,
+    isHandleTarget,
+    setDraggingIndex
+  } = props;
+  const handleMouseDown = useRefFunction((evt) => {
+    const isHandle = isHandleTarget(evt.target);
+    isHandlePressRef.current = isHandle;
+    setDraggingIndex(isHandle ? index : null);
+  });
+  const handleMouseUp = useRefFunction(() => {
+    if (draggingIndex === null) {
+      isHandlePressRef.current = false;
+    }
+  });
+  const handleGripMouseDown = useRefFunction((evt) => {
+    isHandlePressRef.current = true;
+    setDraggingIndex(index);
+    evt.stopPropagation();
+  });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: entry.key,
+      className: classNames(
+        `${basePrefixCls}-overflow-container-popup-item`,
+        hashId,
+        {
+          [`${basePrefixCls}-dragging`]: draggingIndex === index,
+          [`${basePrefixCls}-drag-over`]: overIndex === index
+        }
+      ),
+      draggable: true,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      onDragStart: (evt) => onDragStart(evt, index),
+      onDragOver: (evt) => onDragOver(evt, index),
+      onDrop: (evt) => onDrop(evt, index),
+      onDragEnd
+    },
+    /* @__PURE__ */ React.createElement(
+      GripVertical,
+      {
+        className: classNames(`${basePrefixCls}-drag-handle`, hashId),
+        onMouseDown: handleGripMouseDown
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { draggable: false }, entry.node)
+  );
+});
+DraggablePopupItem.displayName = "DraggablePopupItem";
 var ActionItemContainer = (props) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const basePrefixCls = getPrefixCls("agent-chat-action-item-box");
@@ -37,23 +114,24 @@ var ActionItemContainer = (props) => {
   const panStartScrollLeftRef = useRef(0);
   const hasPanMovedRef = useRef(false);
   const panIntentRef = useRef(false);
-  const isInteractiveTarget = (target) => {
+  const isInteractiveTarget = useRefFunction((target) => {
     if (!(target instanceof HTMLElement))
       return false;
-    if (target.closest(
-      'button, a, input, textarea, select, [role="button"], [contenteditable="true"], [data-no-pan]'
-    )) {
-      return true;
-    }
-    return false;
-  };
-  const toEntries = (nodes) => {
+    return !!target.closest(INTERACTIVE_SELECTOR);
+  });
+  const isHandleTarget = useRefFunction((target) => {
+    if (!(target instanceof HTMLElement))
+      return false;
+    const handle = target.closest(`.${basePrefixCls}-drag-handle`);
+    return !!handle;
+  });
+  const toEntries = useRefFunction((nodes) => {
     const array = React.Children.toArray(nodes);
     return array.map((node) => {
       var _a;
       return { key: (_a = node == null ? void 0 : node.key) != null ? _a : null, node };
     });
-  };
+  });
   const [ordered, setOrdered] = useState(
     () => toEntries(props.children)
   );
@@ -91,154 +169,175 @@ var ActionItemContainer = (props) => {
     }
     setOrdered(merged.length === incoming.length ? merged : incoming);
   }, [props.children]);
-  const handleDragStart = (e, index) => {
-    e.stopPropagation();
-    e.dataTransfer.effectAllowed = "move";
-    try {
-      e.dataTransfer.setData("text/plain", String(index));
-    } catch (e2) {
-      console.error(e);
+  const reorder = useRefFunction(
+    (list, from, to) => {
+      const next = list.slice();
+      const [moved] = next.splice(from, 1);
+      next.splice(to, 0, moved);
+      return next;
     }
-    setDraggingIndex(index);
-  };
-  const handleDragOver = (e, index) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-    if (overIndex !== index)
-      setOverIndex(index);
-  };
-  const reorder = (list, from, to) => {
-    const next = list.slice();
-    const [moved] = next.splice(from, 1);
-    next.splice(to, 0, moved);
-    return next;
-  };
-  const handleDrop = (e, index) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const from = draggingIndex;
-    if (from === null)
-      return;
-    const to = index;
-    if (from === to)
-      return;
-    setOrdered((prev) => reorder(prev, from, to));
-    setDraggingIndex(null);
-    setOverIndex(null);
-    isHandlePressRef.current = false;
-  };
-  const handleDragEnd = () => {
+  );
+  const handleDragStart = useRefFunction(
+    (e, index) => {
+      e.stopPropagation();
+      e.dataTransfer.effectAllowed = "move";
+      try {
+        e.dataTransfer.setData("text/plain", String(index));
+      } catch (e2) {
+        console.error(e);
+      }
+      setDraggingIndex(index);
+    }
+  );
+  const handleDragOver = useRefFunction(
+    (e, index) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      if (overIndex !== index)
+        setOverIndex(index);
+    }
+  );
+  const handleDrop = useRefFunction(
+    (e, index) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (draggingIndex === null)
+        return;
+      if (draggingIndex === index)
+        return;
+      setOrdered((prev) => reorder(prev, draggingIndex, index));
+      setDraggingIndex(null);
+      setOverIndex(null);
+      isHandlePressRef.current = false;
+    }
+  );
+  const handleDragEnd = useRefFunction(() => {
     setDraggingIndex(null);
     setOverIndex(null);
     isHandlePressRef.current = false;
-  };
-  const isHandleTarget = (target) => {
-    if (!(target instanceof HTMLElement))
-      return false;
-    const handle = target.closest(`.${basePrefixCls}-drag-handle`);
-    return !!handle;
-  };
+  });
+  const handlePointerDown = useRefFunction(
+    (e) => {
+      const el = scrollRef.current;
+      if (!el || e.button !== 0 || isInteractiveTarget(e.target))
+        return;
+      panIntentRef.current = true;
+      hasPanMovedRef.current = false;
+      panStartXRef.current = e.clientX;
+      panStartScrollLeftRef.current = el.scrollLeft;
+    }
+  );
+  const handlePointerMove = useRefFunction(
+    (e) => {
+      const el = scrollRef.current;
+      if (!el)
+        return;
+      if (!isPanningRef.current && panIntentRef.current) {
+        const dx = e.clientX - panStartXRef.current;
+        if (Math.abs(dx) > PAN_THRESHOLD) {
+          isPanningRef.current = true;
+          hasPanMovedRef.current = true;
+          try {
+            el.setPointerCapture(e.pointerId);
+          } catch (e2) {
+          }
+        }
+      }
+      if (isPanningRef.current) {
+        const dx = e.clientX - panStartXRef.current;
+        el.scrollLeft = panStartScrollLeftRef.current - dx;
+        if (e.cancelable)
+          e.preventDefault();
+        e.stopPropagation();
+      }
+    }
+  );
+  const handlePointerUp = useRefFunction(
+    (e) => {
+      const el = scrollRef.current;
+      if (!el)
+        return;
+      panIntentRef.current = false;
+      if (isPanningRef.current) {
+        isPanningRef.current = false;
+        try {
+          el.releasePointerCapture(e.pointerId);
+        } catch (e2) {
+        }
+      }
+    }
+  );
+  const handlePointerCancel = useRefFunction(() => {
+    isPanningRef.current = false;
+    panIntentRef.current = false;
+  });
+  const handleWheel = useRefFunction((e) => {
+    const el = scrollRef.current;
+    if (!el)
+      return;
+    const horizontalDelta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+    if (horizontalDelta !== 0) {
+      el.scrollLeft += horizontalDelta;
+    }
+    e.stopPropagation();
+  });
+  const handleClick = useRefFunction((e) => {
+    if (hasPanMovedRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      hasPanMovedRef.current = false;
+    }
+  });
+  const handlePopoverChange = useRefFunction((visible) => {
+    if (!props.menuDisabled) {
+      setShowOverflowPopup(visible);
+    }
+  });
+  const handleMenuMouseEnter = useRefFunction(() => {
+    if (!props.menuDisabled) {
+      setIsIndicatorHover(true);
+    }
+  });
+  const handleMenuMouseLeave = useRefFunction(() => {
+    if (!props.menuDisabled) {
+      setIsIndicatorHover(false);
+    }
+  });
+  const handlePopupWheel = useRefFunction((e) => {
+    e.stopPropagation();
+  });
+  const containerStyle = useMemo(() => __spreadValues({}, props.style), [props.style]);
+  const containerClassName = useMemo(
+    () => classNames(
+      `${basePrefixCls}-container`,
+      {
+        [`${basePrefixCls}-container-${props.size}`]: props.size,
+        [`${basePrefixCls}-container-no-hover`]: isIndicatorHover
+      },
+      hashId
+    ),
+    [basePrefixCls, props.size, isIndicatorHover, hashId]
+  );
   return wrapSSR(
     /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: containerRef,
-        style: __spreadValues({}, props.style),
-        className: classNames(
-          `${basePrefixCls}-container`,
-          {
-            [`${basePrefixCls}-container-${props.size}`]: props.size,
-            [`${basePrefixCls}-container-no-hover`]: isIndicatorHover
-          },
-          hashId
-        ),
-        onPointerDown: (e) => {
-          const el = scrollRef.current;
-          if (!el)
-            return;
-          if (e.button !== 0)
-            return;
-          if (isInteractiveTarget(e.target))
-            return;
-          panIntentRef.current = true;
-          hasPanMovedRef.current = false;
-          panStartXRef.current = e.clientX;
-          panStartScrollLeftRef.current = el.scrollLeft;
-        },
-        onPointerMove: (e) => {
-          const el = scrollRef.current;
-          if (!el)
-            return;
-          if (!isPanningRef.current && panIntentRef.current) {
-            const dx = e.clientX - panStartXRef.current;
-            if (Math.abs(dx) > 6) {
-              isPanningRef.current = true;
-              hasPanMovedRef.current = true;
-              try {
-                el.setPointerCapture(e.pointerId);
-              } catch (e2) {
-              }
-            }
-          }
-          if (isPanningRef.current) {
-            const dx = e.clientX - panStartXRef.current;
-            el.scrollLeft = panStartScrollLeftRef.current - dx;
-            if (e.cancelable)
-              e.preventDefault();
-            e.stopPropagation();
-          }
-        },
-        onPointerUp: (e) => {
-          const el = scrollRef.current;
-          if (!el)
-            return;
-          panIntentRef.current = false;
-          if (isPanningRef.current) {
-            isPanningRef.current = false;
-            try {
-              el.releasePointerCapture(e.pointerId);
-            } catch (e2) {
-            }
-          }
-        },
-        onPointerCancel: () => {
-          isPanningRef.current = false;
-          panIntentRef.current = false;
-        },
-        onWheel: (e) => {
-          const el = scrollRef.current;
-          if (!el)
-            return;
-          const horizontalDelta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
-          if (horizontalDelta !== 0) {
-            el.scrollLeft += horizontalDelta;
-          }
-          e.stopPropagation();
-        },
-        onClick: (e) => {
-          if (hasPanMovedRef.current) {
-            e.preventDefault();
-            e.stopPropagation();
-            hasPanMovedRef.current = false;
-          }
-        }
+        style: containerStyle,
+        className: containerClassName,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerCancel,
+        onWheel: handleWheel,
+        onClick: handleClick
       },
       /* @__PURE__ */ React.createElement(
         "div",
         {
           ref: scrollRef,
           className: classNames(`${basePrefixCls}-scroll`, hashId),
-          style: {
-            display: "flex",
-            alignItems: "center",
-            width: "100%",
-            gap: 8,
-            overflowX: "auto",
-            overflowY: "hidden",
-            WebkitOverflowScrolling: "touch",
-            overscrollBehavior: "contain",
-            touchAction: "pan-x"
-          }
+          style: SCROLL_STYLE
         },
         ordered.map((entry) => /* @__PURE__ */ React.createElement(React.Fragment, { key: entry.key }, entry.node))
       ),
@@ -269,11 +368,11 @@ var ActionItemContainer = (props) => {
             Popover,
             {
               open: showOverflowPopup,
-              onOpenChange: (visible) => !props.menuDisabled && setShowOverflowPopup(visible),
+              onOpenChange: handlePopoverChange,
               trigger: "click",
               placement: "topRight",
               arrow: false,
-              overlayInnerStyle: { padding: 0 },
+              overlayInnerStyle: POPOVER_OVERLAY_STYLE,
               overlayClassName: classNames(
                 `${basePrefixCls}-overflow-popover`,
                 hashId
@@ -285,60 +384,27 @@ var ActionItemContainer = (props) => {
                     `${basePrefixCls}-overflow-container-popup`,
                     hashId
                   ),
-                  onWheel: (e) => {
-                    e.stopPropagation();
-                  }
+                  onWheel: handlePopupWheel
                 },
-                ordered.length > 0 ? ordered.map((entry, index) => /* @__PURE__ */ React.createElement(
-                  "div",
+                ordered.map((entry, index) => /* @__PURE__ */ React.createElement(
+                  DraggablePopupItem,
                   {
                     key: entry.key,
-                    className: classNames(
-                      `${basePrefixCls}-overflow-container-popup-item`,
-                      hashId,
-                      {
-                        [`${basePrefixCls}-dragging`]: draggingIndex === index,
-                        [`${basePrefixCls}-drag-over`]: overIndex === index
-                      }
-                    ),
-                    draggable: true,
-                    onMouseDown: (evt) => {
-                      const isHandle = isHandleTarget(evt.target);
-                      isHandlePressRef.current = isHandle;
-                      if (isHandle) {
-                        setDraggingIndex(index);
-                      } else {
-                        setDraggingIndex(null);
-                      }
-                    },
-                    onMouseUp: () => {
-                      if (draggingIndex === null) {
-                        isHandlePressRef.current = false;
-                      }
-                    },
-                    onDragStart: (evt) => {
-                      handleDragStart(evt, index);
-                    },
-                    onDragOver: (evt) => handleDragOver(evt, index),
-                    onDrop: (evt) => handleDrop(evt, index),
-                    onDragEnd: handleDragEnd
-                  },
-                  /* @__PURE__ */ React.createElement(
-                    GripVertical,
-                    {
-                      className: classNames(
-                        `${basePrefixCls}-drag-handle`,
-                        hashId
-                      ),
-                      onMouseDown: (evt) => {
-                        isHandlePressRef.current = true;
-                        setDraggingIndex(index);
-                        evt.stopPropagation();
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ React.createElement("div", { draggable: false }, entry.node)
-                )) : null
+                    entry,
+                    index,
+                    basePrefixCls,
+                    hashId,
+                    draggingIndex,
+                    overIndex,
+                    isHandlePressRef,
+                    onDragStart: handleDragStart,
+                    onDragOver: handleDragOver,
+                    onDrop: handleDrop,
+                    onDragEnd: handleDragEnd,
+                    isHandleTarget,
+                    setDraggingIndex
+                  }
+                ))
               )
             },
             /* @__PURE__ */ React.createElement(
@@ -351,8 +417,8 @@ var ActionItemContainer = (props) => {
                     [`${basePrefixCls}-overflow-container-menu-disabled`]: props.menuDisabled
                   }
                 ),
-                onMouseEnter: () => !props.menuDisabled && setIsIndicatorHover(true),
-                onMouseLeave: () => !props.menuDisabled && setIsIndicatorHover(false)
+                onMouseEnter: handleMenuMouseEnter,
+                onMouseLeave: handleMenuMouseLeave
               },
               /* @__PURE__ */ React.createElement(Menu, null)
             )

package/dist/MarkdownInputField/FileMapView/style.js

@@ -28,6 +28,7 @@ var genStyle = (token) => {
     [`${token.componentCls}`]: {
       maxWidth: "100%",
       display: "flex",
+      minWidth: "0px",
       flexDirection: "column",
       flexWrap: "nowrap",
       overflow: "auto",