feat: semi 2.69.0

rashagu · Nov 11, 2024 · 0b176ca · 0b176ca
1 parent c4f8f43
commit 0b176ca
Show file tree

Hide file tree

Showing 17 changed files with 1,237 additions and 273 deletions.
diff --git a/package.json b/package.json
@@ -34,8 +34,8 @@
     "packages/vite-plugin-semi-theme"
   ],
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.68.4",
-    "@douyinfe/semi-theme-default": "2.68.4",
+    "@douyinfe/semi-foundation": "2.69.0",
+    "@douyinfe/semi-theme-default": "2.69.0",
     "@vue/repl": "4.3.1",
     "lodash": "^4.17.21",
     "vue": "^3.5.12"
@@ -48,7 +48,7 @@
     "@babel/preset-react": "^7.16.7",
     "@changesets/cli": "^2.27.1",
     "@chromatic-com/storybook": "1.3.4",
-    "@douyinfe/semi-theme-default": "2.68.4",
+    "@douyinfe/semi-theme-default": "2.69.0",
     "@kousum/semi-icons-lab-vue": "workspace: *",
     "@kousum/semi-icons-vue": "workspace: *",
     "@kousum/semi-illustrations-vue": "workspace: *",
@@ -77,8 +77,8 @@
     "@testing-library/vue": "^8.1.0",
     "@types/lodash": "^4.17.5",
     "@types/node": "^20.1.4",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitejs/plugin-vue": "^5.1.5",
+    "@vitejs/plugin-vue-jsx": "^4.1.0",
     "@vitest/coverage-v8": "^2.0.5",
     "@vue/test-utils": "^2.4.6",
     "babel-loader": "^8.3.0",

diff --git a/packages/semi-animation-vue/package.json b/packages/semi-animation-vue/package.json
@@ -38,10 +38,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-animation": "2.68.4",
-    "@douyinfe/semi-animation-styled": "2.68.4",
-    "@douyinfe/semi-foundation": "2.68.4",
-    "@douyinfe/semi-theme-default": "2.68.4",
+    "@douyinfe/semi-animation": "2.69.0",
+    "@douyinfe/semi-animation-styled": "2.69.0",
+    "@douyinfe/semi-foundation": "2.69.0",
+    "@douyinfe/semi-theme-default": "2.69.0",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
     "vue": "^3.5.12"
@@ -61,8 +61,8 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@types/node": "^20.1.4",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitejs/plugin-vue": "^5.1.5",
+    "@vitejs/plugin-vue-jsx": "^4.1.0",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",

diff --git a/packages/semi-icons-lab-vue/package.json b/packages/semi-icons-lab-vue/package.json
@@ -28,8 +28,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.68.4",
-    "@douyinfe/semi-theme-default": "2.68.4",
+    "@douyinfe/semi-foundation": "2.69.0",
+    "@douyinfe/semi-theme-default": "2.69.0",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
     "vue": "^3.5.12"
@@ -47,8 +47,8 @@
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitejs/plugin-vue": "^5.1.5",
+    "@vitejs/plugin-vue-jsx": "^4.1.0",
     "camelcase": "^6.3.0",
     "del": "^6.0.0",
     "gulp": "^4.0.2",

diff --git a/packages/semi-icons-vue/package.json b/packages/semi-icons-vue/package.json
@@ -22,8 +22,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.68.4",
-    "@douyinfe/semi-theme-default": "2.68.4",
+    "@douyinfe/semi-foundation": "2.69.0",
+    "@douyinfe/semi-theme-default": "2.69.0",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
     "vue": "^3.5.12"
@@ -41,8 +41,8 @@
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitejs/plugin-vue": "^5.1.5",
+    "@vitejs/plugin-vue-jsx": "^4.1.0",
     "camelcase": "^6.3.0",
     "del": "^6.0.0",
     "gulp": "^4.0.2",

diff --git a/packages/semi-illustrations-vue/package.json b/packages/semi-illustrations-vue/package.json
@@ -26,8 +26,8 @@
     "build:icon": "node scripts/build-illustration.cjs"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.68.4",
-    "@douyinfe/semi-theme-default": "2.68.4",
+    "@douyinfe/semi-foundation": "2.69.0",
+    "@douyinfe/semi-theme-default": "2.69.0",
     "classnames": "^2.3.2",
     "vue": "^3.5.12"
   },
@@ -44,8 +44,8 @@
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitejs/plugin-vue": "^5.1.5",
+    "@vitejs/plugin-vue-jsx": "^4.1.0",
     "camelcase": "^6.3.0",
     "del": "^6.0.0",
     "gulp": "^4.0.2",

diff --git a/packages/semi-ui-vue/package.json b/packages/semi-ui-vue/package.json
@@ -24,9 +24,9 @@
     "url": "https://github.com/rashagu/semi-design-vue"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.68.4",
-    "@douyinfe/semi-theme-default": "2.68.4",
-    "@douyinfe/semi-animation": "2.68.4",
+    "@douyinfe/semi-foundation": "2.69.0",
+    "@douyinfe/semi-theme-default": "2.69.0",
+    "@douyinfe/semi-animation": "2.69.0",
     "@kousum/semi-animation-vue": "workspace:*",
     "@kousum/semi-icons-vue": "workspace:*",
     "@kousum/semi-illustrations-vue": "workspace:*",
