@king-design/vue 3.7.0 → 3.8.0-beta.1

package/components/sender/sender.d.ts

@@ -0,0 +1,127 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import type { Events } from '../types';
+import type { FileCardListItem } from '../fileCard';
+import type { RequestError } from '../upload';
+export type SenderFileView = 'card' | 'media';
+export type SenderUploadButton = 'toolbar' | 'list' | 'none';
+export type SenderButtonTooltip = string | false;
+export interface SenderButtonTooltipConfig {
+    send?: SenderButtonTooltip;
+    stop?: SenderButtonTooltip;
+    upload?: SenderButtonTooltip;
+    listUpload?: SenderButtonTooltip;
+}
+export interface SenderAttachment extends FileCardListItem {
+    uid?: number | string;
+    raw?: File;
+    relativePath?: string;
+    /** 进行中的 XHR，用于删除时 abort */
+    request?: {
+        abort(): void;
+    } | null;
+}
+export interface SenderUploadProps {
+    accept?: string;
+    multiple?: boolean;
+    directory?: boolean;
+    limit?: number;
+    maxSize?: number;
+    autoUpload?: boolean;
+    action?: string;
+    timeout?: number;
+    name?: string;
+    headers?: Record<string | number, string>;
+    data?: Record<string, any> | ((file: SenderAttachment) => Record<string, any>);
+    mapAttachment?: (file: File, attachment: SenderAttachment) => Partial<SenderAttachment>;
+    withCredentials?: boolean;
+    beforeUpload?: (file: SenderAttachment, files: SenderAttachment[]) => boolean | Promise<boolean>;
+    beforeRemove?: (file: SenderAttachment, files: SenderAttachment[]) => boolean | Promise<boolean>;
+}
+export interface SendButtonSlotParams {
+    generating: boolean;
+    disabled: boolean;
+    stopDisabled: boolean;
+    loading: boolean;
+    send: () => void;
+    stopGenerate: () => void;
+}
+export interface UploadButtonSlotParams {
+    disabled: boolean;
+    reachLimit: boolean;
+    position: SenderUploadButton;
+    addFiles: (files: FileList | File[]) => void;
+    pickFiles: () => void;
+}
+export interface MessageSendPayload {
+    value: string;
+    attachments: SenderAttachment[];
+}
+export interface SenderProps {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    inputDisabled?: boolean;
+    sendDisabled?: boolean;
+    stopDisabled?: boolean;
+    readonly?: boolean;
+    generating?: boolean;
+    loading?: boolean;
+    fileView?: SenderFileView;
+    uploadButton?: SenderUploadButton;
+    buttonTooltip?: SenderButtonTooltipConfig;
+    dragFile?: boolean;
+    pasteFile?: boolean;
+    /** 整个输入外框 `k-sender` 的宽度，数字会按 `px` 处理 */
+    width?: number | string;
+    /** 整个输入外框 `k-sender-shell` 的最大高度（非文本域单宽），未传时默认 300 */
+    maxHeight?: number | string;
+    attachments?: SenderAttachment[];
+    uploadProps?: SenderUploadProps;
+    submitOnEnter?: boolean;
+    clearOnSend?: boolean;
+}
+export interface SenderEvents {
+    messageSend: [MessageSendPayload];
+    stopGenerate: [];
+    pressEnter: [KeyboardEvent];
+    focus: [FocusEvent];
+    blur: [FocusEvent];
+    attachmentClick: [SenderAttachment, MouseEvent];
+    attachmentDelete: [SenderAttachment, MouseEvent];
+    uploadProgress: [ProgressEvent, SenderAttachment];
+    uploadSuccess: [any, SenderAttachment];
+    uploadError: [Error | RequestError, SenderAttachment];
+}
+export interface SenderBlocks {
+    header: null;
+    prefix: null;
+    beforeInput: null;
+    footer: null;
+    configure: null;
+    uploadButton: UploadButtonSlotParams;
+    sendButton: SendButtonSlotParams;
+}
+export declare class Sender extends Component<SenderProps, SenderEvents, SenderBlocks> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<SenderProps>>;
+    static defaults: () => Partial<SenderProps>;
+    static events: Events<SenderEvents>;
+    private config;
+    private textareaRef;
+    private fileInputRef;
+    private input;
+    private autoResize;
+    private upload;
+    private dragController;
+    private pasteController;
+    focus(): void;
+    blur(): void;
+    /** 主动触发发送，等价于点击发送按钮。生成中时不会触发。 */
+    submit(): void;
+    /** 清空输入框与附件列表，并中止进行中的上传；不影响 generating / loading 等受控状态。 */
+    clear(): void;
+    /** 复用 Sender 内置上传逻辑添加本地文件，适合自定义附件弹窗确认后调用。 */
+    addFiles(files: FileList | File[]): void;
+    /** 主动触发停止生成，等价于点击生成中的停止按钮。 */
+    stopGenerate(): void;
+}

