listpage-next 0.0.145 → 0.0.146

package/dist/demos/demo11.js

@@ -1,6 +1,43 @@
-import { jsx } from "react/jsx-runtime";
-import { ReferenceList } from "../features/ChatClient/components/ReferenceList/index.js";
-const Demo11 = ()=>/*#__PURE__*/ jsx(ReferenceList, {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Flex } from "antd";
+import { Bubble, SuggestMessageList } from "../features/ChatClient/index.js";
+import { ApiOutlined } from "@ant-design/icons";
+const Demo11 = ()=>{
+    const feedback = /*#__PURE__*/ jsxs(Flex, {
+        gap: 8,
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                size: "small",
+                type: "text",
+                icon: /*#__PURE__*/ jsx(ApiOutlined, {})
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                size: "small",
+                type: "text",
+                icon: /*#__PURE__*/ jsx(ApiOutlined, {})
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                size: "small",
+                type: "text",
+                icon: /*#__PURE__*/ jsx(ApiOutlined, {})
+            })
+        ]
+    });
+    const suggests = /*#__PURE__*/ jsx(SuggestMessageList, {
+        suggests: [
+            {
+                title: '推荐问题1'
+            },
+            {
+                title: '推荐问题2'
+            }
+        ]
+    });
+    return /*#__PURE__*/ jsx(Bubble, {
+        reasoning_content: content,
+        content: content,
+        role: "assistant",
+        feedback: feedback,
         references: [
             {
                 title: '从通用到专业:大模型在医疗领域的四阶段训练方法与落地实践-CSDN博客',
@@ -11,8 +48,11 @@ const Demo11 = ()=>/*#__PURE__*/ jsx(ReferenceList, {
                 title: '测试2',
                 url: 'https://www.baidu.com'
             }
-        ]
+        ],
+        suggests: suggests,
+        showFeedback: ()=>true
     });
+};
 const content = `传统RAG 的检索环节多依赖单一语义检索（如向量相似度），但这种方式存在语义偏差（无法处理精确关键词）、长尾覆盖不足（罕见查询匹配差）等问题。检索增强的核心是混合检索（Hybrid Retrieval），即结合语义检索与关键词检索的优势，实现“精准匹配+广泛覆盖”的平衡。
 混合检索的本质是两种检索结果的加权融合 ，通过线性加权公式计算综合得分：
 BM25_score：基于关键词匹配的得分（由TF-IDF改进而来，考虑词频、文档长度归一化），擅长处理精确关键词（如产品型号、法律条款编号）；

package/dist/features/ChatClient/components/Bubble/Bubble.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ReferenceListProps } from './ReferenceList';
+export type BubbleProps = {
+    feedback?: ReactNode;
+    showFeedback?: (hovered: boolean) => boolean;
+    suggests?: ReactNode;
+    extra?: ReactNode;
+    content?: string;
+    reasoning_content?: string;
+    references?: ReferenceListProps['references'];
+    placement?: 'start' | 'end';
+    role?: 'user' | 'assistant';
+    markdownRender?: (text: string) => ReactNode;
+    reasoningMarkdownRender?: (text: string) => ReactNode;
+};
+export declare const Bubble: (props: BubbleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/Bubble/Bubble.js

@@ -0,0 +1,88 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useHover } from "ahooks";
+import styled_components from "styled-components";
+import { Markdown } from "./Markdown.js";
+import { Reasoning } from "./Reasoning.js";
+import { ReferenceList } from "./ReferenceList.js";
+const Bubble = (props)=>{
+    const { content, reasoning_content, extra, feedback, markdownRender, reasoningMarkdownRender = markdownRender, references, suggests, role = 'user', placement = 'user' === role ? 'end' : 'start', showFeedback = (hovered)=>hovered } = props;
+    const ref = useRef(null);
+    const hovered = useHover(ref);
+    const messageMarkdownEle = markdownRender ? markdownRender(content || '') : /*#__PURE__*/ jsx(Markdown, {
+        content: content || ''
+    });
+    const reasoningMarkdownEle = reasoningMarkdownRender ? reasoningMarkdownRender(reasoning_content || '') : /*#__PURE__*/ jsx(Markdown, {
+        content: reasoning_content || ''
+    });
+    const message = 'user' === role ? /*#__PURE__*/ jsx(UserContentWrapper, {
+        children: messageMarkdownEle
+    }) : /*#__PURE__*/ jsx(AssistantContentWrapper, {
+        children: messageMarkdownEle
+    });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(BubbleContainer, {
+                placement: placement,
+                ref: ref,
+                children: [
+                    Boolean(reasoning_content) && /*#__PURE__*/ jsx(Reasoning, {
+                        thinking: Boolean(!content),
+                        children: reasoningMarkdownEle
+                    }),
+                    message,
+                    Boolean(references?.length) && /*#__PURE__*/ jsx(ReferenceList, {
+                        references: references ?? []
+                    })
+                ]
+            }),
+            extra,
+            feedback && /*#__PURE__*/ jsx(ToolContainer, {
+                children: showFeedback(hovered) && feedback
+            }),
+            suggests && /*#__PURE__*/ jsx(SuggestContainer, {
+                children: suggests
+            })
+        ]
+    });
+};
+const BubbleContainer = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-top: 12px;
+  align-items: ${(props)=>'start' === props.placement ? 'flex-start' : 'flex-end'};
+`;
+const UserContentWrapper = styled_components.div`
+  color: #000000d9;
+  padding: 9px 16px;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  min-width: 0px;
+  font-family: sans-serif;
+
+  width: fit-content;
+  background-color: #0000000a;
+  border-radius: 12px;
+  max-width: 450px;
+`;
+const AssistantContentWrapper = styled_components.div`
+  color: #000000d9;
+  padding: 0px;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  min-width: 0px;
+  font-family: sans-serif;
+`;
+const ToolContainer = styled_components.div`
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+`;
+const SuggestContainer = styled_components.div`
+  margin-top: 24px;
+`;
+export { Bubble };

