@agentscope-ai/chat 1.1.51 → 1.1.52-beta.1772784852386

package/components/Conversations/Item.tsx

@@ -1,13 +1,14 @@
 import classnames from 'classnames';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { DirectionType } from 'antd/es/config-provider';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import type { Conversation } from './interface';
 import { SparkMoreLine } from '@agentscope-ai/icons';
 import { Button, Checkbox, IconButton, Popover } from '@agentscope-ai/design';
+import { useInViewport } from 'ahooks';
 
 export interface ConversationsItemProps
-  extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> {
+  extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onSelect'> {
   info: Conversation;
   prefixCls?: string;
   direction?: DirectionType;
@@ -21,6 +22,9 @@ export interface ConversationsItemProps
     disabled?: boolean;
   }[];
   active?: boolean;
+  selectable?: boolean;
+  selected?: boolean;
+  onSelect?: (key: string, selected: boolean) => void;
   onClick?: (info: Conversation) => void;
 }
 
@@ -39,15 +43,17 @@ export function useEditable(id) {
 }
 
 
-const ConversationsItem: React.FC<ConversationsItemProps> = (props) => {
+const ConversationsItem: React.FC<ConversationsItemProps> = React.memo((props) => {
   const [editable, setEditable] = useEditable(props.info.key);
   const [popoverVisible, setPopoverVisible] = useState(false);
-  const { prefixCls, info, className, direction, onClick, active, menu, ...restProps } = props;
+  const { prefixCls, info, className, direction, onClick, active, selectable, selected, onSelect, menu, ...restProps } = props;
   const domProps = pickAttrs(restProps, {
     aria: true,
     data: true,
     attr: true,
   });
+  const ref = useRef<HTMLLIElement>(null);
+  const [inViewport] = useInViewport(ref);
 
   const { disabled } = info;
 
@@ -56,12 +62,12 @@ const ConversationsItem: React.FC<ConversationsItemProps> = (props) => {
     `${prefixCls}-item`,
     { [`${prefixCls}-item-active`]: active && !disabled },
     { [`${prefixCls}-item-disabled`]: disabled },
-    { [`${prefixCls}-item-timeline`]: info.timeline || info.selectable },
+    { [`${prefixCls}-item-timeline`]: info.timeline || selectable },
   );
 
   const onInternalClick: React.MouseEventHandler<HTMLLIElement> = () => {
-    if (info.selectable) {
-      return info.onSelect?.(info.key, !info.selected);
+    if (selectable) {
+      return onSelect?.(info.key, !selected);
     }
     if (!disabled && onClick) {
       return onClick(info);
@@ -69,15 +75,15 @@ const ConversationsItem: React.FC<ConversationsItemProps> = (props) => {
   };
 
   return (
-    <li {...domProps} className={mergedCls} onClick={onInternalClick}>
-      <div className={`${prefixCls}-content`}>
+    <li ref={ref} {...domProps} className={mergedCls} onClick={onInternalClick} >
+      {inViewport && <div className={`${prefixCls}-content`}>
         {info.icon && <div className={`${prefixCls}-icon`}>{info.icon}</div>}
         {
-          (info.timeline || info.selectable) && <div className={`${prefixCls}-timeline`}>
+          (info.timeline || selectable) && <div className={`${prefixCls}-timeline`}>
 
             {
-              info.selectable ?
-                <div className={`${prefixCls}-timeline-checkbox`} onClick={e => e.stopPropagation()}><Checkbox checked={info.selected} onChange={() => info.onSelect?.(info.key, !info.selected)} /></div> :
+              selectable ?
+                <div className={`${prefixCls}-timeline-checkbox`} onClick={e => e.stopPropagation()}><Checkbox checked={selected} onChange={() => onSelect?.(info.key, !selected)} /></div> :
                 <div className={`${prefixCls}-timeline-dot`} />
             }
           </div>
@@ -91,7 +97,7 @@ const ConversationsItem: React.FC<ConversationsItemProps> = (props) => {
         />
 
         {
-          menu && !disabled && !info.selectable && (
+          menu && !disabled && !selectable && (
             <Popover
               styles={{ body: { padding: 4 } }}
               trigger={['click']}
@@ -126,13 +132,13 @@ const ConversationsItem: React.FC<ConversationsItemProps> = (props) => {
             </Popover>
           )
         }
-      </div>
-      {
-        info.desc && <div className={`${prefixCls}-desc`} style={info.timeline || info.selectable ? { marginLeft: 16 } : {}} >{info.desc}</div>
+      </div>}
+      {inViewport &&
+        info.desc && <div className={`${prefixCls}-desc`} style={info.timeline || selectable ? { marginLeft: 16 } : {}} >{info.desc}</div>
       }
     </li>
   );
-};
+});
 
 function Label(props) {
   const { editable, prefixCls, info, setEditable, onEdit } = props;
@@ -179,6 +185,7 @@ function Input({ prefixCls, value, onBlur, setEditable }) {
     ref={ref}
     className={`${prefixCls}-label-edit`}
     value={v}
+    onClick={e => e.stopPropagation()}
     onChange={e => sv(e.target.value)}
     onBlur={() => onBlur(v)}
   />;

package/components/Conversations/demo/mock.json

@@ -0,0 +1 @@
+[{"label":"你好","key":"75b042dd142440a88ba7f8c3b83cc8ee","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"58d1e2dc8af34e88916f4c9562c9d8cd","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"3f2e2f6a45604f8d8c362d49953d315f","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"5c70ed588ba94589a37be72ede2ab3eb","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"这是什么","key":"75d243eb49d04c3b991247ef4df4db6a","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"6d0a9fcf0b4c433c8fdeca066e122fdb","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"帮我优化以下prompt，Tech Stack Constraints中，补充多代码库同时变更。# Role\n你是一名资深 Java 架构师和全栈开发工程师，专注于维护和改进本项目的代码库。你必须严格遵守以下开发规范和上下文管理流程。\n\n# Context & Initialization\n1. **启动检查**：在开始任何编码任务或回答关于项目结构的问题之前，**必须**首先读取 `history/` 目录下的文件（如果存在），以恢复之前的压缩上下文和会话状态。\n2. **架构优先**：当你第一次接触本项目或需要理解整体架构时，**必须**逐个阅读 `spec/` 目录下的所有文档。严禁在未阅读 spec 文档的情况下直接修改核心架构代码。\n3. **现有资产与经验检索**：在提出任何新实现方案或排查问题前，**必须**先扫描项目现有代码库及 **`memory/`** 目录（特别是工具和错误日志），确认是否已存在可复用的逻辑或历史解决方案。\n\n# Tech Stack Constraints\n- **语言版本**：所有代码必须严格兼容 **Java 1.8**。禁止使用 Java ","key":"5befa1b41e67493b8711684a41179952","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"b45dbc26917145ceacd5ce41cdd933e9","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"a557294dd3d04521b360edc0fd531aa5","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"1bb0eb77f3de4f259860dd1b46dff27f","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"5ecec35d83184c669cddc4a0005f9063","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"2a30b78078204e228e0bd4fb74967cf1","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"754f7761f09c4f6ca3f66076a877aa6a","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"总结一下文件","key":"3b3f1745119c4f7cb1058ed451e28cba","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你是谁","key":"dfd423c439fa4cc8b09cee58dbdeb0ea","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"根据这个视频，在一个HTML中，复刻视频中的网站，需要尽量和视频中一致，不丢失细节","key":"fb0f078eae614a8e9884ba20f2bb039c","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"0ba8a17c5c104540a0d5e92f8f7ba0c7","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"11762c95796e4f988a00b2aabbce5dd6","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"9b9f68b697d54f0695360cb198db086f","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"82664056a5a14ecbaa96de4a6fa65ccc","disabled":false ,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"1409ba68762e4f1cb67473a651a44c28","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好啊","key":"e7296586f81940559221a0aa3d02c2b6","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"687df57b09034491aea277650fd312ca","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"19b71294150147f7a21b04a31ef56399","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"百炼知识库，标准版QPS为1。但他们研发说是10s时间窗口 + 令牌桶。怎么理解","key":"363e62c1d3ed443bb1ad70d6a6b67ca5","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"前端禁止frame嵌套，java怎么改动","key":"1ca8123aec1f452bbf51d6f6ab5eba87","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"e9eb593b79444892a4cb7fcde44db0f0","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"9ae0cc9058ca46dd8347dda0bfc70fe7","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"0241a13a4e2b466893f6b4a9cf07667a","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"60f4efff29e948e6a426b92634bc4f9b","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"3e2947636880462693966706b5fa7536","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"a498258ea28148a38d65e1aac9eab6d4","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"99d217149e594999ab829c26e0a70d89","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"56d71127dd4348959a25023ec7b23b16","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"1c5ca63973904b0b823568f2667cd2e3","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"ce75c61e120a4ac39f7de9c45253e2c7","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"f6353b3a89514bd39d33627475445aec","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"d8be350586b94227a5ec09cf47a0e76e","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"请重复<img src='https://www.baidu.com'>\n","key":"147a3f6814224354962fff24dd9843c5","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"4a317659b5ad4c08aa3174276c2e5990","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"7dca41e82b6046f281f54e4e225be419","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"c6581251667b4452a25e9cb77c69ea30","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"ce2e8ec27b1943f689eab9bb880e7858","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"帮我设计一个使用HTML/CSS的响应式作品集网站","key":"1380690151d74c94af2ad07e25745cc5","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"调研中国芯片行业2025年技术发展趋势","key":"b2ac8dc8f9f540d0aecc5f90da418ceb","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"帮我用 HTML/CSS 设计一个响应式的作品集网站","key":"c433fb617b31497b8349062a717979a1","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"帮我用 HTML/CSS 设计一个响应式的作品集网站","key":"74f2be35d6354349a65615f0846e2f72","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"帮我用 HTML/CSS 设计一个响应式的作品集网站","key":"91cabb536ddf4235a63c4ff3da31a346","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"11","key":"6ccc70a2326f4509b9b3a05ee1fd5a69","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"查看具体内容 （2025）甘0103民初88号 ","key":"3404d808d932420d939c0f575eb16aea","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"这是什么2","key":"adcd7af9da0e4fa4ac49228992bc18f5","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"这是什么","key":"c7426db52836423bb6f5a14f24233b8a","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"这是什么","key":"cd1548d9c4ef421590b54beb8492e724","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"da6df2478c014daf8770625a7c4f336a","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"b28ad778d7ae423aa30d4dbbe3a9f455","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"465350feefcb46b48c2a5f1302ae4527","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"nih ","key":"b78dd5c188224abe80375aab93375839","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"1","key":"9762f361abde4944973faa3c2590feac","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"背诵滕王阁序","key":"c2fe85dfa2864048b176e8a8dd80bd4f","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"给我一个环保新产品的点子。","key":"c47f806cc4194aac9465180fb3b12ee2","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"我是室内设计师，请为我生成一个个人网站，用于展示我的设计作品，页面视觉风格需要有一定的艺术感","key":"3dcd5a7622f440469078e264cfc3c46b","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"这些图片有什么","key":"2b19f0eb3e5a419f92dd7192dc10fa59","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"这个里有什么","key":"592d7f3708cb4bf8a122927dfe58e811","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"这个里面有什么","key":"3a8eda8c34e84c93a36462f98b0913cf","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"调研中国芯片行业2025年技术发展趋势","key":"865ac3d6979e49eb856e72f8f6628a8b","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"2ccc30a38bb5407d8af98db996dca740","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"55221ced98164a0bba5e11d11c3772bf","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"ae0fd9da6b9c4ca48505e5508288e3db","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"cb7689128d584e8eb0071f09e49f08cd","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"eb4dc03180184027a827c5bfd724186b","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"这里面是什么","key":"112642fb8f92412cbb42734d6e01422a","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"这是什么","key":"dee82d9cd53e47fc9bd70df63c97f734","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"告诉我 AI 科技领域最近的新闻，按照\"标题、摘要、来源\"的结构生成。","key":"ad9b5787e7c8465b9c2c0b815ea2bd95","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"这是什么","key":"cc3d2b96f58c414aa37ba460786af16e","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"这是什么","key":"cd80299ba0da4f81912dad1158cfc7b8","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"图片里有啥","key":"318fef73c95e447da6ed278024b94780","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"960b7636dba64612b07c8caff5e38e5f","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"5c24cc2487724e72a15a74c04e130352","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"04892c6a0f8443b793cf1b44e1d92cf1","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"不过","key":"3d8ee58533f846bbad3bf4c72445d774","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"6125b8e77e894475bc254f7b8371e7d1","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"97ce943807ab4f9fb94951deea083d02","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"不过","key":"b55d6e5c6192406194509f2476c9dc0e","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"a2a0bf41e9d7435087db35ad00581e19","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"4963742204964a87b5e2b984e7b16eae","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"b63b3561ce9d4c1492cff4d5c9fa4555","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"8e5f3596ddb840f08b44a3874019b672","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"27ab6b16c6024e53869f4b974f370a44","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"43894f1880224a3dad38514b6d587cde","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好sss萨达大厦asdasdhghghj","key":"c4a106b200b249daa596537138e7877c","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"c8f2188975714ba09c2ccf26aa88888e","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"aca233bf0c1e4b43b9638bfe5f462198","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"704e97146a7e47f588f7518608ba058c","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"6b58038424a7456881fd60ad266d20af","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"f27450ee88464aa7b632c8894ca82a37","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"d6d03050ece44485ad5a240c828eee06","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"da577fdb1731408693fd6f0e7ba30c93","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"帮我","key":"d10fc98ae22b46b8bbc21adb53493fe9","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"帮我用Python构建一个天气API集成","key":"07a5dbfcb3184168ad1140aac86fd04c","disabled":false,"timeline":true,"selectable":false,"selected":false},{"label":"你好","key":"79d7312c3a82442ca9efb11d0815dc89","disabled":false,"timeline":true,"selectable":false,"selected":false}]

package/components/Conversations/demo/select.tsx

@@ -0,0 +1,113 @@
+import { Button } from '@agentscope-ai/design';
+import { createStyles } from 'antd-style';
+import { ReactNode, useCallback, useState } from 'react';
+import { HistoryPanel } from '@agentscope-ai/chat';
+import { SparkDeleteLine, SparkEditLine, SparkPlusLine } from '@agentscope-ai/icons';
+import defaultData from './mock.json';
+
+const useStyles = createStyles(({ token }) => {
+  return {
+    layout: {
+      display: 'flex',
+      height: 416,
+      border: `1px solid ${token.colorBorderSecondary}`,
+      borderRadius: 8,
+      overflow: 'hidden',
+    },
+    left: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: 280,
+      background: token.colorBgLayout,
+    },
+    header: {
+      margin: '16px 20px 8px 20px',
+      height: 32,
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      fontSize: 16,
+    },
+    btn: {
+      margin: '0 20px 16px 20px',
+
+    },
+    list: {
+      height: 0,
+      flex: 1,
+      overflowY: 'scroll',
+      padding: '0 16px 16px 20px',
+
+      '&::-webkit-scrollbar': {
+        width: 4,
+      },
+
+      '&::-webkit-scrollbar-thumb': {
+        backgroundColor: 'transparent !important',
+
+        '&:hover': {
+          backgroundColor: `${token.colorFill} !important`,
+        }
+      },
+
+    }
+  };
+});
+
+
+function Layout(props: { children: ReactNode }) {
+  const { styles, cx, theme } = useStyles();
+
+  return <div className={styles.layout}>{props.children}</div>
+}
+
+
+export default function () {
+  const [selectable, setSelectable] = useState(true);
+  const { styles, cx, theme } = useStyles();
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+  const handleSelectChange = useCallback((keys: string[]) => {
+    setSelectedKeys(keys);
+  }, []);
+
+  return <Layout>
+    <div className={styles.left}>
+      <div className={styles.header}>
+        <strong>SPARK CHAT</strong>
+      </div>
+      <div className={styles.btn}>
+        <Button size="small" onClick={() => setSelectable(!selectable)}>selectable</Button>
+        <Button size="small" onClick={() => setSelectedKeys([])}>clear</Button>
+        <Button size="small" onClick={() => setSelectedKeys(defaultData.map((item) => item.key))}>select all</Button>
+      </div>
+      <div className={styles.list}>
+        <HistoryPanel
+          selectable={selectable}
+          selectedKeys={selectedKeys}
+          onSelectChange={handleSelectChange}
+          menu={[
+            {
+              label: '编辑',
+              key: 'edit',
+              icon: <SparkEditLine />,
+              onEdit: (label: string) => {
+                if (label) return Promise.resolve();
+                return Promise.reject();
+              },
+            },
+            {
+              label: '删除',
+              key: 'delete',
+              icon: <SparkDeleteLine />,
+              danger: true,
+              onClick: (session) => {
+                console.log(session);
+              },
+            },
+          ]}
+          items={defaultData} defaultActiveKey="item1" />
+      </div>
+    </div>
+  </Layout>
+}

package/components/Conversations/demo/timeline.tsx

@@ -60,11 +60,6 @@ const items = Array.from({ length: 10 }).map((_, index) => ({
   desc: new Date(Date.now() - index * 1000).toLocaleString(),
   disabled: index === 3,
   timeline: true,
-  selectable: true,
-  selected: true,
-  onSelect: (key: string, selected: boolean) => {
-    console.log(key, selected);
-  },
 }));
 
 function Layout(props: { children: ReactNode }) {

package/components/Conversations/index.en-US.md

@@ -20,6 +20,7 @@ The following are examples and variations of this component
 
 <code src="./demo/timestamp.tsx" height="auto">Show Timestamp</code>
 <code src="./demo/timeline.tsx" height="auto">Show Timestamp & Timeline</code>
+<code src="./demo/select.tsx" height="auto">Selectable</code>
 
 #### API
 

package/components/Conversations/index.tsx

@@ -1,6 +1,6 @@
 import type { MenuProps } from 'antd';
 import classnames from 'classnames';
-import React from 'react';
+import React, { useRef } from 'react';
 
 import GroupTitle, { GroupTitleContext } from './GroupTitle';
 import ConversationsItem, { type ConversationsItemProps } from './Item';
@@ -13,6 +13,7 @@ import Style from './style';
 
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import type { Conversation, Groupable } from './interface';
+import { useInViewport } from 'ahooks';
 
 export interface ConversationsProps extends React.HTMLAttributes<HTMLUListElement> {
   /**
@@ -39,6 +40,24 @@ export interface ConversationsProps extends React.HTMLAttributes<HTMLUListElemen
    */
   onActiveChange?: (value: string) => void;
 
+  /**
+   * @description 是否开启批量选择模式
+   * @descriptionEn Whether to enable batch selection mode
+   */
+  selectable?: boolean;
+
+  /**
+   * @description 当前选中的会话 key 列表
+   * @descriptionEn Currently selected conversation key list
+   */
+  selectedKeys?: string[];
+
+  /**
+   * @description 批量选择变化时的回调函数
+   * @descriptionEn Callback when batch selection changes
+   */
+  onSelectChange?: (selectedKeys: string[]) => void;
+
   /**
    * @description 会话操作菜单配置
    * @descriptionEn Conversation operation menu configuration
@@ -79,6 +98,7 @@ export interface ConversationsProps extends React.HTMLAttributes<HTMLUListElemen
 }
 
 const Conversations: React.FC<ConversationsProps & { groupable?: boolean | Groupable }> = (props) => {
+  
   const {
     prefixCls: customizePrefixCls,
     rootClassName,
@@ -86,6 +106,9 @@ const Conversations: React.FC<ConversationsProps & { groupable?: boolean | Group
     activeKey,
     defaultActiveKey,
     onActiveChange,
+    selectable: propsSelectable,
+    selectedKeys,
+    onSelectChange,
     menu,
     styles = {},
     classNames = {},
@@ -121,13 +144,26 @@ const Conversations: React.FC<ConversationsProps & { groupable?: boolean | Group
     },
   );
 
-  const onConversationItemClick: ConversationsItemProps['onClick'] = (info) => {
+  const onActiveChangeRef = React.useRef(onActiveChange);
+  onActiveChangeRef.current = onActiveChange;
+
+  const onConversationItemClick: ConversationsItemProps['onClick'] = React.useCallback((info) => {
     setMergedActiveKey(info.key);
+    onActiveChangeRef.current?.(info.key);
+  }, [setMergedActiveKey]);
 
-    if (onActiveChange) {
-      onActiveChange(info.key);
-    }
-  };
+  const selectedKeysRef = React.useRef(selectedKeys);
+  selectedKeysRef.current = selectedKeys;
+
+  const onSelectChangeRef = React.useRef(onSelectChange);
+  onSelectChangeRef.current = onSelectChange;
+
+  const handleItemSelect = React.useCallback((key: string, selected: boolean) => {
+    if (!onSelectChangeRef.current) return;
+    const keys = selectedKeysRef.current || [];
+    const next = selected ? [...keys, key] : keys.filter(k => k !== key);
+    onSelectChangeRef.current(next);
+  }, []);
 
   return <>
     <Style />
@@ -138,6 +174,12 @@ const Conversations: React.FC<ConversationsProps & { groupable?: boolean | Group
     >
       {groupList.map((groupInfo, groupIndex) => {
         const convItems = groupInfo.data.map((convInfo: Conversation, convIndex: number) => {
+          const itemSelectable = propsSelectable ?? convInfo.selectable;
+          const itemSelected = itemSelectable
+            ? (selectedKeys ? selectedKeys.includes(convInfo.key) : convInfo.selected)
+            : false;
+          const itemOnSelect = onSelectChange ? handleItemSelect : convInfo.onSelect;
+
           return (
             <ConversationsItem
               key={convInfo.key || `key-${convIndex}`}
@@ -148,6 +190,9 @@ const Conversations: React.FC<ConversationsProps & { groupable?: boolean | Group
               style={styles.item}
               menu={menu}
               active={mergedActiveKey === convInfo.key}
+              selectable={itemSelectable}
+              selected={itemSelected}
+              onSelect={itemOnSelect}
               onClick={onConversationItemClick}
             />
           )

package/lib/Conversations/Item.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { DirectionType } from 'antd/es/config-provider';
 import type { Conversation } from './interface';
-export interface ConversationsItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> {
+export interface ConversationsItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onSelect'> {
     info: Conversation;
     prefixCls?: string;
     direction?: DirectionType;
@@ -15,6 +15,9 @@ export interface ConversationsItemProps extends Omit<React.HTMLAttributes<HTMLLI
         disabled?: boolean;
     }[];
     active?: boolean;
+    selectable?: boolean;
+    selected?: boolean;
+    onSelect?: (key: string, selected: boolean) => void;
     onClick?: (info: Conversation) => void;
 }
 export declare function useEditable(id: any): any[];

package/lib/Conversations/Item.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "info", "className", "direction", "onClick", "active", "menu"],
+var _excluded = ["prefixCls", "info", "className", "direction", "onClick", "active", "selectable", "selected", "onSelect", "menu"],
   _excluded2 = ["key"];
 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; }
@@ -19,6 +19,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import { SparkMoreLine } from '@agentscope-ai/icons';
 import { Button, Checkbox, IconButton, Popover } from '@agentscope-ai/design';
+import { useInViewport } from 'ahooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var editableMap = {};
@@ -28,14 +29,14 @@ export function useEditable(id) {
     editable = _useState2[0],
     setEditable = _useState2[1];
   return [editable, function (value) {
-    for (var key in editableMap) {
-      editableMap[key] = false;
+    for (var _key in editableMap) {
+      editableMap[_key] = false;
     }
     editableMap[id] = value;
     setEditable(value);
   }];
 }
-var ConversationsItem = function ConversationsItem(props) {
+var ConversationsItem = /*#__PURE__*/React.memo(function (props) {
   var _menu$find;
   var _useEditable = useEditable(props.info.key),
     _useEditable2 = _slicedToArray(_useEditable, 2),
@@ -51,6 +52,9 @@ var ConversationsItem = function ConversationsItem(props) {
     direction = props.direction,
     onClick = props.onClick,
     active = props.active,
+    selectable = props.selectable,
+    selected = props.selected,
+    onSelect = props.onSelect,
     menu = props.menu,
     restProps = _objectWithoutProperties(props, _excluded);
   var domProps = pickAttrs(restProps, {
@@ -58,37 +62,41 @@ var ConversationsItem = function ConversationsItem(props) {
     data: true,
     attr: true
   });
+  var ref = useRef(null);
+  var _useInViewport = useInViewport(ref),
+    _useInViewport2 = _slicedToArray(_useInViewport, 1),
+    inViewport = _useInViewport2[0];
   var disabled = info.disabled;
-  var mergedCls = classnames(className, "".concat(prefixCls, "-item"), _defineProperty({}, "".concat(prefixCls, "-item-active"), active && !disabled), _defineProperty({}, "".concat(prefixCls, "-item-disabled"), disabled), _defineProperty({}, "".concat(prefixCls, "-item-timeline"), info.timeline || info.selectable));
+  var mergedCls = classnames(className, "".concat(prefixCls, "-item"), _defineProperty({}, "".concat(prefixCls, "-item-active"), active && !disabled), _defineProperty({}, "".concat(prefixCls, "-item-disabled"), disabled), _defineProperty({}, "".concat(prefixCls, "-item-timeline"), info.timeline || selectable));
   var onInternalClick = function onInternalClick() {
-    if (info.selectable) {
-      var _info$onSelect;
-      return (_info$onSelect = info.onSelect) === null || _info$onSelect === void 0 ? void 0 : _info$onSelect.call(info, info.key, !info.selected);
+    if (selectable) {
+      return onSelect === null || onSelect === void 0 ? void 0 : onSelect(info.key, !selected);
     }
     if (!disabled && onClick) {
       return onClick(info);
     }
   };
-  return /*#__PURE__*/_jsxs("li", _objectSpread(_objectSpread({}, domProps), {}, {
+  return /*#__PURE__*/_jsxs("li", _objectSpread(_objectSpread({
+    ref: ref
+  }, domProps), {}, {
     className: mergedCls,
     onClick: onInternalClick,
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [inViewport && /*#__PURE__*/_jsxs("div", {
       className: "".concat(prefixCls, "-content"),
       children: [info.icon && /*#__PURE__*/_jsx("div", {
         className: "".concat(prefixCls, "-icon"),
         children: info.icon
-      }), (info.timeline || info.selectable) && /*#__PURE__*/_jsx("div", {
+      }), (info.timeline || selectable) && /*#__PURE__*/_jsx("div", {
         className: "".concat(prefixCls, "-timeline"),
-        children: info.selectable ? /*#__PURE__*/_jsx("div", {
+        children: selectable ? /*#__PURE__*/_jsx("div", {
           className: "".concat(prefixCls, "-timeline-checkbox"),
           onClick: function onClick(e) {
             return e.stopPropagation();
           },
           children: /*#__PURE__*/_jsx(Checkbox, {
-            checked: info.selected,
+            checked: selected,
             onChange: function onChange() {
-              var _info$onSelect2;
-              return (_info$onSelect2 = info.onSelect) === null || _info$onSelect2 === void 0 ? void 0 : _info$onSelect2.call(info, info.key, !info.selected);
+              return onSelect === null || onSelect === void 0 ? void 0 : onSelect(info.key, !selected);
             }
           })
         }) : /*#__PURE__*/_jsx("div", {
@@ -102,7 +110,7 @@ var ConversationsItem = function ConversationsItem(props) {
         onEdit: menu === null || menu === void 0 || (_menu$find = menu.find(function (item) {
           return item.key === 'edit';
         })) === null || _menu$find === void 0 ? void 0 : _menu$find.onEdit
-      }), menu && !disabled && !info.selectable && /*#__PURE__*/_jsx(Popover, {
+      }), menu && !disabled && !selectable && /*#__PURE__*/_jsx(Popover, {
         styles: {
           body: {
             padding: 4
@@ -143,15 +151,15 @@ var ConversationsItem = function ConversationsItem(props) {
           }
         })
       })]
-    }), info.desc && /*#__PURE__*/_jsx("div", {
+    }), inViewport && info.desc && /*#__PURE__*/_jsx("div", {
       className: "".concat(prefixCls, "-desc"),
-      style: info.timeline || info.selectable ? {
+      style: info.timeline || selectable ? {
         marginLeft: 16
       } : {},
       children: info.desc
     })]
   }));
-};
+});
 function Label(props) {
   var editable = props.editable,
     prefixCls = props.prefixCls,
@@ -210,6 +218,9 @@ function Input(_ref) {
     ref: ref,
     className: "".concat(prefixCls, "-label-edit"),
     value: v,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
     onChange: function onChange(e) {
       return sv(e.target.value);
     },

package/lib/Conversations/index.d.ts

@@ -21,6 +21,21 @@ export interface ConversationsProps extends React.HTMLAttributes<HTMLUListElemen
      * @descriptionEn Callback function when conversation selection changes, receives new conversation identifier
      */
     onActiveChange?: (value: string) => void;
+    /**
+     * @description 是否开启批量选择模式
+     * @descriptionEn Whether to enable batch selection mode
+     */
+    selectable?: boolean;
+    /**
+     * @description 当前选中的会话 key 列表
+     * @descriptionEn Currently selected conversation key list
+     */
+    selectedKeys?: string[];
+    /**
+     * @description 批量选择变化时的回调函数
+     * @descriptionEn Callback when batch selection changes
+     */
+    onSelectChange?: (selectedKeys: string[]) => void;
     /**
      * @description 会话操作菜单配置
      * @descriptionEn Conversation operation menu configuration

package/lib/Conversations/index.js

@@ -1,7 +1,11 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "rootClassName", "items", "activeKey", "defaultActiveKey", "onActiveChange", "menu", "styles", "classNames", "groupable", "className", "style"];
+var _excluded = ["prefixCls", "rootClassName", "items", "activeKey", "defaultActiveKey", "onActiveChange", "selectable", "selectedKeys", "onSelectChange", "menu", "styles", "classNames", "groupable", "className", "style"];
 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; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -32,6 +36,9 @@ var Conversations = function Conversations(props) {
     activeKey = props.activeKey,
     defaultActiveKey = props.defaultActiveKey,
     onActiveChange = props.onActiveChange,
+    propsSelectable = props.selectable,
+    selectedKeys = props.selectedKeys,
+    onSelectChange = props.onSelectChange,
     menu = props.menu,
     _props$styles = props.styles,
     styles = _props$styles === void 0 ? {} : _props$styles,
@@ -61,18 +68,34 @@ var Conversations = function Conversations(props) {
     getPrefixCls = _useProviderContext.getPrefixCls;
   var prefixCls = getPrefixCls('conversations');
   var mergedCls = classnames(prefixCls, className, rootClassName, _defineProperty({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'));
-  var onConversationItemClick = function onConversationItemClick(info) {
+  var onActiveChangeRef = React.useRef(onActiveChange);
+  onActiveChangeRef.current = onActiveChange;
+  var onConversationItemClick = React.useCallback(function (info) {
+    var _onActiveChangeRef$cu;
     setMergedActiveKey(info.key);
-    if (onActiveChange) {
-      onActiveChange(info.key);
-    }
-  };
+    (_onActiveChangeRef$cu = onActiveChangeRef.current) === null || _onActiveChangeRef$cu === void 0 || _onActiveChangeRef$cu.call(onActiveChangeRef, info.key);
+  }, [setMergedActiveKey]);
+  var selectedKeysRef = React.useRef(selectedKeys);
+  selectedKeysRef.current = selectedKeys;
+  var onSelectChangeRef = React.useRef(onSelectChange);
+  onSelectChangeRef.current = onSelectChange;
+  var handleItemSelect = React.useCallback(function (key, selected) {
+    if (!onSelectChangeRef.current) return;
+    var keys = selectedKeysRef.current || [];
+    var next = selected ? [].concat(_toConsumableArray(keys), [key]) : keys.filter(function (k) {
+      return k !== key;
+    });
+    onSelectChangeRef.current(next);
+  }, []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx("ul", _objectSpread(_objectSpread({}, domProps), {}, {
       style: style,
       className: mergedCls,
       children: groupList.map(function (groupInfo, groupIndex) {
         var convItems = groupInfo.data.map(function (convInfo, convIndex) {
+          var itemSelectable = propsSelectable !== null && propsSelectable !== void 0 ? propsSelectable : convInfo.selectable;
+          var itemSelected = itemSelectable ? selectedKeys ? selectedKeys.includes(convInfo.key) : convInfo.selected : false;
+          var itemOnSelect = onSelectChange ? handleItemSelect : convInfo.onSelect;
           return /*#__PURE__*/_jsx(ConversationsItem, {
             info: convInfo,
             prefixCls: prefixCls,
@@ -81,6 +104,9 @@ var Conversations = function Conversations(props) {
             style: styles.item,
             menu: menu,
             active: mergedActiveKey === convInfo.key,
+            selectable: itemSelectable,
+            selected: itemSelected,
+            onSelect: itemOnSelect,
             onClick: onConversationItemClick
           }, convInfo.key || "key-".concat(convIndex));
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/chat",
-  "version": "1.1.51",
+  "version": "1.1.52-beta.1772784852386",
   "description": "a free and open-source chat framework for building excellent LLM-powered chat experiences",
   "license": "Apache-2.0",
   "sideEffects": [