@baishuyun/ai-design 2.0.57 → 2.0.58

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baishuyun/ai-design
 
+## 2.0.58
+
+### Patch Changes
+
+- 4b49068: 用户文本气泡超过 200 字可关闭折叠，折叠条图标可隐藏，正文保留换行并解析 Markdown。
+
 ## 2.0.57
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/ai-design",
-  "version": "2.0.57",
+  "version": "2.0.58",
   "description": "AI 功能 UI 组件库 - 所有 AI 功能的 UI 表现唯一真相来源",
   "type": "module",
   "main": "src/index.ts",
@@ -55,13 +55,14 @@
     "react-day-picker": "^9.11.2",
     "react-hook-form": "^7.76.0",
     "react-markdown": "^10.1.0",
+    "remark-breaks": "^4.0.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.13",
-    "@baishuyun/ai-feat-utils": "2.0.52",
-    "@baishuyun/types": "3.0.48"
+    "@baishuyun/types": "3.0.48",
+    "@baishuyun/ai-feat-utils": "2.0.52"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/collapsible-txt-msg.tsx

@@ -7,7 +7,8 @@ import classNames from 'classnames';
 export interface CollapsibleTxtMsgProps {
   title: string;
   content?: string;
-  icon?: ReactNode;
+  /** 不传时用 AnalysisIcon。null 不显示图标 */
+  icon?: ReactNode | null;
   defaultOpen?: boolean;
   children?: ReactNode;
 
@@ -40,6 +41,7 @@ export const CollapsibleTxtMsg = ({
   const isGhostOpen = isOpen && ghost;
 
   const t = isGhostOpen ? '' : title;
+  const shownIcon = icon === undefined ? <AnalysisIcon /> : icon;
 
   return (
     <div className={classNames("flex flex-col gap-2.5 rounded-lg w-full", cls)}>
@@ -54,7 +56,9 @@ export const CollapsibleTxtMsg = ({
         }}
       >
         <div className="flex gap-2.5 items-center">
-          <div className={classNames("shrink-0 flex items-center", iconSizeCls)}>{icon || <AnalysisIcon />}</div>
+          {shownIcon ? (
+            <div className={classNames("shrink-0 flex items-center", iconSizeCls)}>{shownIcon}</div>
+          ) : null}
           <p className={`text-[#666] ${sizeCls} leading-normal`}>{t}</p>
         </div>
         <button

package/src/components/memoized-markdown.tsx

@@ -1,6 +1,7 @@
 import { marked } from "marked";
 import { memo, useMemo } from "react";
 import ReactMarkdown from "react-markdown";
+import remarkBreaks from "remark-breaks";
 
 function parseMarkdownIntoBlocks(markdown: string): string[] {
   const tokens = marked.lexer(markdown);
@@ -8,23 +9,27 @@ function parseMarkdownIntoBlocks(markdown: string): string[] {
 }
 
 const MemoizedMarkdownBlock = memo(
-  ({ content }: { content: string }) => {
-    return <ReactMarkdown>{content}</ReactMarkdown>;
-  },
-  (prevProps, nextProps) => {
-    if (prevProps.content !== nextProps.content) return false;
-    return true;
+  ({ content, breaks }: { content: string; breaks?: boolean }) => {
+    return (
+      <ReactMarkdown remarkPlugins={breaks ? [remarkBreaks] : undefined}>
+        {content}
+      </ReactMarkdown>
+    );
   },
 );
 
 MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock";
 
 export const MemoizedMarkdown = memo(
-  ({ content, id }: { content: string; id: string }) => {
+  ({ content, id, breaks }: { content: string; id: string; breaks?: boolean }) => {
     const blocks = useMemo(() => parseMarkdownIntoBlocks(content), [content]);
 
     return blocks.map((block, index) => (
-      <MemoizedMarkdownBlock content={block} key={`${id}-block_${index}`} />
+      <MemoizedMarkdownBlock
+        breaks={breaks}
+        content={block}
+        key={`${id}-block_${index}`}
+      />
     ));
   },
 );

package/src/components/user-txt-msg-bubble.tsx

@@ -1,14 +1,26 @@
+import { ReactNode } from 'react';
 import { TextIcon } from './bs-icons';
 import { CollapsibleTxtMsg } from './collapsible-txt-msg';
+import { MemoizedMarkdown } from './memoized-markdown';
 
 export interface UserTextMsgBubbleProps {
   text?: string;
   children?: string;
   /** 移动端消息内容文字 16px（PC 端 14px） */
   isMobile?: boolean;
+  /** 超过 200 字时折叠为前 10 个字。默认开启 */
+  collapsible?: boolean;
+  /** 折叠条图标。不传为 TextIcon，null 不显示图标 */
+  icon?: ReactNode | null;
 }
 
-export const UserTextMsgBubble = ({ text, children, isMobile }: UserTextMsgBubbleProps) => {
+export const UserTextMsgBubble = ({
+  text,
+  children,
+  isMobile,
+  collapsible = true,
+  icon,
+}: UserTextMsgBubbleProps) => {
   const content = (text || children) as string;
   const sizeCls = isMobile ? 'text-[16px]' : 'text-[14px]';
   const paddingCls = isMobile ? "px-[10px] py-[9px]" : "px-2.5 py-[8px]";
@@ -30,6 +42,7 @@ export const UserTextMsgBubble = ({ text, children, isMobile }: UserTextMsgBubbl
 
   const isTooLong = content.length > 200;
   const summary = `${content?.slice(0, 10)}...`;
+  const body = <MemoizedMarkdown breaks content={content} id="user-txt-msg" />;
   return (
     <div
       className={`${paddingCls} text-[#0265FF] ${sizeCls} w-fit`}
@@ -39,12 +52,17 @@ export const UserTextMsgBubble = ({ text, children, isMobile }: UserTextMsgBubbl
         background: `linear-gradient(180deg, #DBE9FF 0%, #E9FFFD 100%)`,
       }}
     >
-      {isTooLong ? (
-        <CollapsibleTxtMsg icon={<TextIcon />} ghost isMobile={isMobile} title={summary}>
-          {content}
+      {isTooLong && collapsible ? (
+        <CollapsibleTxtMsg
+          icon={icon === undefined ? <TextIcon /> : icon}
+          ghost
+          isMobile={isMobile}
+          title={summary}
+        >
+          {body}
         </CollapsibleTxtMsg>
       ) : (
-        content
+        body
       )}
     </div>
   );

package/src/stories/UserTextMsgBubble.stories.ts

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { UserTextMsgBubble } from "../components/user-txt-msg-bubble";
 
+const longText = "供应商信息管理表需要先填写基础资料再补充产品明细。".repeat(9);
+
 const meta = {
   title: "Example/Chat/UserTextMsgBubble",
   component: UserTextMsgBubble,
@@ -22,3 +24,29 @@ export const Base: Story = {
     text: "确认搭建：供应商信息管理表",
   },
 };
+
+export const Long: Story = {
+  args: {
+    text: longText,
+  },
+};
+
+export const CollapseDisabled: Story = {
+  args: {
+    text: longText,
+    collapsible: false,
+  },
+};
+
+export const NoIcon: Story = {
+  args: {
+    text: longText,
+    icon: null,
+  },
+};
+
+export const WithMarkdown: Story = {
+  args: {
+    text: "请按下面格式填写：\n名称：供应商\n\n```ts\nconst name = \"供应商\";\n```",
+  },
+};