one-design-next 0.0.12 → 0.0.13

package/dist/mention/style/index.css

@@ -0,0 +1,58 @@
+[data-odn-mention] {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  word-break: keep-all;
+  overflow-wrap: normal;
+  margin: 0;
+  padding: 0 4px;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--odn-color-cyan-6, var(--odn-color-cyan-5));
+  font-weight: 500;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: default;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: background-color 0.15s;
+}
+[data-odn-mention][data-state=active], [data-odn-mention]:hover {
+  background: color-mix(in srgb, var(--odn-color-cyan-5) 12%, transparent);
+}
+[data-odn-mention][data-clickable] {
+  cursor: pointer;
+}
+
+[data-odn-mention-at] {
+  opacity: 0.7;
+}
+
+[data-odn-mention-popover-inner] {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+[data-odn-mention-popover-title] {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  font-weight: 500;
+  color: var(--odn-color-cyan-6, var(--odn-color-cyan-5));
+}
+
+[data-odn-mention-popover-at] {
+  opacity: 0.7;
+}
+
+[data-odn-mention-popover-summary] {
+  display: inline-block;
+  align-self: flex-start;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--odn-color-cyan-5) 10%, transparent);
+  color: var(--odn-color-cyan-6, var(--odn-color-cyan-5));
+  font-size: 12px;
+  line-height: 1.4;
+}

package/dist/mention/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/mention/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/message-image/index.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import './style';
+/**
+ * MessageImage 渲染的图片项。
+ * 与 `Attachment` 不同：图片消息的「主体」就是图本身，不需要 name / type / size 等
+ * 文件元信息——展示文件名只会变成 `/qidian/im/image/3c87...` 这种对用户无意义的服务端路径。
+ */
+export interface MessageImageItem {
+    url: string;
+    alt?: string;
+}
+export interface MessageImageProps {
+    /** 待渲染的图片列表。 */
+    images: MessageImageItem[];
+    /**
+     * 点击图片回调，传入图片 index。组件不内置大图查看器，业务方按需对接
+     * `PreviewPanel` / 自己实现的 lightbox。
+     */
+    onPreview?: (index: number) => void;
+    /**
+     * 删除按钮点击回调，传入图片 index。本期 MessageImage 主要承载消息态展示，
+     * 该回调主要为未来扩展（如撤回未发送消息中的图）保留。
+     */
+    onRemove?: (index: number) => void;
+}
+/**
+ * 用户消息中的图片附件渲染组件——`Image` leaf 之上的「消息态」语义包装。
+ *
+ * 两态：
+ *  - 单图：数据驱动尺寸，max 280×360 contain，保留原图长宽比
+ *  - 多图：模板驱动尺寸，每张 88×88 cover，横向 flex + wrap
+ *    与单图差异化是为了多图场景下「整齐成组」比「逐张完整」更重要——
+ *    业界共识（微信 / iMessage / Telegram 多图均为统一缩略 + 点开看大图）
+ *
+ * Composer 待发送态等其他场景**不应消费此组件**——那是输入态语义，
+ * 应直接用 `Image` leaf + 自己的尺寸 wrap。
+ */
+export declare function MessageImage({ images, onPreview, onRemove }: MessageImageProps): import("react").JSX.Element | null;
+export declare namespace MessageImage {
+    var displayName: string;
+}
+export default MessageImage;

package/dist/message-image/index.js