package/components/sender/sender.js

@@ -0,0 +1,122 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, createRef } from 'intact-vue-next';
+import template from './sender.vdt';
+import { useConfigContext } from '../config';
+import { useSenderInput } from './useSenderInput';
+import { useSenderUpload } from './useSenderUpload';
+import { useAutoResize } from './useAutoResize';
+import { useSenderDrag } from './useSenderDrag';
+import { useSenderPaste } from './useSenderPaste';
+var typeDefs = {
+  value: String,
+  placeholder: String,
+  disabled: Boolean,
+  inputDisabled: Boolean,
+  sendDisabled: Boolean,
+  stopDisabled: Boolean,
+  readonly: Boolean,
+  generating: Boolean,
+  loading: Boolean,
+  fileView: ['card', 'media'],
+  uploadButton: ['toolbar', 'list', 'none'],
+  buttonTooltip: Object,
+  dragFile: Boolean,
+  pasteFile: Boolean,
+  width: [String, Number],
+  maxHeight: [String, Number],
+  attachments: Array,
+  uploadProps: Object,
+  submitOnEnter: Boolean,
+  clearOnSend: Boolean
+};
+var defaults = function defaults() {
+  return {
+    value: '',
+    placeholder: undefined,
+    disabled: false,
+    inputDisabled: false,
+    sendDisabled: false,
+    stopDisabled: false,
+    readonly: false,
+    generating: false,
+    loading: false,
+    fileView: 'card',
+    uploadButton: 'toolbar',
+    buttonTooltip: undefined,
+    dragFile: false,
+    pasteFile: false,
+    width: 640,
+    maxHeight: undefined,
+    attachments: undefined,
+    uploadProps: undefined,
+    submitOnEnter: true,
+    clearOnSend: true
+  };
+};
+var events = {
+  messageSend: true,
+  stopGenerate: true,
+  pressEnter: true,
+  focus: true,
+  blur: true,
+  attachmentClick: true,
+  attachmentDelete: true,
+  uploadProgress: true,
+  uploadSuccess: true,
+  uploadError: true
+};
+export var Sender = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Sender, _Component);
+  function Sender() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    _this.textareaRef = createRef();
+    _this.fileInputRef = createRef();
+    _this.input = useSenderInput(_this.textareaRef);
+    _this.autoResize = useAutoResize(_this.textareaRef);
+    _this.upload = useSenderUpload(_this.fileInputRef);
+    _this.dragController = useSenderDrag(_this.upload.addFiles);
+    _this.pasteController = useSenderPaste(_this.upload.addFiles);
+    return _this;
+  }
+  var _proto = Sender.prototype;
+  _proto.focus = function focus() {
+    var _this$textareaRef$val;
+    (_this$textareaRef$val = this.textareaRef.value) == null || _this$textareaRef$val.focus();
+  };
+  _proto.blur = function blur() {
+    var _this$textareaRef$val2;
+    (_this$textareaRef$val2 = this.textareaRef.value) == null || _this$textareaRef$val2.blur();
+  }
+  /** 主动触发发送，等价于点击发送按钮。生成中时不会触发。 */;
+  _proto.submit = function submit() {
+    this.input.send();
+  }
+  /** 清空输入框与附件列表，并中止进行中的上传；不影响 generating / loading 等受控状态。 */;
+  _proto.clear = function clear() {
+    this.set('value', '');
+    var attachments = this.get('attachments');
+    if (attachments && attachments.length > 0) {
+      void this.upload.clearAttachments();
+    }
+  }
+  /** 复用 Sender 内置上传逻辑添加本地文件，适合自定义附件弹窗确认后调用。 */;
+  _proto.addFiles = function addFiles(files) {
+    void this.upload.addFiles(files);
+  }
+  /** 主动触发停止生成，等价于点击生成中的停止按钮。 */;
+  _proto.stopGenerate = function stopGenerate() {
+    this.input.stopGenerate();
+  };
+  return Sender;
+}(Component);
+Sender.template = template;
+Sender.typeDefs = typeDefs;
+Sender.defaults = defaults;
+Sender.events = events;

package/components/sender/sender.vdt.js

