feat(antdx): bubble

modelscope · Jan 25, 2025 · fee9f88 · fee9f88
1 parent f9ad1cc
commit fee9f88
Show file tree

Hide file tree

Showing 20 changed files with 446 additions and 424 deletions.
diff --git a/backend/modelscope_studio/components/antdx/bubble/list/item/__init__.py b/backend/modelscope_studio/components/antdx/bubble/list/item/__init__.py
@@ -88,7 +88,7 @@ def __init__(
         self.message_render = message_render
         self.root_class_name = root_class_name
 
-    FRONTEND_DIR = resolve_frontend_dir("bubble", ["list", "role"],
+    FRONTEND_DIR = resolve_frontend_dir("bubble", ["list", "item"],
                                         type="antdx")
 
     @property

diff --git a/config/changelog/package.json b/config/changelog/package.json
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@changesets/types": "^6.0.0",
-    "@types/node": "^22.10.7",
+    "@types/node": "^22.10.9",
     "tsup": "^8.3.5"
   }
 }
diff --git a/config/lint-config/package.json b/config/lint-config/package.json
@@ -18,7 +18,7 @@
   "dependencies": {
     "@eslint/compat": "^1.2.5",
     "@eslint/js": "^9.18.0",
-    "@typescript-eslint/parser": "^8.20.0",
+    "@typescript-eslint/parser": "^8.21.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-import": "^2.31.0",
@@ -39,7 +39,7 @@
     "stylelint-order": "^6.0.4",
     "stylelint-prettier": "^5.0.2",
     "svelte-eslint-parser": "^0.43.0",
-    "typescript-eslint": "^8.20.0"
+    "typescript-eslint": "^8.21.0"
   },
   "devDependencies": {
     "@types/eslint": "^9.6.1",

diff --git a/frontend/antdx/bubble/list/Index.svelte b/frontend/antdx/bubble/list/Index.svelte
@@ -11,8 +11,6 @@
   import cls from 'classnames';
   import { writable } from 'svelte/store';
 
-  import { getItems, getRoleItems } from './context';
-
   const AwaitedBubbleList = importComponent(() => import('./bubble.list'));
 
   export let gradio: Gradio;
@@ -53,8 +51,6 @@
     as_item,
     restProps: $$restProps,
   });
