@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Conversations/Item.tsx

@@ -0,0 +1,189 @@
+import classnames from 'classnames';
+import React, { useEffect, 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, IconButton, Popover } from '@agentscope-ai/design';
+
+export interface ConversationsItemProps
+  extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> {
+  info: Conversation;
+  prefixCls?: string;
+  direction?: DirectionType;
+  menu?: {
+    label?: string;
+    key?: string;
+    icon?: React.ReactNode;
+    danger?: boolean;
+    onClick?: (info: Conversation) => void;
+    onEdit?: (label: string, session: Conversation) => Promise<void>;
+    disabled?: boolean;
+  }[];
+  active?: boolean;
+  onClick?: (info: Conversation) => void;
+}
+
+const editableMap = {};
+export function useEditable(id) {
+  const [editable, setEditable] = useState(editableMap[id]);
+
+  return [editable, (value) => {
+    for (const key in editableMap) {
+      editableMap[key] = false;
+    }
+
+    editableMap[id] = value;
+    setEditable(value);
+  }]
+}
+
+
+const ConversationsItem: React.FC<ConversationsItemProps> = (props) => {
+  const [editable, setEditable] = useEditable(props.info.key);
+  const [popoverVisible, setPopoverVisible] = useState(false);
+  const { prefixCls, info, className, direction, onClick, active, menu, ...restProps } = props;
+  const domProps = pickAttrs(restProps, {
+    aria: true,
+    data: true,
+    attr: true,
+  });
+
+  const { disabled } = info;
+
+  const mergedCls = classnames(
+    className,
+    `${prefixCls}-item`,
+    { [`${prefixCls}-item-active`]: active && !disabled },
+    { [`${prefixCls}-item-disabled`]: disabled },
+    { [`${prefixCls}-item-timeline`]: info.timeline },
+  );
+
+  const onInternalClick: React.MouseEventHandler<HTMLLIElement> = () => {
+    if (!disabled && onClick) {
+      onClick(info);
+    }
+  };
+
+  return (
+    <li {...domProps} className={mergedCls} onClick={onInternalClick}>
+      <div className={`${prefixCls}-content`}>
+        {info.icon && <div className={`${prefixCls}-icon`}>{info.icon}</div>}
+        {
+          info.timeline && <div className={`${prefixCls}-timeline`} />
+        }
+        <Label
+          editable={editable}
+          setEditable={setEditable}
+          prefixCls={prefixCls}
+          info={info}
+          onEdit={menu?.find(item => item.key === 'edit')?.onEdit}
+        />
+
+        {
+          menu && !disabled && (
+            <Popover
+              styles={{ body: { padding: 4 } }}
+              trigger={['click']}
+              open={popoverVisible}
+              onOpenChange={setPopoverVisible}
+              content={<div className={`${prefixCls}-menu-popover`}
+              >
+                {menu.map(item => {
+                  const { key, ...rest } = item;
+                  const _props = {
+                    ...rest,
+                    onClick: function (e) {
+                      if (key === 'edit') {
+                        setEditable(true)
+                      } else {
+                        rest.onClick?.(info)
+                      }
+                      setPopoverVisible(false);
+                    },
+                  }
+
+                  return <MenuItem key={key} {..._props} info={info} />
+                })}
+              </div>} placement='bottom'>
+              <IconButton
+                bordered={false}
+                icon={<SparkMoreLine />}
+                disabled={disabled}
+                className={`${prefixCls}-menu-icon`}
+                onClick={e => e.stopPropagation()}
+              />
+            </Popover>
+          )
+        }
+      </div>
+      {
+        info.desc && <div className={`${prefixCls}-desc`} style={info.timeline ? { marginLeft: 16 } : {}} >{info.desc}</div>
+      }
+    </li>
+  );
+};
+
+function Label(props) {
+  const { editable, prefixCls, info, setEditable, onEdit } = props;
+  const [label, setLabel] = useState(info.label);
+  useEffect(() => {
+    setLabel(info.label);
+  }, [info.label]);
+
+  return editable ? <Input
+    prefixCls={prefixCls}
+    value={label}
+    onBlur={(v) => {
+      if (v === label) return setEditable(false);
+      onEdit(v, info)?.then(() => {
+        setLabel(v);
+      }).catch(() => {
+        setLabel(label);
+      }).finally(() => {
+        setEditable(false);
+      });
+    }}
+    setEditable={setEditable}
+  /> :
+    <div className={`${prefixCls}-label`}>{label}</div>
+}
+
+
+function Input({ prefixCls, value, onBlur, setEditable }) {
+  const [v, sv] = useState(value);
+  const ref = useRef<HTMLInputElement>();
+  useEffect(() => {
+
+    ref.current.focus();
+  }, []);
+
+  useEffect(() => {
+    sv(value);
+  }, [value])
+
+  return <input
+    ref={ref}
+    className={`${prefixCls}-label-edit`}
+    value={v}
+    onChange={e => sv(e.target.value)}
+    onBlur={() => onBlur(v)}
+  />;
+}
+
+function MenuItem(props) {
+  const { label, icon, danger, info, disabled } = props;
+
+  const onClick = (e) => {
+    if (disabled) return;
+    e.stopPropagation();
+    props.onClick?.(info);
+  };
+
+  if (icon && label) return <Button disabled={disabled} icon={icon} danger={danger} type='text' onClick={onClick}>{label}</Button>;
+  if (icon) return <IconButton disabled={disabled} icon={icon} danger={danger} bordered={false} onClick={onClick} />;
+  if (label) return <Button disabled={disabled} danger={danger} type='text' onClick={onClick}>{label}</Button>;
+  return null;
+}
+
+export default ConversationsItem;