@@ -0,0 +1,302 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { createUnknownComponentVNode as _$cc, className as _$cn, createElementVNode as _$ce, createVNode as _$cv, extend as _$ex, EMPTY_OBJ as _$em, noop as _$no, createCommentVNode as _$ccv } from 'intact-vue-next';
+import { FileCardList } from '../fileCard';
+import { Icon } from '../icon';
+import { Tooltip } from '../tooltip';
+import { addStyle, getRestProps } from '../utils';
+import { makeStyles } from './styles';
+import { senderSendIcon, senderStopIcon, senderAttachSvg } from './icons';
+import { _$ } from '../../i18n';
+import { isInvalid, isNumber, noop } from 'intact-shared';
+var _$tmp0 = {
+  'aria-hidden': 'true'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _this = this,
+    _classNameObj,
+    _$cn2,
+    _$cn3,
+    _$cn4;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+  var _this$input = this.input,
+    isFocus = _this$input.isFocus,
+    isDisabled = _this$input.isDisabled,
+    isInputDisabled = _this$input.isInputDisabled,
+    isGenerating = _this$input.isGenerating,
+    isLoading = _this$input.isLoading,
+    isSendButtonDisabled = _this$input.isSendButtonDisabled,
+    isStopButtonDisabled = _this$input.isStopButtonDisabled,
+    handleKeydown = _this$input.handleKeydown,
+    handleInput = _this$input.handleInput,
+    handleFocus = _this$input.handleFocus,
+    handleBlur = _this$input.handleBlur,
+    handleSendClick = _this$input.handleSendClick,
+    send = _this$input.send,
+    stopGenerate = _this$input.stopGenerate;
+  var _this$upload = this.upload,
+    getAcceptAttr = _this$upload.getAcceptAttr,
+    isMultiple = _this$upload.isMultiple,
+    addFiles = _this$upload.addFiles,
+    onInputChange = _this$upload.onInputChange,
+    pickFiles = _this$upload.pickFiles,
+    removeAttachment = _this$upload.removeAttachment;
+  var dragController = this.dragController;
+  var handlePaste = this.pasteController.handlePaste;
+  var _this$get = this.get(),
+    className = _this$get.className,
+    style = _this$get.style,
+    value = _this$get.value,
+    placeholder = _this$get.placeholder,
+    readonly = _this$get.readonly,
+    width = _this$get.width,
+    maxHeight = _this$get.maxHeight,
+    fileView = _this$get.fileView,
+    uploadButton = _this$get.uploadButton,
+    enableDragFile = _this$get.dragFile,
+    attachments = _this$get.attachments,
+    uploadProps = _this$get.uploadProps,
+    buttonTooltip = _this$get.buttonTooltip;
+  var k = this.config.k;
+  var isEmptySlot = function isEmptySlot(value) {
+    if (isInvalid(value) || value === undefined || value === null || value === '') return true;
+    if (Array.isArray(value)) return value.every(function (item) {
+      return isEmptySlot(item);
+    });
+    if (value && value.type === 1) return isEmptySlot(value.children);
+    return false;
+  };
+  var renderSlot = function renderSlot(name, params) {
+    return $blocks[name] ? $blocks[name](noop, params) : undefined;
+  };
+  var headerSlot = renderSlot('header');
+  var footerSlot = renderSlot('footer');
+  var prefixSlot = renderSlot('prefix');
+  var beforeInputSlot = renderSlot('beforeInput');
+  var configureSlot = renderSlot('configure');
+  var hasHeaderSlot = !isEmptySlot(headerSlot);
+  var hasFooterSlot = !isEmptySlot(footerSlot);
+  var hasPrefixSlot = !isEmptySlot(prefixSlot);
+  var hasBeforeInputSlot = !isEmptySlot(beforeInputSlot);
+  var hasConfigureSlot = !isEmptySlot(configureSlot);
+  var disabled = isDisabled();
+  var inputDisabled = isInputDisabled();
+  var generating = isGenerating();
+  var loading = isLoading();
+  var sendButtonDisabled = isSendButtonDisabled();
+  var stopButtonDisabled = isStopButtonDisabled();
+  var list = attachments || [];
+  var hasAttachments = list.length > 0;
+  var limit = uploadProps && uploadProps.limit;
+  var reachLimit = limit !== undefined && limit !== null && list.length >= Number(limit);
+  var isMediaView = fileView === 'media';
+  var isDirectory = !!(uploadProps && uploadProps.directory);
+  var showToolbarUploadButton = uploadButton === 'toolbar';
+  var showListUploadButton = uploadButton === 'list';
+  var getMediaItemType = function getMediaItemType(type) {
+    var _context;
+    var value = _trimInstanceProperty(_context = (type || '').toLowerCase()).call(_context);
+    if (value === 'image' || value === 'video' || value === 'audio' || _startsWithInstanceProperty(value).call(value, 'image/') || _startsWithInstanceProperty(value).call(value, 'video/') || _startsWithInstanceProperty(value).call(value, 'audio/')) {
+      return type;
+    }
+    return undefined;
+  };
+
+  // card 视图下，所有附件统一按「文件卡」呈现，避免引入额外的文件夹展示语义。
+  // media 视图下保留明确媒体类型，但忽略 application/octet-stream 等泛 MIME，继续交给 FileCard 基于 name/src 识别。
+  var renderItems = isMediaView ? _mapInstanceProperty(list).call(list, function (it) {
+    return _extends({}, it, {
+      type: getMediaItemType(it.type)
+    });
+  }) : _mapInstanceProperty(list).call(list, function (it) {
+    return _extends({}, it, {
+      type: 'file'
+    });
+  });
+
+  // 列表入口即便没有附件也要展示 FileCardList，用来承载前置上传按钮。
+  var showAttachmentsArea = showListUploadButton || hasAttachments;
+  var onAttachmentClick = function onAttachmentClick(item, e) {
+    _this.trigger('attachmentClick', item, e);
+  };
+  var onAttachmentDelete = function onAttachmentDelete(item, e) {
+    _this.trigger('attachmentDelete', item, e);
+    removeAttachment(item);
+  };
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-sender"] = true, _classNameObj[k + "-sender-file-view-" + fileView] = true, _classNameObj[k + "-sender-disabled"] = disabled, _classNameObj[k + "-sender-input-disabled"] = inputDisabled, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
+
+  // 整个输入外框 k-sender 的宽度
+  if (width != null) {
+    style = addStyle(style, {
+      width: isNumber(width) ? width + "px" : width
+    });
+  }
+
+  // 整个输入外框 k-sender-shell 的最大高度（与 props maxHeight 一致）；未传时走 styles 中默认 300
+  var shellStyle = maxHeight != null ? {
+    maxHeight: isNumber(maxHeight) ? maxHeight + "px" : maxHeight
+  } : undefined;
+  var placeholderText = placeholder != null ? placeholder : _$('输入对话内容（Enter发送， Shift + Enter 换行）');
+  var getButtonTooltip = function getButtonTooltip(name) {
+    var value = buttonTooltip && buttonTooltip[name];
+    return value;
+  };
+  var renderButtonWithTooltip = function renderButtonWithTooltip(button, content, className) {
+    return _$cc(Tooltip, {
+      'content': content,
+      'className': _$cn(className),
+      'children': button
+    });
+  };
+  var sendButtonText = _$('发送');
+  var stopButtonText = _$('停止生成');
+  var uploadButtonText = isDirectory ? _$('上传文件夹') : _$('上传附件');
+  var listUploadButtonText = _$('参考内容');
+  var currentSendButtonTooltip = getButtonTooltip(generating ? 'stop' : 'send');
+  var currentSendButtonAriaLabel = generating ? stopButtonText : sendButtonText;
+  var currentUploadButtonTooltip = getButtonTooltip('upload');
+  var currentListUploadButtonTooltip = getButtonTooltip('listUpload');
+  var sendButtonTitle = currentSendButtonTooltip === undefined ? currentSendButtonAriaLabel : undefined;
+  var uploadButtonTitle = currentUploadButtonTooltip === undefined ? uploadButtonText : undefined;
+  var listUploadButtonTitle = currentListUploadButtonTooltip === undefined ? listUploadButtonText : undefined;
+  var defaultSendButtonInner = _$ce(2, 'button', _$ce(2, 'img', null, 1, _$cn(k + "-sender-send-icon"), {
+    'src': generating ? senderStopIcon : senderSendIcon,
+    'alt': '',
+    'draggable': false
+  }), 2, _$cn(k + "-sender-send-btn"), {
+    'type': 'button',
+    'disabled': generating ? stopButtonDisabled : sendButtonDisabled,
+    'ev-click': handleSendClick,
+    'title': sendButtonTitle,
+    'aria-label': currentSendButtonAriaLabel
+  });
+  var defaultSendButton = typeof currentSendButtonTooltip === 'string' ? renderButtonWithTooltip(defaultSendButtonInner, currentSendButtonTooltip, k + "-sender-send-tooltip") : defaultSendButtonInner;
+  var defaultAttachButtonInner = _$ce(2, 'button', null, 1, _$cn(k + "-sender-attach-btn"), {
+    'type': 'button',
+    'disabled': inputDisabled || reachLimit,
+    'ev-click': pickFiles,
+    'title': uploadButtonTitle,
+    'aria-label': uploadButtonText,
+    'innerHTML': senderAttachSvg
+  });
+  var defaultAttachButton = typeof currentUploadButtonTooltip === 'string' ? renderButtonWithTooltip(defaultAttachButtonInner, currentUploadButtonTooltip, k + "-sender-upload-tooltip") : defaultAttachButtonInner;
+  var getUploadButtonSlotParams = function getUploadButtonSlotParams(position) {
+    return {
+      disabled: inputDisabled,
+      reachLimit: reachLimit,
+      position: position,
+      addFiles: addFiles,
+      pickFiles: pickFiles
+    };
+  };
+  var renderUploadButtonSlot = function renderUploadButtonSlot(position) {
+    var slot = renderSlot('uploadButton', getUploadButtonSlotParams(position));
+    return isEmptySlot(slot) ? undefined : slot;
+  };
+
+  // 附件列表末尾的虚线 + 框
+  var listUploadButtonInner = _$ce(2, 'div', [_$cc(Icon, {
+    'className': _$cn(k + "-icon-add-bold")
+  }), _$ce(2, 'div', listUploadButtonText, 0, _$cn(k + "-sender-list-upload-text"))], 4, _$cn((_$cn2 = {}, _$cn2[k + "-sender-list-upload"] = true, _$cn2[k + "-sender-list-upload-disabled"] = inputDisabled, _$cn2)), {
+    'ev-click': inputDisabled ? undefined : pickFiles,
+    'role': 'button',
+    'title': listUploadButtonTitle,
+    'aria-label': listUploadButtonText
+  });
+  var listUploadButton = typeof currentListUploadButtonTooltip === 'string' ? renderButtonWithTooltip(listUploadButtonInner, currentListUploadButtonTooltip, k + "-sender-list-upload-tooltip") : listUploadButtonInner;
+  var toolbarUploadButtonSlot = showToolbarUploadButton ? renderUploadButtonSlot('toolbar') : undefined;
+  var listUploadButtonSlot = showListUploadButton ? renderUploadButtonSlot('list') : undefined;
+  var showDefaultToolbarUploadButton = showToolbarUploadButton && !toolbarUploadButtonSlot;
+  var showToolbarLeft = showToolbarUploadButton;
+  var sendButtonSlotParams = {
+    generating: generating,
+    disabled: sendButtonDisabled,
+    stopDisabled: stopButtonDisabled,
+    loading: loading,
+    send: send,
+    stopGenerate: stopGenerate
+  };
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
+    'style': style
+  }), [hasHeaderSlot ? _$ce(2, 'div', headerSlot, 0, _$cn(k + "-sender-header")) : undefined, _$ce(2, 'div', [showAttachmentsArea ? _$ce(2, 'div', isMediaView ? _$cc(FileCardList, {
+    'items': renderItems,
+    'deleteable': true,
+    'overflow': 'scrollY',
+    'showNameTooltip': true,
+    'ev-click': onAttachmentClick,
+    'ev-delete': onAttachmentDelete,
+    '$blocks': function ($blocks) {
+      var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+      return (_$blocks['prefix'] = function ($super) {
+        return showListUploadButton && !reachLimit ? listUploadButtonSlot || listUploadButton : undefined;
+      }, __$blocks['prefix'] = function ($super, data) {
+        var block = $blocks['prefix'];
+        var callBlock = function callBlock() {
+          return _$blocks['prefix'].call($this, $super, data);
+        };
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }), __$blocks;
+    }.call($this, _$em)
+  }) : _$cc(FileCardList, {
+    'items': renderItems,
+    'deleteable': true,
+    'overflow': 'scrollY',
+    'showNameTooltip': true,
+    'ev-click': onAttachmentClick,
+    'ev-delete': onAttachmentDelete,
+    '$blocks': function ($blocks) {
+      var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+      return (_$blocks['prefix'] = function ($super) {
+        return showListUploadButton && !reachLimit ? listUploadButtonSlot || listUploadButton : undefined;
+      }, __$blocks['prefix'] = function ($super, data) {
+        var block = $blocks['prefix'];
+        var callBlock = function callBlock() {
+          return _$blocks['prefix'].call($this, $super, data);
+        };
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }), __$blocks;
+    }.call($this, _$em)
+  }), 2, _$cn((_$cn3 = {}, _$cn3[k + "-sender-attachments"] = true, _$cn3[k + "-sender-attachments-" + fileView] = true, _$cn3))) : undefined, hasBeforeInputSlot ? _$ce(2, 'div', beforeInputSlot, 0, _$cn(k + "-sender-before-input")) : undefined, _$ce(2, 'div', [hasPrefixSlot ? _$ce(2, 'div', prefixSlot, 0, _$cn(k + "-sender-prefix")) : undefined, _$ce(256, 'textarea', null, 1, _$cn(k + "-sender-input"), {
+    'rows': 1,
+    'value': value,
+    'placeholder': placeholderText,
+    'disabled': inputDisabled,
+    'readOnly': readonly,
+    'ev-input': handleInput,
+    'ev-keydown': handleKeydown,
+    'ev-paste': handlePaste,
+    'ev-focus': handleFocus,
+    'ev-blur': handleBlur
+  }, null, this.textareaRef)], 0, _$cn(k + "-sender-input-area")), _$ce(2, 'div', [showToolbarLeft ? _$ce(2, 'div', toolbarUploadButtonSlot ? toolbarUploadButtonSlot : showDefaultToolbarUploadButton ? defaultAttachButton : undefined, 0, _$cn(k + "-sender-toolbar-left")) : undefined, hasConfigureSlot ? _$ce(2, 'div', configureSlot, 0, _$cn(k + "-sender-toolbar-middle")) : undefined, _$ce(2, 'div', $blocks.sendButton ? (_$blocks['sendButton'] = function ($super) {
+    return null;
+  }, __$blocks['sendButton'] = function ($super, data) {
+    var block = $blocks['sendButton'];
+    var callBlock = function callBlock() {
+      return _$blocks['sendButton'].call($this, $super, data);
+    };
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['sendButton'](_$no, sendButtonSlotParams)) : defaultSendButton, 0, _$cn(k + "-sender-toolbar-right"))], 0, _$cn(k + "-sender-toolbar")), _$ccv(' 放末尾，避免挡住 attachments + input-area 等相邻选择器，且 absolute 不影响布局 '), _$ce(64, 'input', null, 1, _$cn(k + "-sender-file-input"), {
+    'type': 'file',
+    'accept': getAcceptAttr(),
+    'multiple': isMultiple(),
+    'directory': isDirectory ? '' : undefined,
+    'webkitdirectory': isDirectory ? '' : undefined,
+    'ev-change': onInputChange
+  }, null, this.fileInputRef)], 0, _$cn((_$cn4 = {}, _$cn4[k + "-sender-shell"] = true, _$cn4[k + "-sender-active"] = isFocus.value && !inputDisabled, _$cn4)), {
+    'style': shellStyle
+  }), hasFooterSlot ? _$ce(2, 'div', footerSlot, 0, _$cn(k + "-sender-footer")) : undefined, enableDragFile && dragController.dragOver.value ? _$ce(2, 'div', _$ce(2, 'div', [_$cc(Icon, {
+    'className': _$cn(k + "-icon-upload"),
+    'size': 'large'
+  }), _$ce(2, 'div', _$('文件拖动到此处即可上传'), 0, _$cn(k + "-sender-drag-text"))], 4, _$cn(k + "-sender-drag-card")), 2, _$cn(k + "-sender-drag-mask"), _$tmp0) : undefined]);
+}
+;