@@ -0,0 +1,46 @@
+import Image from "../image";
+import "./style";
+
+/**
+ * MessageImage 渲染的图片项。
+ * 与 `Attachment` 不同：图片消息的「主体」就是图本身，不需要 name / type / size 等
+ * 文件元信息——展示文件名只会变成 `/qidian/im/image/3c87...` 这种对用户无意义的服务端路径。
+ */
+
+/**
+ * 用户消息中的图片附件渲染组件——`Image` leaf 之上的「消息态」语义包装。
+ *
+ * 两态：
+ *  - 单图：数据驱动尺寸，max 280×360 contain，保留原图长宽比
+ *  - 多图：模板驱动尺寸，每张 88×88 cover，横向 flex + wrap
+ *    与单图差异化是为了多图场景下「整齐成组」比「逐张完整」更重要——
+ *    业界共识（微信 / iMessage / Telegram 多图均为统一缩略 + 点开看大图）
+ *
+ * Composer 待发送态等其他场景**不应消费此组件**——那是输入态语义，
+ * 应直接用 `Image` leaf + 自己的尺寸 wrap。
+ */
+export function MessageImage(_ref) {
+  var images = _ref.images,
+    onPreview = _ref.onPreview,
+    onRemove = _ref.onRemove;
+  if (images.length === 0) return null;
+  var isMulti = images.length > 1;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-message-image": true,
+    "data-odn-message-image-multi": isMulti || undefined
+  }, images.map(function (img, i) {
+    return /*#__PURE__*/React.createElement(Image, {
+      key: i,
+      url: img.url,
+      alt: img.alt,
+      onPreview: onPreview ? function () {
+        return onPreview(i);
+      } : undefined,
+      onRemove: onRemove ? function () {
+        return onRemove(i);
+      } : undefined
+    });
+  }));
+}
+MessageImage.displayName = 'MessageImage';
+export default MessageImage;

package/dist/message-image/style/index.css

@@ -0,0 +1,60 @@
+@charset "UTF-8";
+/* MessageImage 尺寸 token（业务方按需 cascade 覆盖）：
+ *
+ *  单图态（数据驱动尺寸）：
+ *    --odn-message-image-max-width 280：drawer 模式下 UserBubble inner 可用
+ *      宽 384px（chat area 560 - px-6×2），280 留 104px 余量；fullscreen
+ *      模式 UserBubble inner 576px 完全富余
+ *    --odn-message-image-max-height 360：长边 × 1.286（≈ 黄金比 1.272），
+ *      竖图 9:16 → 203×360、3:4 → 270×360、2:3 → 240×360 都保留竖向张力；
+ *      与 iMessage(260×360) / Claude(300×400) 中段对齐
+ *
+ *  多图态（模板驱动尺寸）：
+ *    --odn-message-image-thumb-size 88：3 张时正好填满 280 包围盒（88×3 +
+ *      gap 4×2 = 272，留 8 余量），4+ 张自然换行；与 iMessage / Telegram
+ *      多图缩略 80–100 区间一致
+ *    --odn-message-image-thumb-gap 4：图与图之间最小可识别留白
+ *
+ *  以上都是 8 的整数倍，不破坏栅格。 */
+html {
+  --odn-message-image-max-width: 280px;
+  --odn-message-image-max-height: 360px;
+  --odn-message-image-thumb-size: 88px;
+  --odn-message-image-thumb-gap: 4px;
+}
+
+/* MessageImage = Image leaf 之上的「消息态」语义包装。
+ *  - 单图：数据驱动尺寸（max 280×360 contain），保留原图比例
+ *  - 多图：模板驱动尺寸（88×88 cover，flex wrap），整齐成组
+ *  - 圆角 scoped 到 MessageImage 内的 Image leaf 容器，不影响其他场景下的
+ *    Image leaf（Composer 缩略由 Composer 自己加圆角） */
+[data-odn-message-image] {
+  display: inline-block;
+  max-width: min(100%, var(--odn-message-image-max-width));
+}
+[data-odn-message-image] [data-odn-image] {
+  display: block;
+  border-radius: 8px;
+  overflow: hidden;
+}
+[data-odn-message-image] img {
+  max-width: 100%;
+  max-height: var(--odn-message-image-max-height);
+  object-fit: contain;
+}
+
+[data-odn-message-image][data-odn-message-image-multi] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--odn-message-image-thumb-gap);
+}
+[data-odn-message-image][data-odn-message-image-multi] [data-odn-image] {
+  width: var(--odn-message-image-thumb-size);
+  height: var(--odn-message-image-thumb-size);
+}
+[data-odn-message-image][data-odn-message-image-multi] img {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  object-fit: cover;
+}

package/dist/message-image/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/message-image/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/user-bubble/index.d.ts

@@ -1,11 +1,21 @@
 /// <reference types="react" />