package/dist/features/ChatClient/components/Bubble/Markdown.d.ts

@@ -0,0 +1,4 @@
+export interface MarkdownProps {
+    content: string;
+}
+export declare const Markdown: (props: MarkdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/Bubble/Markdown.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import markdown_it from "markdown-it";
+import styled_components from "styled-components";
+const md = markdown_it({
+    html: true,
+    breaks: true
+});
+const defaultLinkOpen = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
+    return self.renderToken(tokens, idx, options);
+};
+md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
+    const targetIndex = tokens[idx].attrIndex('target');
+    if (targetIndex < 0) tokens[idx].attrPush([
+        'target',
+        '_blank'
+    ]);
+    else tokens[idx].attrs[targetIndex][1] = '_blank';
+    const relIndex = tokens[idx].attrIndex('rel');
+    if (relIndex < 0) tokens[idx].attrPush([
+        'rel',
+        'noopener noreferrer'
+    ]);
+    else tokens[idx].attrs[relIndex][1] = 'noopener noreferrer';
+    return defaultLinkOpen(tokens, idx, options, env, self);
+};
+const Markdown = (props)=>/*#__PURE__*/ jsx(MarkdownBody, {
+        dangerouslySetInnerHTML: {
+            __html: md.render(props.content)
+        }
+    });
+const MarkdownBody = styled_components.div`
+  h1 {
+    font-size: 18px;
+  }
+  h2 {
+    font-size: 16px;
+  }
+  p {
+    margin: 3px !important;
+  }
+`;
+export { Markdown };