package/components/sender/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/sender/styles.js

@@ -0,0 +1,65 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+// 用于复用的渐变色：默认态半透明，hover/active 实色，与设计稿一致。
+var SENDER_GRADIENT_DEFAULT = 'linear-gradient(101.07deg, rgba(0, 221, 221, 0.5) -7.07%, rgba(83, 112, 255, 0.5) 48.92%, rgba(113, 47, 255, 0.5) 104.92%)';
+var SENDER_GRADIENT_ACTIVE = 'linear-gradient(101.07deg, #00DDDD -7.07%, #5370FF 48.92%, #712FFF 104.92%)';
+var defaults = {
+  radius: '12px',
+  // 输入框外框（k-sender-shell）统一 12，区块间距在下方用 margin 控制
+  padding: '12px',
+  // 与 useAutoResize 中 SHELL_MAX_FALLBACK 一致
+  shellMaxH: '300px',
+  gapHeaderToShell: '4px',
+  gapShellToFooter: '4px',
+  // 区块间距：附件↔上插槽 8；附件/上插槽↔文字区 16；文字区↔工具条 8
+  gapAttachToTop: '8px',
+  gapTopToInput: '16px',
+  gapInputToToolbar: '8px',
+  bg: '#FFFFFF',
+  color: theme.color.text,
+  placeholderColor: theme.color.placeholder,
+  disabledBg: theme.color.bg,
+  disabledColor: theme.color.disabled,
+  fontSize: theme.fontSize,
+  lineHeight: 1.5,
+  prefixGap: '8px',
+  prefixColor: '#868A9C',
+  gradientDefault: SENDER_GRADIENT_DEFAULT,
+  gradientActive: SENDER_GRADIENT_ACTIVE,
+  activeBackdropFilter: 'blur(4px)',
+  activeShadow: ['0px 4px 6px -4px rgba(0, 0, 0, 0.102)', '3px -3px 16px -5px rgba(113, 47, 255, 0.102)', '-3px 3px 14px -4px rgba(83, 112, 255, 0.102)'].join(', '),
+  sendButtonSize: '32px',
+  attachButtonSize: '16px',
+  attachIconColor: '#868A9C',
+  get attachIconHoverColor() {
+    return theme.color.primary;
+  },
+  // 附件列表末尾上传入口，尺寸和 FileCard media default 对齐
+  listUploadSize: '64px',
+  listUploadRadius: '6px',
+  listUploadBg: '#FFFFFF',
+  listUploadBorder: '1px dashed #E5E8EE',
+  listUploadColor: '#868A9C',
+  listUploadIconSize: '16px',
+  listUploadTextFontSize: '12px',
+  listUploadIconToTextGap: '8px',
+  dragMaskBg: 'rgba(255, 255, 255, 0.72)',
+  dragCardColor: '#5370FF',
+  dragCardTextColor: theme.color.text,
+  // 与 FileCardList 一致的滚动条样式
+  scrollbarThumb: 'rgba(63, 68, 81, 0.26)',
+  scrollbarThumbHover: 'rgba(63, 68, 81, 0.42)'
+};
+var sender;
+setDefault(function () {
+  sender = deepDefaults(theme, {
+    sender: defaults
+  }).sender;
+  makeStyles == null || makeStyles.clearCache();
+});
+export var makeStyles = cache(function makeStyles(k) {
+  return /*#__PURE__*/css("position:relative;display:flex;flex-direction:column;box-sizing:border-box;.", k, "-sender-header,.", k, "-sender-footer{box-sizing:border-box;flex:0 0 auto;}.", k, "-sender-header{margin-bottom:", sender.gapHeaderToShell, ";}.", k, "-sender-footer{margin-top:", sender.gapShellToFooter, ";}.", k, "-sender-shell{position:relative;display:flex;flex-direction:column;box-sizing:border-box;max-height:", sender.shellMaxH, ";padding:", sender.padding, ";background:", sender.bg, ";border-radius:", sender.radius, ";transition:background ", theme.transition.middle, ",box-shadow ", theme.transition.middle, ";min-width:0;overflow:hidden;}.", k, "-sender-shell::before{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:", sender.gradientDefault, ";-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;transition:background ", theme.transition.middle, ",opacity ", theme.transition.middle, ";}&:not(.", k, "-sender-disabled) .", k, "-sender-shell:hover::before,.", k, "-sender-shell.", k, "-sender-active::before{background:", sender.gradientActive, ";}.", k, "-sender-shell.", k, "-sender-active{backdrop-filter:", sender.activeBackdropFilter, ";-webkit-backdrop-filter:", sender.activeBackdropFilter, ";box-shadow:", sender.activeShadow, ";}&.", k, "-sender-disabled .", k, "-sender-shell::before{opacity:0.5;}&.", k, "-sender-disabled .", k, "-sender-shell{background:", sender.disabledBg, ";}&.", k, "-sender-input-disabled .", k, "-sender-shell{background:", sender.disabledBg, ";}.", k, "-sender-attachments{padding:0;box-sizing:border-box;min-width:0;flex:0 0 auto;}.", k, "-sender-attachments-media .", k, "-file-card-list{min-width:0;}.", k, "-sender-before-input{margin-bottom:", sender.gapTopToInput, ";padding:0;box-sizing:border-box;flex:0 0 auto;}.", k, "-sender-attachments+.", k, "-sender-before-input{margin-top:", sender.gapAttachToTop, ";}.", k, "-sender-attachments+.", k, "-sender-input-area{margin-top:", sender.gapTopToInput, ";}.", k, "-sender-input-area{position:relative;display:flex;align-items:flex-start;flex:0 0 auto;min-height:0;margin-bottom:", sender.gapInputToToolbar, ";padding:0;box-sizing:border-box;}.", k, "-sender-prefix{display:inline-flex;align-items:center;flex:0 0 auto;min-height:calc(", sender.fontSize, " * ", sender.lineHeight, ");margin-right:", sender.prefixGap, ";color:", sender.prefixColor, ";line-height:", sender.lineHeight, ";}.", k, "-sender-input{flex:1 1 auto;width:0;min-width:0;min-height:0;border:none;outline:none;resize:none;background:transparent;color:", sender.color, ";font-family:inherit;font-size:", sender.fontSize, ";line-height:", sender.lineHeight, ";padding:0;scrollbar-width:thin;scrollbar-color:transparent transparent;}.", k, "-sender-input::-webkit-scrollbar{width:8px;}.", k, "-sender-input::-webkit-scrollbar-track{background:transparent;}.", k, "-sender-input::-webkit-scrollbar-thumb{border-radius:999px;border:2px solid transparent;background:transparent;background-clip:content-box;}.", k, "-sender-input:hover{scrollbar-color:", sender.scrollbarThumb, " transparent;}.", k, "-sender-input:hover::-webkit-scrollbar-thumb{background:", sender.scrollbarThumb, ";background-clip:content-box;}.", k, "-sender-input:hover::-webkit-scrollbar-thumb:hover{background:", sender.scrollbarThumbHover, ";background-clip:content-box;}.", k, "-sender-input::placeholder{color:", sender.placeholderColor, ";}&.", k, "-sender-disabled .", k, "-sender-input,&.", k, "-sender-input-disabled .", k, "-sender-input{color:", sender.disabledColor, ";cursor:not-allowed;}.", k, "-sender-toolbar{display:flex;gap:8px;padding:0;box-sizing:border-box;flex:0 0 auto;}.", k, "-sender-toolbar-left{display:flex;align-items:center;gap:8px;margin-top:8px;flex:0 0 auto;}.", k, "-sender-toolbar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;}.", k, "-sender-toolbar-middle{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end;gap:8px;}.", k, "-sender-attach-btn{display:inline-flex;align-items:center;justify-content:center;width:", sender.attachButtonSize, ";height:", sender.attachButtonSize, ";border-radius:50%;background:transparent;border:none;padding:0;cursor:pointer;color:", sender.attachIconColor, ";transition:color ", theme.transition.small, ",background ", theme.transition.small, ";}.", k, "-sender-attach-btn:hover{color:", sender.attachIconHoverColor, ";}.", k, "-sender-attach-btn:disabled,&.", k, "-sender-disabled .", k, "-sender-attach-btn,&.", k, "-sender-input-disabled .", k, "-sender-attach-btn{color:", theme.color.disabled, ";cursor:not-allowed;background:transparent;}.", k, "-sender-attach-btn svg{display:block;}.", k, "-sender-send-btn{display:inline-flex;align-items:center;justify-content:center;width:", sender.sendButtonSize, ";height:", sender.sendButtonSize, ";background:transparent;border:none;padding:0;cursor:pointer;transition:filter ", theme.transition.small, ";}.", k, "-sender-send-btn:disabled{cursor:not-allowed;filter:opacity(0.5);}.", k, "-sender-send-btn:not(:disabled):hover{filter:opacity(0.85);}.", k, "-sender-send-icon{display:block;width:32px;height:32px;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(83, 112, 255, 0.32));}.", k, "-sender-list-upload{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:", sender.listUploadIconToTextGap, ";width:", sender.listUploadSize, ";height:", sender.listUploadSize, ";box-sizing:border-box;flex:0 0 auto;padding:0;border-radius:", sender.listUploadRadius, ";border:", sender.listUploadBorder, ";background:", sender.listUploadBg, ";color:", sender.listUploadColor, ";cursor:pointer;transition:border-color ", theme.transition.small, ",color ", theme.transition.small, ";}.", k, "-sender-list-upload .", k, "-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:", sender.listUploadIconSize, ";height:", sender.listUploadIconSize, ";color:inherit;font-size:", sender.listUploadIconSize, ";line-height:1;transition:color ", theme.transition.small, ";}.", k, "-sender-list-upload-text{flex:0 0 auto;font-size:", sender.listUploadTextFontSize, ";line-height:1;color:inherit;transition:color ", theme.transition.small, ";}.", k, "-sender-list-upload:hover{border-color:", theme.color.primary, ";color:", theme.color.primary, ";}.", k, "-sender-list-upload:hover .", k, "-icon,.", k, "-sender-list-upload:hover .", k, "-sender-list-upload-text{color:inherit;}.", k, "-sender-list-upload-disabled,.", k, "-sender-list-upload-disabled:hover{cursor:not-allowed;border:", sender.listUploadBorder, ";color:", theme.color.disabled, ";}.", k, "-sender-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;top:-9999px;left:-9999px;}.", k, "-sender-drag-mask{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:", sender.dragMaskBg, ";backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}.", k, "-sender-drag-card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:", sender.dragCardColor, ";}.", k, "-sender-drag-card .", k, "-icon{color:", sender.dragCardColor, ";font-size:32px;line-height:1;}.", k, "-sender-drag-text{color:", sender.dragCardTextColor, ";font-size:14px;font-weight:500;line-height:20px;}");
+});

package/components/sender/useAutoResize.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from 'intact-vue-next';
+export declare function useAutoResize(textareaRef: RefObject<HTMLTextAreaElement>): {
+    adjust: () => void;
+};