+import { type MessageImageItem } from '../message-image';
 import type { Attachment, ChatMessage } from '../_genui-types';
 import './style';
 export interface UserBubbleProps {
     message: ChatMessage;
     onFileClick?: (attachment: Attachment) => void;
+    /**
+     * 点击图片附件回调，业务方按此对接自己的 lightbox / 大图查看器。
+     * @param index 被点击的图片在「当前消息内已分流的图片子集」中的位置（0-based）
+     * @param images 当前消息内所有 image attachments（已转成 `MessageImageItem`
+     *               的形态，包含 `url` 与 `alt`），方便直接 push 到 lightbox
+     *               实现上下张切换
+     * 不传 → 图片不可点击预览。
+     */
+    onImagePreview?: (index: number, images: MessageImageItem[]) => void;
 }
-export declare function UserBubble({ message, onFileClick }: UserBubbleProps): import("react").JSX.Element;
+export declare function UserBubble({ message, onFileClick, onImagePreview }: UserBubbleProps): import("react").JSX.Element;
 export declare namespace UserBubble {
     var displayName: string;
 }

package/dist/user-bubble/index.js

@@ -1,20 +1,45 @@
 import { Attachments } from "../attachments";
+import MessageImage from "../message-image";
 import "./style";
 export function UserBubble(_ref) {
+  var _message$attachments;
   var message = _ref.message,
-    onFileClick = _ref.onFileClick;
+    onFileClick = _ref.onFileClick,
+    onImagePreview = _ref.onImagePreview;
   var hasText = !!message.content;
-  var hasFiles = message.attachments && message.attachments.length > 0;
+  var all = (_message$attachments = message.attachments) !== null && _message$attachments !== void 0 ? _message$attachments : [];
+
+  /* 图片附件分流到 MessageImage，保持其数据驱动尺寸的渲染语义；
+   * 其他附件（文件 / 报告 / chip）继续走 Attachments 的模板槽位渲染。
+   * 分流是 UserBubble 内部行为，业务方传入的 message.attachments 形状不变。 */
+  var images = all.filter(function (a) {
+    return a.type.startsWith('image/') && a.url;
+  }).map(function (a) {
+    return {
+      url: a.url,
+      alt: a.name
+    };
+  });
+  var files = all.filter(function (a) {
+    return !(a.type.startsWith('image/') && a.url);
+  });
   return /*#__PURE__*/React.createElement("div", {
     "data-odn-user-bubble": true
   }, /*#__PURE__*/React.createElement("div", {
     "data-odn-user-bubble-inner": true
-  }, hasText && /*#__PURE__*/React.createElement("div", {
+  }, images.length > 0 && /*#__PURE__*/React.createElement("div", {
+    "data-odn-user-bubble-images": true
+  }, /*#__PURE__*/React.createElement(MessageImage, {
+    images: images,
+    onPreview: onImagePreview ? function (i) {
+      return onImagePreview(i, images);
+    } : undefined
+  })), hasText && /*#__PURE__*/React.createElement("div", {
     "data-odn-user-bubble-text": true
-  }, /*#__PURE__*/React.createElement("p", null, message.content)), hasFiles && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("p", null, message.content)), files.length > 0 && /*#__PURE__*/React.createElement("div", {
     "data-odn-user-bubble-files": true
   }, /*#__PURE__*/React.createElement(Attachments, {
-    attachments: message.attachments,
+    attachments: files,
     onFileClick: onFileClick,
     compact: hasText
   }))));

package/dist/user-bubble/style/index.css

@@ -7,6 +7,7 @@
   max-width: 75%;
   display: flex;
   flex-direction: column;
+  align-items: flex-end;
   gap: 6px;
 }
 
@@ -25,6 +26,11 @@
   margin: 0;
 }
 
+[data-odn-user-bubble-images] {
+  display: flex;
+  justify-content: flex-end;
+}
+
 [data-odn-user-bubble-files] {
   display: flex;
   justify-content: flex-end;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "One Design Next from TAD@tencent.com",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -112,7 +112,7 @@
     "stylelint": "^16.23.1",
     "stylelint-config-standard-scss": "^15.0.1",
     "svgo": "latest",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4",
     "tweakpane": "latest"
   },