package/dist/features/ChatClient/components/{Reasoning/index.d.ts → Bubble/Reasoning.d.ts}

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-export declare const Reasoning: ({ thinking, children }: {
+import { ReactNode } from 'react';
+export declare const Reasoning: ({ thinking, children, }: {
     thinking?: boolean;
     children?: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/{Reasoning/index.js → Bubble/Reasoning.js}

@@ -43,61 +43,65 @@ const ReasoningContainer = styled.div`
   cursor: pointer;
   border: 1px solid #ebebeb;
   border-radius: 12px;
-  margin-bottom: 20px;
   transition: height 0.3s ease-in-out;
   &:hover {
     background-color: #0000000a;
   }
+  min-width: 240px;
+
+  & > * {
+    box-sizing: border-box;
+  }
 `;
 const ReasoningHeader = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 `;
 const ReasoningContent = styled.div`
-    color: #00000080 !important;
-    overflow: hidden;
+  color: #00000080 !important;
+  overflow: hidden;
 `;
 const ReasoningTitle = styled.div`
-    color: #000c;
-    font-size: 14px;
-    font-weight: 500;
+  color: #000c;
+  font-size: 14px;
+  font-weight: 500;
 `;
 const ReasoningIcon = styled.div`
-    align-items: center;
-    border: 1px solid #00000014;
-    border-radius: 8px;
-    display: flex;
-    height: 28px;
-    justify-content: center;
-    padding: 5px 8px;
-    width: 28px;
-
-    &:hover {
+  align-items: center;
+  border: 1px solid #00000014;
+  border-radius: 8px;
+  display: flex;
+  height: 28px;
+  justify-content: center;
+  padding: 5px 8px;
+  width: 28px;
+  box-sizing: border-box;
+  &:hover {
     background-color: #0000000a;
-    }
+  }
 `;
 const ReasoningTitleAnimation = styled.span`
-    /* 文字流光动画 */
-    @keyframes textShine {
-        to {
-            background-position: 200% center;
-        }
+  /* 文字流光动画 */
+  @keyframes textShine {
+    to {
+      background-position: 200% center;
     }
+  }
 
-    background: linear-gradient(
-        90deg,
+  background: linear-gradient(
+    90deg,
     #3b82f6,
     #93c5fd,
     #3b82f6,
     #93c5fd,
     #3b82f6
-    );
-    background-size: 200% auto;
-    color: #000;
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    animation: textShine 3s linear infinite;
+  );
+  background-size: 200% auto;
+  color: #000;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: textShine 3s linear infinite;
 `;
 export { Reasoning };

package/dist/features/ChatClient/components/{SuggestMessageList/index.d.ts → Bubble/SuggestMessageList.d.ts}

@@ -1,5 +1,6 @@
 import { CSSProperties } from 'react';
 export type SuggestData = {
+    key?: string;
     title: string;
 };
 export interface SuggestMessageListProps {

package/dist/features/ChatClient/components/Bubble/index.d.ts

@@ -1,2 +1,4 @@
-import { BubbleProps } from './types';
-export declare const Bubble: (props: BubbleProps) => import("react/jsx-runtime").JSX.Element;
+export * from './Bubble';
+export * from './Reasoning';
+export * from './ReferenceList';
+export * from './SuggestMessageList';

package/dist/features/ChatClient/components/Bubble/index.js

@@ -1,57 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { useHover } from "ahooks";
-import styled_components from "styled-components";
-const Bubble = (props)=>{
-    const { children, feedback, role = "user", placement = 'user' === role ? 'end' : 'start', showFeedback = (hovered)=>hovered } = props;
-    const ref = useRef(null);
-    const hovered = useHover(ref);
-    const content = "user" === role ? /*#__PURE__*/ jsx(UserContentWrapper, {
-        children: children
-    }) : /*#__PURE__*/ jsx(AssistantContentWrapper, {
-        children: children
-    });
-    return /*#__PURE__*/ jsxs(BubbleContainer, {
-        placement: placement,
-        ref: ref,
-        children: [
-            content,
-            feedback && /*#__PURE__*/ jsx(ToolContainer, {
-                children: showFeedback(hovered) && feedback
-            })
-        ]
-    });
-};
-const BubbleContainer = styled_components.div`
-    display: flex;
-    flex-direction: column;
-    align-items: ${(props)=>"start" === props.placement ? "flex-start" : "flex-end"};
-    margin-top: 16px;
-`;
-const UserContentWrapper = styled_components.div`
-    color: #000000d9;
-    padding: 9px 16px;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;    
-    min-width: 0px;
-    font-family: sans-serif;
-
-    width: fit-content;
-    background-color: #0000000a;
-    border-radius: 12px;
-    max-width: 450px;
-`;
-const AssistantContentWrapper = styled_components.div`
-    color: #000000d9;
-    padding: 9px 16px;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-    min-width: 0px;
-    font-family: sans-serif;
-`;
-const ToolContainer = styled_components.div`
-  height: 40px;
-`;
-export { Bubble };
+export * from "./Bubble.js";
+export * from "./Reasoning.js";
+export * from "./ReferenceList.js";
+export * from "./SuggestMessageList.js";

package/dist/features/ChatClient/index.d.ts

@@ -2,11 +2,8 @@ export * from './components/ChatPage';
 export * from './components/ChatGuidance';
 export * from './components/ChatContent';
 export * from './components/Bubble';
-export * from './components/Reasoning';
 export { SimplifyChatPage, type SimplifyChatPageProps, } from './components/ChatPage/SimplifyChatPage';
 export * from './components/ChatDialog';
-export * from './components/SuggestMessageList';
-export * from './components/ReferenceList';
 export { useChatContext } from './context/useChatContext';
 export * from './context/types';
 export * from './utils/parseSse';

package/dist/features/ChatClient/index.js

@@ -4,10 +4,7 @@ export * from "./components/ChatPage/index.js";
 export * from "./components/ChatGuidance/index.js";
 export * from "./components/ChatContent/index.js";
 export * from "./components/Bubble/index.js";
-export * from "./components/Reasoning/index.js";
 export * from "./components/ChatDialog/index.js";
-export * from "./components/SuggestMessageList/index.js";
-export * from "./components/ReferenceList/index.js";
 export * from "./context/types.js";
 export * from "./utils/parseSse.js";
 export { SimplifyChatPage, useChatContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.145",
+  "version": "0.0.146",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",
@@ -46,7 +46,8 @@
     "storybook-addon-rslib": "^1.0.3",
     "storybook-react-rsbuild": "^1.0.3",
     "typescript": "^5.9.2",
-    "react-router-dom": ">=6.0.0"
+    "react-router-dom": ">=6.0.0",
+    "@types/markdown-it": "~14.1.2"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -65,6 +66,7 @@
     "@ant-design/icons": "~6.0.2",
     "mobx-react-lite": "~4.1.1",
     "rc-virtual-list": "~3.19.2",
-    "react-draggable": "~4.5.0"
+    "react-draggable": "~4.5.0",
+    "markdown-it": "~14.1.0"
   }
 }

package/dist/features/ChatClient/components/Bubble/types.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from "react";
-export type BubbleProps = {
-    children?: ReactNode;
-    feedback?: ReactNode;
-    placement?: "start" | "end";
-    role?: "user" | "assistant";
-    showFeedback?: (hovered: boolean) => boolean;
-};