@yuntijs/ui/es/ChatItem/index.js

☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps

'use client';

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["avatarAddon", "onAvatarClick", "avatarProps", "actions", "className", "primary", "loading", "message", "placement", "variant", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "affixation", "renderMessage", "text", "errorMessage", "onDoubleClick", "fontSize", "markdownProps", "markdownClassname", "isLatest", "hideAvatar"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import Avatar from '@lobehub/ui/es/chat/ChatItem/components/Avatar';
import BorderSpacing from '@lobehub/ui/es/chat/ChatItem/components/BorderSpacing';
import ErrorContent from '@lobehub/ui/es/chat/ChatItem/components/ErrorContent';
import Title from '@lobehub/ui/es/chat/ChatItem/components/Title';
import { useResponsive } from 'antd-style';
import { memo } from 'react';
import { Flexbox } from 'react-layout-kit';
import Actions from "./components/Actions";
import MessageContent from "./components/MessageContent";
import { useStyles } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var MOBILE_AVATAR_SIZE = 32;
export var ChatItem = /*#__PURE__*/memo(function (_ref) {
  var avatarAddon = _ref.avatarAddon,
    onAvatarClick = _ref.onAvatarClick,
    avatarProps = _ref.avatarProps,
    actions = _ref.actions,
    className = _ref.className,
    primary = _ref.primary,
    loading = _ref.loading,
    message = _ref.message,
    _ref$placement = _ref.placement,
    placement = _ref$placement === void 0 ? 'left' : _ref$placement,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'bubble' : _ref$variant,
    avatar = _ref.avatar,
    error = _ref.error,
    showTitle = _ref.showTitle,
    time = _ref.time,
    editing = _ref.editing,
    onChange = _ref.onChange,
    onEditingChange = _ref.onEditingChange,
    messageExtra = _ref.messageExtra,
    affixation = _ref.affixation,
    renderMessage = _ref.renderMessage,
    text = _ref.text,
    errorMessage = _ref.errorMessage,
    onDoubleClick = _ref.onDoubleClick,
    fontSize = _ref.fontSize,
    markdownProps = _ref.markdownProps,
    markdownClassname = _ref.markdownClassname,
    isLatest = _ref.isLatest,
    hideAvatar = _ref.hideAvatar,
    rest = _objectWithoutProperties(_ref, _excluded);
  var _useResponsive = useResponsive(),
    mobile = _useResponsive.mobile;
  var _useStyles = useStyles({
      editing: editing,
      placement: placement,
      primary: primary,
      showTitle: showTitle,
      time: time,
      title: avatar.title,
      variant: variant,
      isLatest: isLatest
    }),
    cx = _useStyles.cx,
    styles = _useStyles.styles;
  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
    className: cx(styles.container, className),
    direction: placement === 'left' ? 'horizontal' : 'horizontal-reverse',
    gap: mobile ? 6 : 12
  }, rest), {}, {
    children: [hideAvatar ? null : /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, avatarProps), {}, {
      addon: avatarAddon,
      avatar: avatar,
      loading: loading,
      onClick: onAvatarClick,
      placement: placement,
      size: mobile ? MOBILE_AVATAR_SIZE : undefined
    })), /*#__PURE__*/_jsxs(Flexbox, {
      align: placement === 'left' ? 'flex-start' : 'flex-end',
      className: styles.messageContainer,
      children: [/*#__PURE__*/_jsx(Title, {
        avatar: avatar,
        placement: placement,
        showTitle: showTitle,
        time: time
      }), /*#__PURE__*/_jsxs(Flexbox, {
        align: placement === 'left' ? 'flex-start' : 'flex-end',
        className: styles.messageContent,
        direction: 'vertical',
        gap: 8,
        children: [error ? /*#__PURE__*/_jsx(ErrorContent, {
          error: error,
          message: errorMessage,
          placement: placement
        }) : /*#__PURE__*/_jsx(MessageContent, {
          editing: editing,
          fontSize: fontSize,
          markdownClassname: markdownClassname,
          markdownProps: markdownProps,
          message: message,
          messageExtra: messageExtra,
          onChange: onChange,
          onDoubleClick: onDoubleClick,
          onEditingChange: onEditingChange,
          placement: placement,
          primary: primary,
          renderMessage: renderMessage,
          text: text,
          variant: variant
        }), affixation ? /*#__PURE__*/_jsx("div", {
          className: "affixation",
          children: affixation
        }) : null, /*#__PURE__*/_jsx(Actions, {
          actions: actions,
          editing: editing,
          placement: placement,
          variant: variant
        })]
      })]
    }), mobile && variant === 'bubble' && /*#__PURE__*/_jsx(BorderSpacing, {
      borderSpacing: MOBILE_AVATAR_SIZE
    })]
  }));
});