@@ -73,8 +73,8 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "reset-css": "^5.0.2",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitejs/plugin-vue": "^5.1.5",
+    "@vitejs/plugin-vue-jsx": "^4.1.0",
     "@types/stringify-object": "^4.0.5",
     "del": "^6.0.0",
     "gulp": "^4.0.2",

diff --git a/packages/semi-ui-vue/src/components/chat/chatBox/chatBoxAction.tsx b/packages/semi-ui-vue/src/components/chat/chatBox/chatBoxAction.tsx
@@ -13,7 +13,7 @@ import {
 } from 'vue';
 import * as PropTypes from '../../PropTypes';
 import { CombineProps } from '../../interface';
-import type { ChatBoxProps, Message } from '../interface';
+import type { ChatBoxProps, DefaultActionNodeObj, Message, RenderActionProps } from '../interface';
 import { IconThumbUpStroked,
   IconDeleteStroked,
   IconCopyStroked,
@@ -37,7 +37,7 @@ const { PREFIX_CHAT_BOX_ACTION } = cssClasses;
 const { ROLE, MESSAGE_STATUS } = strings;
 
 interface ChatBoxActionProps extends ChatBoxProps {
-  customRenderFunc?: (props: { message?: Message; defaultActions?: VNode | VNode[]; className: string }) => VNode
+  customRenderFunc?: (props: RenderActionProps) => VNode
   showReset?: boolean
 }
 
@@ -239,17 +239,36 @@ const chatBoxAction = defineComponent({
         [`${PREFIX_CHAT_BOX_ACTION}-hidden`]: !finished,
       });
       const { customRenderFunc } = props;
+
       if (customRenderFunc) {
         const actionNodes = [];
-        complete && actionNodes.push(copyNode());
-        showFeedback && actionNodes.push(likeNode());
-        showFeedback && actionNodes.push(dislikeNode());
-        showReset && actionNodes.push(resetNode());
-        actionNodes.push(deleteNode());
+        const actionNodeObj = {} as DefaultActionNodeObj;
+        if (complete) {
+          const copyNode_ = copyNode();
+          actionNodes.push(copyNode_);
+          actionNodeObj.copyNode = copyNode_;
+        }
+        if (showFeedback) {
+          const likeNode_ = likeNode();
+          actionNodes.push(likeNode_);
+          actionNodeObj.likeNode = likeNode_;
+          const dislikeNode_ = dislikeNode();
+          actionNodes.push(dislikeNode_);
+          actionNodeObj.dislikeNode = dislikeNode_;
+        }
+        if (showReset) {
+          const resetNode_ = resetNode();
+          actionNodes.push(resetNode_);
+          actionNodeObj.resetNode = resetNode_;
+        }
+        const deleteNode_ = deleteNode();
+        actionNodes.push(deleteNode_);
+        actionNodeObj.deleteNode = deleteNode_;
         return customRenderFunc({
           message,
           defaultActions: actionNodes,
-          className: wrapCls
+          className: wrapCls,
+          defaultActionsObj: actionNodeObj
         });
       }
       return <div class={wrapCls} ref={containerRef}>

diff --git a/packages/semi-ui-vue/src/components/chat/chatBox/chatBoxAvatar.tsx b/packages/semi-ui-vue/src/components/chat/chatBox/chatBoxAvatar.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, ref, h, Fragment, useSlots, VNode, PropType } from 'vue';
 import { CombineProps } from '../../interface';
 import Avatar from '../../avatar';
-import { Metadata } from '../interface';
+import type { Message, Metadata, RenderAvatarProps } from '../interface';
 import { cssClasses } from '@douyinfe/semi-foundation/chat/constants';
 import cls from 'classnames';
 