-  const { items, default: children } = getItems(['items', 'default']);
-  const { roles } = getRoleItems(['roles']);
 </script>
 
 {#if $mergedProps.visible}
@@ -67,8 +63,6 @@
       {...$mergedProps.props}
       {...bindEvents($mergedProps)}
       slots={$slots}
-      slotItems={$items.length > 0 ? $items : $children}
-      roleItems={$roles}
     >
       <slot></slot>
     </BubbleList>

diff --git a/frontend/antdx/bubble/list/bubble.list.tsx b/frontend/antdx/bubble/list/bubble.list.tsx
@@ -8,51 +8,70 @@ import type {
 import { useFunction } from '@utils/hooks/useFunction';
 import { renderItems } from '@utils/renderItems';
 
-import { type Item } from './context';
+import {
+  useItems,
+  useRoleItems,
+  withItemsContextProvider,
+  withRoleItemsContextProvider,
+} from './context';
 
 export const BubbleList = sveltify<
-  BubbleListProps & {
-    slotItems: Item[];
-    roleItems: Item[];
-  },
+  BubbleListProps,
   ['avatar', 'content', 'footer', 'header', 'loadingRender', 'messageRender']
->(({ items, roles: rolesProp, slotItems, roleItems, children, ...props }) => {
-  const rolesFunction = useFunction(rolesProp);
-  const roles = useMemo(() => {
-    return (
-      rolesProp ||
-      renderItems<
-        RoleType & {
-          role?: string;
-        }
-      >(roleItems)?.reduce(
-        (acc, v) => {
-          if (v.role !== undefined) {
-            acc[v.role] = v;
-          }
-          return acc;
-        },
-        {} as Record<string, RoleType>
-      )
-    );
-  }, [roleItems, rolesProp]);
-  return (
-    <>
-      <div style={{ display: 'none' }}>{children}</div>
-      <XBubble.List
-        {...props}
-        items={useMemo(() => {
+>(
+  withRoleItemsContextProvider(
+    ['roles'],
+    withItemsContextProvider(
+      ['items', 'default'],
+      ({ items, roles: rolesProp, children, ...props }) => {
+        const rolesFunction = useFunction(rolesProp);
+        const {
+          items: { roles: roleItems },
+        } = useRoleItems<['roles']>();
+        const { items: slotItems } = useItems<['items', 'default']>();
+        const roles = useMemo(() => {
           return (
-            items ||
-            renderItems<NonNullable<BubbleListProps['items']>[number]>(
-              slotItems
+            rolesProp ||
+            renderItems<
+              RoleType & {
+                role?: string;
+              }
+            >(roleItems, {
+              clone: true,
+              forceClone: true,
+            })?.reduce(
+              (acc, v) => {
+                if (v.role !== undefined) {
+                  acc[v.role] = v;
+                }
+                return acc;
+              },
+              {} as Record<string, RoleType>
             )
           );
-        }, [items, slotItems])}
-        roles={rolesFunction || roles}
-      />
-    </>
-  );
-});
+        }, [roleItems, rolesProp]);
+        const resolvedSlotItems =
+          slotItems.items.length > 0 ? slotItems.items : slotItems.default;
+        return (
+          <>
+            <div style={{ display: 'none' }}>{children}</div>
+            <XBubble.List
+              {...props}
+              items={useMemo(() => {
+                return (
+                  items ||
+                  renderItems<NonNullable<BubbleListProps['items']>[number]>(
+                    resolvedSlotItems
+                  )
+                );
+              }, [items, resolvedSlotItems])}
+              roles={rolesFunction || roles}
+            />
+          </>
+        );
+      }
+    )
+  )
+);
 
 export default BubbleList;
diff --git a/frontend/antdx/bubble/list/context.ts b/frontend/antdx/bubble/list/context.ts
@@ -1,9 +1,11 @@
-import { createItemsContext } from '@utils/createItemsContext';
+import { createItemsContext } from '@utils/createItemsContext2';
 
-const { getItems: getRoleItems, getSetItemFn: getSetRoleItemFn } =
-  createItemsContext('antdx-bubble-role');
+export const { useItems, withItemsContextProvider, ItemHandler } =
+  createItemsContext();
 
-const { getItems, getSetItemFn } = createItemsContext('antdx-bubble');
-
-export { getItems, getRoleItems, getSetItemFn, getSetRoleItemFn };
-export * from '@utils/createItemsContext';
+export const {
+  useItems: useRoleItems,
+  withItemsContextProvider: withRoleItemsContextProvider,
+  ItemHandler: RoleItemHandler,
+} = createItemsContext();
+export * from '@utils/createItemsContext2';
diff --git a/frontend/antdx/bubble/list/item/Index.svelte b/frontend/antdx/bubble/list/item/Index.svelte
@@ -30,9 +30,3 @@
     <slot></slot>
   </BubbleListItem>
 {/await}
-
-<style>
-  :global(.ms-gr-antd-noop-class) {
-    display: none;
-  }
-</style>
diff --git a/frontend/antdx/bubble/list/item/Item.svelte b/frontend/antdx/bubble/list/item/Item.svelte
@@ -1,7 +1,10 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-  import { bindEvents } from '@svelte-preprocess-react/component';
+  import {
+    bindEvents,
+    importComponent,
+  } from '@svelte-preprocess-react/component';
   import {
     getSetSlotParamsFn,
     getSlotContext,
@@ -15,8 +18,9 @@
   import cls from 'classnames';
   import { writable } from 'svelte/store';
 
-  import { getSetItemFn } from '../context';
-
+  const AwaitedBubbleListItem = importComponent(
+    () => import('./bubble.list.item')
+  );
   export let gradio: Gradio;
   export let props: Record<string, any> = {};
   const updatedProps = writable(props);
@@ -54,7 +58,12 @@
     as_item,
     restProps: $$restProps,
   });
-  const setItem = getSetItemFn();
+
+  let itemProps = {
+    props: {},
+    slots: {},
+  };
+
   $: {
     let avatar = $mergedProps.props.avatar || $mergedProps.restProps.avatar;
     if ($slots.avatar) {
@@ -70,7 +79,8 @@
           : avatar?.src,
       };
     }
-    setItem($slotKey, $mergedProps._internal.index || 0, {
+
+    itemProps = {
       props: {
         style: $mergedProps.elem_style,
         className: cls(
@@ -96,6 +106,8 @@
       slots: {
         ...$slots,
         avatar: undefined,
+        'avatar.icon': undefined,
+        'avatar.src': undefined,
         loadingRender: {
           el: $slots.loadingRender,
           callback: setSlotParams,
@@ -105,10 +117,19 @@
           callback: setSlotParams,
         },
       },
-    });
+    };
   }
 </script>
 
-{#if $mergedProps.visible}
-  <slot></slot>
-{/if}
+{#await AwaitedBubbleListItem then BubbleListItem}
+  <BubbleListItem
+    {...itemProps.props}
+    slots={itemProps.slots}
+    itemIndex={$mergedProps._internal.index || 0}
+    itemSlotKey={$slotKey}
+  >
+    {#if $mergedProps.visible}
+      <slot></slot>
+    {/if}
+  </BubbleListItem>
+{/await}
diff --git a/frontend/antdx/bubble/list/item/bubble.list.item.tsx b/frontend/antdx/bubble/list/item/bubble.list.item.tsx
@@ -0,0 +1,13 @@
+import { sveltify } from '@svelte-preprocess-react';
+import React from 'react';
+import type { BubbleProps } from '@ant-design/x';
+
+import { ItemHandler, type ItemHandlerProps } from '../context';
+
+export const BubbleListItem = sveltify<BubbleProps & ItemHandlerProps>(
+  (props) => {
+    return <ItemHandler {...props} />;
+  }
+);
+
+export default BubbleListItem;
diff --git a/frontend/antdx/bubble/list/role/Index.svelte b/frontend/antdx/bubble/list/role/Index.svelte
@@ -30,9 +30,3 @@
     <slot></slot>
   </BubbleListRole>
 {/await}
-
-<style>
-  :global(.ms-gr-antd-noop-class) {
-    display: none;
-  }
-</style>
diff --git a/frontend/antdx/bubble/list/role/Role.svelte b/frontend/antdx/bubble/list/role/Role.svelte
@@ -1,7 +1,10 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-  import { bindEvents } from '@svelte-preprocess-react/component';
+  import {
+    bindEvents,
+    importComponent,
+  } from '@svelte-preprocess-react/component';
   import {
     getSetSlotParamsFn,
     getSlotContext,
@@ -15,8 +18,9 @@
   import cls from 'classnames';
   import { writable } from 'svelte/store';
 
-  import { getSetRoleItemFn } from '../context';
-
+  const AwaitedBubbleListRole = importComponent(
+    () => import('./bubble.list.role')
+  );
   export let gradio: Gradio;
   export let props: Record<string, any> = {};
   const updatedProps = writable(props);
@@ -54,7 +58,12 @@
     as_item,
     restProps: $$restProps,
   });
-  const setItem = getSetRoleItemFn();
+
+  let itemProps = {
+    props: {},
+    slots: {},
+  };
+
   $: {
     let avatar = $mergedProps.props.avatar || $mergedProps.restProps.avatar;
     if ($slots.avatar) {
@@ -70,7 +79,7 @@
           : avatar?.src,
       };
     }
-    setItem($slotKey, $mergedProps._internal.index || 0, {
+    itemProps = {
       props: {
         style: $mergedProps.elem_style,
         className: cls(
@@ -95,6 +104,8 @@
       },
       slots: {
         ...$slots,
+        'avatar.icon': undefined,
+        'avatar.src': undefined,
         avatar: undefined,
         loadingRender: {
           el: $slots.loadingRender,
@@ -107,10 +118,19 @@
           callback: setSlotParams,
         },
       },
-    });
+    };
   }
 </script>
 
-{#if $mergedProps.visible}
-  <slot></slot>
-{/if}
+{#await AwaitedBubbleListRole then BubbleListRole}
+  <BubbleListRole
+    {...itemProps.props}
+    slots={itemProps.slots}
+    itemIndex={$mergedProps._internal.index || 0}
+    itemSlotKey={$slotKey}
+  >
+    {#if $mergedProps.visible}
+      <slot></slot>
+    {/if}
+  </BubbleListRole>
+{/await}