docs: fix slot warning of setup demo (#372)

Author: wzc520pyfm

docs/examples-setup/bubble/bubble-custom.vue

@@ -27,7 +27,7 @@ const roles: BubbleListProps['roles'] = {
       },
     },
     loadingRender: () =>
-      h(Space, null, [h(Spin, { size: 'small' }), 'Custom loading...']),
+      h(Space, null, () => [h(Spin, { size: 'small' }), 'Custom loading...']),
   },
   user: {
     placement: 'end',
@@ -49,7 +49,7 @@ const listRef = ref<InstanceType<typeof BubbleList>>(null);
         key: 'welcome',
         role: 'ai',
         content: 'Mock welcome content. '.repeat(10),
-        footer: h(Flex, null, [
+        footer: h(Flex, null, () => [
           h(Button, {
             size: 'small',
             type: 'text',

docs/examples-setup/bubble/list-custom.vue

@@ -33,7 +33,7 @@ const roles: BubbleListProps['roles'] = {
       h(
         Flex,
         { vertical: true, gap: 'middle' },
-        items.map((item: any) =>
+        () => items.map((item: any) =>
           h(Attachments.FileCard, { key: item.uid, item: item }),
         ),
       ),
@@ -56,7 +56,7 @@ const roles: BubbleListProps['roles'] = {
       {
         key: 1,
         role: 'ai',
-        content: h(Typography.Text, { type: 'danger' }, 'ReactNode message'),
+        content: h(Typography.Text, { type: 'danger' }, () => 'ReactNode message'),
       },
 
       // Role: suggestion

docs/examples-setup/bubble/list.vue

@@ -25,8 +25,8 @@ const rolesAsObject: BubbleListProps['roles'] = {
 
 const rolesAsFunction = (bubbleData: BubbleProps, index: number) => {
   const RenderIndex: BubbleProps['messageRender'] = (content) =>
-    h(Flex, null, [h('text', null, `#${index}: ${content}`)]);
-  switch (bubbleData.role) {
+    h(Flex, null, () => [h('text', null, `#${index}: ${content}`)]);
+    switch (bubbleData.role) {
     case 'ai':
       return {
         placement: 'start' as const,

docs/examples-setup/sender/headerFixed.vue

@@ -2,7 +2,7 @@
 import { EnterOutlined } from '@ant-design/icons-vue';
 import { App, Flex, Space, Switch, Typography, message } from 'ant-design-vue';
 import { Sender } from 'ant-design-x-vue';
-import { computed, ref, h } from 'vue';
+import { ref, h } from 'vue';
 
 defineOptions({ name: 'AXSenderHeaderFixedSetup' });
 
@@ -11,16 +11,16 @@ const hasRef = ref(true);
 const [messageApi, contextHolder] = message.useMessage();
 
 const toggleChecked = () => {
-  hasRef.value =!hasRef.value; 
+  hasRef.value =!hasRef.value;
 }
 
-const openChange = (v) => {
+const openChange = (v: boolean) => {
   hasRef.value = v;
 }
 
-const headerTitle = h(Space, {}, [
+const headerTitle = h(Space, {}, () => [
   h(EnterOutlined),
-  h(Typography.Text, { type: 'secondary' }, '"Tell more about Ant Design X"')
+  h(Typography.Text, { type: 'secondary' }, () => '"Tell more about Ant Design X"')
 ])
 </script>
 <template>

docs/examples-setup/sender/pasteImage.vue

@@ -1,19 +1,24 @@
 <script setup lang="ts">
 import { CloudUploadOutlined, LinkOutlined } from '@ant-design/icons-vue';
 import { App, Button, Flex } from 'ant-design-vue';
-import { Attachments, Sender } from 'ant-design-x-vue';
-import { computed, ref, h } from 'vue';
+import { Attachments, AttachmentsProps, Sender, SenderProps } from 'ant-design-x-vue';
+import { ref, h } from 'vue';
 
 defineOptions({ name: 'AXSenderPasteImageSetup' });
 
+type GetFunction<T> = T extends (...args: any[]) => any ? T : never;
+type PlaceholderType = Parameters<GetFunction<AttachmentsProps['placeholder']>>[0];
+type PastFile = SenderProps['onPasteFile'];
+type FileChange = AttachmentsProps['onChange'];
+
 const open = ref(false);
 const items = ref([]);
 const text = ref('');
 
 const attachmentsRef = ref(null);
 const senderRef = ref<InstanceType<typeof Sender>>(null);
 
-const placeholder = (type) =>
+const placeholder = (type: PlaceholderType) =>
   type === 'drop'
     ? {
       title: 'Drop file here',
@@ -26,7 +31,7 @@ const placeholder = (type) =>
 
 const getDropContainer = () => senderRef.value?.nativeElement;
 
-const pastFile = (_, files) => {
+const pastFile: PastFile = (_, files) => {
   console.log("past")
   for (const file of files) {
     attachmentsRef.value?.upload(file);
@@ -36,10 +41,10 @@ const pastFile = (_, files) => {
 
 const submit = () => {
   items.value = [];
-  text.value = ''; 
+  text.value = '';
 }
 
-const fileChange = ({ fileList }) => items.value = fileList
+const fileChange: FileChange = ({ fileList }) => items.value = fileList
 </script>
 <template>
   <App>

docs/examples-setup/sender/speechCustom.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import { App, message } from 'ant-design-vue';
-import { Sender } from 'ant-design-x-vue';
+import { Sender, SenderProps } from 'ant-design-x-vue';
 import { ref, computed } from 'vue';
 
 defineOptions({ name: 'AXSenderSpeechCustomSetup' });
 
+type SpeechConfig = SenderProps['allowSpeech'];
+
 const [messageApi, contextHolder] = message.useMessage();
 const recording = ref(false);
 
 const submit = () => {
   messageApi.success('Send message successfully!');
 }
 
-const speechConfig = computed(
+const speechConfig = computed<SpeechConfig>(
   () => ({
     // When setting `recording`, the built-in speech recognition feature will be disabled
     recording: recording.value,

docs/examples-setup/use-x-agent/preset.vue

@@ -87,7 +87,7 @@ async function request() {
               status === 'error' &&
               agent.config.baseURL === BASE_URL + PATH &&
               'Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.',
-            content: h(Descriptions, { column: 1 }, [
+            content: h(Descriptions, { column: 1 }, () => [
               h(
                 Descriptions.Item,
                 {

docs/examples-setup/x-request/basic.vue

@@ -74,7 +74,7 @@ async function request() {
             status === 'error' &&
             exampleRequest.baseURL === BASE_URL + PATH &&
             'Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.',
-          content: h(Descriptions, { column: 1 }, [
+          content: h(Descriptions, { column: 1 }, () => [
             h(Descriptions.Item, { label: 'Status' }, status || '-'),
             h(Descriptions.Item, { label: 'Update Times' }, lines.length.toString())
           ]),

src/bubble/interface.ts

@@ -15,7 +15,7 @@ export interface TypingOption {
   /**
    * @default null
    */
-  suffix?: VNode;
+  suffix?: VNode | string;
 }
 
 export type SemanticType = 'avatar' | 'content' | 'header' | 'footer';