package/components/Conversations/demo/basic.tsx

@@ -0,0 +1,107 @@
+import { Button, IconButton } from '@agentscope-ai/design';
+import { createStyles } from 'antd-style';
+import { ReactNode, useState } from 'react';
+import { HistoryPanel } from '@agentscope-ai/chat';
+import { SparkDeleteLine, SparkEditLine, SparkOperateLeftLine, SparkOperateRightLine, SparkPlusLine } from '@agentscope-ai/icons';
+
+const useStyles = createStyles(({ token }) => {
+  return {
+    layout: {
+      position: 'relative',
+      display: 'flex',
+      height: 416,
+      border: `1px solid ${token.colorBorderSecondary}`,
+      borderRadius: 8,
+      overflow: 'hidden',
+    },
+    left: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: 280,
+      background: token.colorBgLayout,
+      transition: 'margin-left 0.3s ease-in-out',
+      zIndex: 1,
+    },
+    open: {
+      position: 'absolute',
+      left: 20,
+      top: 16,
+    },
+    close: {
+      marginLeft: -280,
+    },
+    header: {
+      margin: '16px 20px 8px 20px',
+      height: 32,
+      display: 'flex',
+      justifyContent: 'space-between',
+      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`,
+        }
+      },
+
+    }
+  };
+});
+
+const items = Array.from({ length: 10 }).map((_, index) => ({
+  key: `item${index + 1}`,
+  label: `What is Spark Design?`,
+  disabled: index === 3,
+}));
+
+function Layout(props: { children: ReactNode }) {
+  const { styles, cx, theme } = useStyles();
+
+  return <div className={styles.layout}>{props.children}</div>
+}
+
+export default function () {
+  const [open, setOpen] = useState(true);
+  const { styles, cx, theme } = useStyles();
+
+
+  return <Layout>
+    <div className={styles.open}>
+      <IconButton bordered={false} icon={<SparkOperateRightLine />} onClick={() => setOpen(!open)} />
+
+    </div>
+    <div className={cx(styles.left, open ? '' : styles.close)}>
+      <div className={styles.header}>
+        <strong>SPARK CHAT</strong>
+        <IconButton bordered={false} icon={<SparkOperateLeftLine />} onClick={() => setOpen(!open)} />
+      </div>
+      <div className={styles.btn}>
+        <Button block type="primary" icon={<SparkPlusLine />}>
+          New Chat
+        </Button>
+      </div>
+      <div className={styles.list}>
+        <HistoryPanel
+          items={items}
+          defaultActiveKey="item1" />
+      </div>
+    </div>
+  </Layout>
+}

package/components/Conversations/demo/timeline.tsx

@@ -0,0 +1,111 @@
+import { Button } from '@agentscope-ai/design';
+import { createStyles } from 'antd-style';
+import { ReactNode, useState } from 'react';
+import { HistoryPanel } from '@agentscope-ai/chat';
+import { SparkDeleteLine, SparkEditLine, SparkPlusLine } from '@agentscope-ai/icons';
+
+
+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`,
+        }
+      },
+
+    }
+  };
+});
+
+const items = Array.from({ length: 10 }).map((_, index) => ({
+  key: `item${index + 1}`,
+  label: `What is Spark Design?`,
+  desc: new Date(Date.now() - index * 1000).toLocaleString(),
+  disabled: index === 3,
+  timeline: true,
+}));
+
+function Layout(props: { children: ReactNode }) {
+  const { styles, cx, theme } = useStyles();
+
+  return <div className={styles.layout}>{props.children}</div>
+}
+
+export default function () {
+  const [open, setOpen] = useState(false);
+  const { styles, cx, theme } = useStyles();
+
+  return <Layout>
+    <div className={styles.left}>
+      <div className={styles.header}>
+        <strong>SPARK CHAT</strong>
+      </div>
+      <div className={styles.btn}>
+        <Button block type="primary" icon={<SparkPlusLine />}>
+          New Chat
+        </Button>
+      </div>
+      <div className={styles.list}>
+        <HistoryPanel
+          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={items} defaultActiveKey="item1" />
+      </div>
+    </div>
+  </Layout>
+}