@@ -11,12 +11,14 @@ interface ChatBoxAvatarProps {
   // children?: string;
   role?: Metadata;
   continueSend?: boolean;
-  customRenderFunc?: (props: { role?: Metadata; defaultAvatar?: VNode }) => VNode;
+  message?: Message;
+  customRenderFunc?: (props: RenderAvatarProps) => VNode;
 }
 
 export const vuePropsType: CombineProps<ChatBoxAvatarProps> = {
   role: Object,
   continueSend: Boolean,
+  message: Object,
   customRenderFunc: Function as PropType<ChatBoxAvatarProps['customRenderFunc']>,
 };
 const chatBoxAvatar = defineComponent({
@@ -40,6 +42,7 @@ const chatBoxAvatar = defineComponent({
         return props.customRenderFunc({
           role: props.role,
           defaultAvatar: node,
+          message: props.message
         });
       }
       return node;

diff --git a/packages/semi-ui-vue/src/components/chat/chatBox/chatBoxContent.tsx b/packages/semi-ui-vue/src/components/chat/chatBox/chatBoxContent.tsx
@@ -2,7 +2,7 @@ import { defineComponent, ref, h, Fragment, useSlots, VNode, PropType } from 'vu
 import { CombineProps } from '../../interface';
 
 import cls from 'classnames';
-import { Message, Metadata } from '../interface';
+import { Message, Metadata, RenderContentProps } from '../interface';
 import MarkdownRender from '../../markdownRender';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/chat/constants';
 import { MDXProps } from 'mdx/types';
@@ -19,7 +19,7 @@ interface ChatBoxContentProps {
   children?: string;
   role?: Metadata;
   message?: Message;
-  customRenderFunc?: (props: {message?: Message; role?: Metadata; defaultContent?: VNode | VNode[]; className?: string}) => VNode
+  customRenderFunc?: (props: RenderContentProps) => VNode
 }
 
 export const vuePropsType: CombineProps<ChatBoxContentProps> = {

diff --git a/packages/semi-ui-vue/src/components/chat/chatBox/chatBoxTitle.tsx b/packages/semi-ui-vue/src/components/chat/chatBox/chatBoxTitle.tsx
@@ -1,14 +1,14 @@
 import { defineComponent, ref, h, Fragment, useSlots, VNode, PropType } from 'vue';
 import { CombineProps } from '../../interface';
-import { Message, Metadata } from '../interface';
+import type { Message, Metadata, RenderTitleProps } from '../interface';
 import { cssClasses } from '@douyinfe/semi-foundation/chat/constants';
 const { PREFIX_CHAT_BOX } = cssClasses;
 
 interface ChatBoxTitleProps {
   // children?: VNode | undefined | any;
   role?: Metadata;
   message?: Message;
-  customRenderFunc?: (props: { role?: Metadata; message: Message; defaultTitle?: VNode }) => VNode;
+  customRenderFunc?: (props: RenderTitleProps) => VNode;
 }
 
 export const vuePropsType: CombineProps<ChatBoxTitleProps> = {

diff --git a/packages/semi-ui-vue/src/components/chat/chatBox/index.tsx b/packages/semi-ui-vue/src/components/chat/chatBox/index.tsx
@@ -39,10 +39,11 @@ const index = defineComponent({
         <ChatBoxAvatar
           continueSend={continueSend.value}
           role={info.value}
+          message={props.message}
           customRenderFunc={props.chatBoxRenderConfig.renderChatBoxAvatar}
         />
       );
-    }, [info, () => props.chatBoxRenderConfig.renderChatBoxAvatar]);
+    }, [info, ()=>props.message, () => props.chatBoxRenderConfig.renderChatBoxAvatar]);
 
     const titleNode = useMemo(() => {
       return (
@@ -52,7 +53,7 @@ const index = defineComponent({
           customRenderFunc={props.chatBoxRenderConfig.renderChatBoxTitle}
         />
       );
-    }, [info, () => props.message, ()=>props.chatBoxRenderConfig.renderChatBoxTitle]);
+    }, [info, ()=>props.message, () => props.message, ()=>props.chatBoxRenderConfig.renderChatBoxTitle]);
 
     const contentNode = useMemo(() => {
       return (

diff --git a/packages/semi-ui-vue/src/components/chat/index.tsx b/packages/semi-ui-vue/src/components/chat/index.tsx
@@ -269,7 +269,7 @@ const index = defineComponent({
               if (oldChats.length === 0 || newLastChat.id !== oldLastChat.id) {
                 shouldScroll = true;
               }
-            } else if (newChats.length === oldChats.length &&
+            } else if (newChats.length === oldChats.length && newChats.length &&
               (newLastChat.status !== 'complete' || newLastChat.status !== oldLastChat.status)
             ) {
               shouldScroll = true;

diff --git a/packages/semi-ui-vue/src/components/chat/inputBox/index.tsx b/packages/semi-ui-vue/src/components/chat/inputBox/index.tsx
@@ -161,17 +161,21 @@ const index = defineComponent({
     return () => {
 
       const { onClearContext, renderInputArea: renderInputArea_props, onSend, style, className, showClearContext } = props;
+      const clearNode = renderClearButton();
+      const uploadNode = renderUploadButton();
+      const inputNode = renderInputArea();
+      const sendNode = renderSendButton();
       const nodes = (
         <div class={cls(PREFIX_INPUT_BOX, { [className]: className })} style={style}>
           <div
             class={`${PREFIX_INPUT_BOX}-inner`}
             onClick={onClick}
           >
-            {showClearContext && renderClearButton()}
+            {showClearContext && clearNode}
             <div class={`${PREFIX_INPUT_BOX}-container`}>
-              {renderUploadButton()}
-              {renderInputArea()}
-              {renderSendButton()}
+              {uploadNode}
+              {inputNode}
+              {sendNode}
             </div>
           </div>
         </div>
@@ -181,6 +185,13 @@ const index = defineComponent({
           defaultNode: nodes,
           onClear: onClearContext,
           onSend: onSend,
+          detailProps: {
+            clearContextNode: clearNode,
+            uploadNode: uploadNode,
+            inputNode: inputNode,
+            sendNode: sendNode,
+            onClick: onClick,
+          }
         });
       }
       return nodes;