package/components/Conversations/demo/timestamp.tsx

@@ -0,0 +1,110 @@
+import { Button } from '@agentscope-ai/design';
+import { createStyles } from 'antd-style';
+import { ReactNode, useState } from 'react';
+import { HistoryPanel } from '@agentscope-ai/chat';
+import { SparkDeleteLine, SparkEditLine, SparkPlusLine } from '@agentscope-ai/icons';
+
+
+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`,
+        }
+      },
+
+    }
+  };
+});
+
+const items = Array.from({ length: 10 }).map((_, index) => ({
+  key: `item${index + 1}`,
+  label: `What is Spark Design?`,
+  desc: new Date(Date.now() - index * 1000).toLocaleString(),
+  disabled: index === 3,
+}));
+
+function Layout(props: { children: ReactNode }) {
+  const { styles, cx, theme } = useStyles();
+
+  return <div className={styles.layout}>{props.children}</div>
+}
+
+export default function () {
+  const [open, setOpen] = useState(false);
+  const { styles, cx, theme } = useStyles();
+
+  return <Layout>
+    <div className={styles.left}>
+      <div className={styles.header}>
+        <strong>SPARK CHAT</strong>
+      </div>
+      <div className={styles.btn}>
+        <Button block type="primary" icon={<SparkPlusLine />}>
+          New Chat
+        </Button>
+      </div>
+      <div className={styles.list}>
+        <HistoryPanel
+          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={items} defaultActiveKey="item1" />
+      </div>
+    </div>
+  </Layout>
+}

package/components/Conversations/hooks/useGroupable.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+import type { Conversation, Groupable } from '../interface';
+
+/**
+ * 🔥 Only for handling ungrouped data. Do not use it for any other purpose! 🔥
+ */
+const __UNGROUPED = '__ungrouped';
+
+type GroupList = {
+  data: Conversation[];
+  name?: string;
+  title?: Groupable['title'];
+}[];
+
+type GroupMap = Record<string, Conversation[]>;
+
+const useGroupable = (
+  groupable?: { groupable?: boolean | Groupable }['groupable'],
+  items: Conversation[] = [],
+): [groupList: GroupList, enableGroup: boolean] => {
+  const [enableGroup, sort, title] = React.useMemo(() => {
+    if (!groupable) {
+      return [false, undefined, undefined];
+    }
+
+    let baseConfig: Groupable = {
+      sort: undefined,
+      title: undefined,
+    };
+
+    if (typeof groupable === 'object') {
+      baseConfig = { ...baseConfig, ...groupable };
+    }
+
+    return [true, baseConfig.sort, baseConfig.title];
+  }, [groupable]);
+
+  return React.useMemo(() => {
+    // 未开启分组模式直接返回
+    if (!enableGroup) {
+      const groupList = [
+        {
+          name: __UNGROUPED,
+          data: items,
+          title: undefined,
+        },
+      ];
+
+      return [groupList, enableGroup];
+    }
+
+    // 1. 将 data 做数据分组，填充 groupMap
+    const groupMap = items.reduce<GroupMap>((acc, item) => {
+      const group = item.group || __UNGROUPED;
+
+      if (!acc[group]) {
+        acc[group] = [];
+      }
+
+      acc[group].push(item);
+
+      return acc;
+    }, {});
+
+    // 2. 存在 sort 时对 groupKeys 排序
+    const groupKeys = sort
+      ? Object.keys(groupMap).sort(sort)
+      : Object.keys(groupMap);
+
+    // 3. groupMap 转 groupList
+    const groupList = groupKeys.map((group) => ({
+      name: group === __UNGROUPED ? undefined : group,
+      title,
+      data: groupMap[group],
+    }));
+
+    return [groupList, enableGroup];
+  }, [items, groupable]);
+};
+
+export default useGroupable;

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

@@ -0,0 +1,32 @@
+---
+order: 2
+group:
+  title: Display
+  order: 1
+title: HistoryPanel
+description: Conversation History Panel
+---
+
+<DemoTitle title="HistoryPanel"  desc="Conversation History Panel" llmTxtName="Conversations"></DemoTitle>
+
+<code src="./demo/basic.tsx" height="auto">Example</code>
+
+<Install>import { HistoryPanel } from '@agentscope-ai/chat'</Install>
+
+
+#### HistoryPanel Examples
+
+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>
+
+#### API
+
+##### HistoryPanel
+
+<ApiParser source="./index.tsx" id="ConversationsProps"></ApiParser>
+
+##### Conversation
+
+<ApiParser source="./interface.ts" id="Conversation"></ApiParser>