@yh-ui/components 0.1.17 → 0.1.22

package/dist/ai-chat/index.d.ts

@@ -1,3 +1,166 @@
-export declare const YhAiChat: any;
+import AiChat from './src/ai-chat.vue';
+export declare const YhAiChat: import("@yh-ui/utils").SFCWithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        readonly messages: {
+            readonly type: import("vue").PropType<import("./index.js").AiChatMessage[]>;
+            readonly default: () => never[];
+        };
+        readonly loading: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly suggestions: {
+            readonly type: import("vue").PropType<string[]>;
+            readonly default: () => never[];
+        };
+        readonly virtualScroll: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly virtualHeight: {
+            readonly type: NumberConstructor;
+            readonly default: 400;
+        };
+        readonly estimatedItemHeight: {
+            readonly type: NumberConstructor;
+            readonly default: 80;
+        };
+        readonly themeOverrides: {
+            readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+            readonly default: undefined;
+        };
+    }>> & Readonly<{
+        onClear?: (() => any) | undefined;
+        onSend?: ((message: string) => any) | undefined;
+        "onUpdate:messages"?: ((messages: import("./index.js").AiChatMessage[]) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        clear: () => void;
+        send: (message: string) => void;
+        "update:messages": (messages: import("./index.js").AiChatMessage[]) => void;
+    }, import("vue").PublicProps, {
+        readonly loading: boolean;
+        readonly messages: import("./index.js").AiChatMessage[];
+        readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+        readonly suggestions: string[];
+        readonly virtualScroll: boolean;
+        readonly virtualHeight: number;
+        readonly estimatedItemHeight: number;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        readonly messages: {
+            readonly type: import("vue").PropType<import("./index.js").AiChatMessage[]>;
+            readonly default: () => never[];
+        };
+        readonly loading: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly suggestions: {
+            readonly type: import("vue").PropType<string[]>;
+            readonly default: () => never[];
+        };
+        readonly virtualScroll: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly virtualHeight: {
+            readonly type: NumberConstructor;
+            readonly default: 400;
+        };
+        readonly estimatedItemHeight: {
+            readonly type: NumberConstructor;
+            readonly default: 80;
+        };
+        readonly themeOverrides: {
+            readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+            readonly default: undefined;
+        };
+    }>> & Readonly<{
+        onClear?: (() => any) | undefined;
+        onSend?: ((message: string) => any) | undefined;
+        "onUpdate:messages"?: ((messages: import("./index.js").AiChatMessage[]) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        readonly loading: boolean;
+        readonly messages: import("./index.js").AiChatMessage[];
+        readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+        readonly suggestions: string[];
+        readonly virtualScroll: boolean;
+        readonly virtualHeight: number;
+        readonly estimatedItemHeight: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    readonly messages: {
+        readonly type: import("vue").PropType<import("./index.js").AiChatMessage[]>;
+        readonly default: () => never[];
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly suggestions: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly default: () => never[];
+    };
+    readonly virtualScroll: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly virtualHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 400;
+    };
+    readonly estimatedItemHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 80;
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onSend?: ((message: string) => any) | undefined;
+    "onUpdate:messages"?: ((messages: import("./index.js").AiChatMessage[]) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => void;
+    send: (message: string) => void;
+    "update:messages": (messages: import("./index.js").AiChatMessage[]) => void;
+}, string, {
+    readonly loading: boolean;
+    readonly messages: import("./index.js").AiChatMessage[];
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly suggestions: string[];
+    readonly virtualScroll: boolean;
+    readonly virtualHeight: number;
+    readonly estimatedItemHeight: number;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        header?: (props: {}) => any;
+    } & {
+        message?: (props: {
+            message: import("./index.js").AiChatMessage;
+            index: number;
+        }) => any;
+    } & {
+        message?: (props: {
+            message: import("./index.js").AiChatMessage;
+            index: number;
+        }) => any;
+    } & {
+        loading?: (props: {}) => any;
+    } & {
+        sender?: (props: {}) => any;
+    };
+})> & Record<string, unknown>;
 export default YhAiChat;
 export * from './src/ai-chat';
+export type AiChatInstance = InstanceType<typeof AiChat>;

package/dist/ai-chat/src/ai-chat.cjs

@@ -26,6 +26,27 @@ const aiChatProps = exports.aiChatProps = {
     type: Array,
     default: () => []
   },
+  /**
+   * @description 是否启用虚拟滚动 (大数据量时开启)
+   */
+  virtualScroll: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 虚拟滚动 - 容器高度
+   */
+  virtualHeight: {
+    type: Number,
+    default: 400
+  },
+  /**
+   * @description 虚拟滚动 - 每一项的预估高度
+   */
+  estimatedItemHeight: {
+    type: Number,
+    default: 80
+  },
   /**
    * @description 主题覆盖变量
    */

package/dist/ai-chat/src/ai-chat.css

@@ -473,6 +473,31 @@ html.dark {
   gap: var(--yh-spacing-sm);
 }
 
+.yh-ai-chat__clear-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--yh-text-color-secondary);
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.yh-ai-chat__clear-btn .yh-icon {
+  font-size: 14px;
+  color: inherit;
+}
+.yh-ai-chat__clear-btn:hover {
+  color: var(--yh-text-color-primary);
+  background-color: var(--yh-fill-color-light);
+  border-radius: 999px;
+}
+
 .yh-ai-chat__content {
   flex: 1;
   overflow-y: auto;

package/dist/ai-chat/src/ai-chat.d.ts

@@ -40,6 +40,27 @@ export declare const aiChatProps: {
         readonly type: PropType<string[]>;
         readonly default: () => never[];
     };
+    /**
+     * @description 是否启用虚拟滚动 (大数据量时开启)
+     */
+    readonly virtualScroll: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * @description 虚拟滚动 - 容器高度
+     */
+    readonly virtualHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 400;
+    };
+    /**
+     * @description 虚拟滚动 - 每一项的预估高度
+     */
+    readonly estimatedItemHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 80;
+    };
     /**
      * @description 主题覆盖变量
      */

package/dist/ai-chat/src/ai-chat.mjs

@@ -20,6 +20,27 @@ export const aiChatProps = {
     type: Array,
     default: () => []
   },
+  /**
+   * @description 是否启用虚拟滚动 (大数据量时开启)
+   */
+  virtualScroll: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 虚拟滚动 - 容器高度
+   */
+  virtualHeight: {
+    type: Number,
+    default: 400
+  },
+  /**
+   * @description 虚拟滚动 - 每一项的预估高度
+   */
+  estimatedItemHeight: {
+    type: Number,
+    default: 80
+  },
   /**
    * @description 主题覆盖变量
    */

package/dist/ai-chat/src/ai-chat.vue

@@ -1,12 +1,13 @@
 <script setup>
 import { useNamespace, useLocale } from "@yh-ui/hooks";
-import { ref, watch, nextTick } from "vue";
+import { ref, watch, nextTick, computed } from "vue";
 import YhAiSender from "../../ai-sender/src/ai-sender.vue";
 import YhAiBubble from "../../ai-bubble/src/ai-bubble.vue";
 import { YhButton } from "../../button";
 import { YhIcon } from "../../icon";
 import { aiChatProps, aiChatEmits } from "./ai-chat";
 import { useComponentTheme } from "@yh-ui/theme";
+import { useVirtualScroll } from "@yh-ui/hooks";
 defineOptions({
   name: "YhAiChat"
 });
@@ -16,9 +17,18 @@ const ns = useNamespace("ai-chat");
 const { t } = useLocale();
 const { themeStyle } = useComponentTheme("ai-chat", props.themeOverrides);
 const contentRef = ref();
+const virtualScrollEnabled = computed(() => props.virtualScroll && props.messages.length > 50);
+const { visibleItems, totalHeight, offsetY, startIndex, onScroll, scrollToIndex } = useVirtualScroll({
+  items: computed(() => props.messages),
+  itemHeight: props.estimatedItemHeight,
+  containerHeight: props.virtualHeight,
+  overscan: 5
+});
 const scrollToBottom = () => {
   nextTick(() => {
-    if (contentRef.value) {
+    if (virtualScrollEnabled.value && props.messages.length > 0) {
+      scrollToIndex(props.messages.length - 1);
+    } else if (contentRef.value) {
       contentRef.value.scrollTop = contentRef.value.scrollHeight;
     }
   });
@@ -40,7 +50,13 @@ const handleClear = () => {
     <div :class="ns.e('header')" v-if="$slots.header || props.messages.length > 0">
       <slot name="header">
         <div :class="ns.e('header-tools')">
-          <YhButton v-if="props.messages.length > 0" size="small" text @click="handleClear">
+          <YhButton
+            v-if="props.messages.length > 0"
+            size="small"
+            text
+            :class="ns.e('clear-btn')"
+            @click="handleClear"
+          >
             <template #icon>
               <YhIcon name="delete" />
             </template>
@@ -51,7 +67,15 @@ const handleClear = () => {
     </div>
 
     <!-- Messages List -->
-    <div :class="ns.e('content')" ref="contentRef">
+    <div
+      :class="ns.e('content')"
+      ref="contentRef"
+      :style="virtualScrollEnabled ? {
+  height: props.virtualHeight + 'px',
+  overflow: 'auto'
+} : {}"
+      @scroll="virtualScrollEnabled ? onScroll($event) : void 0"
+    >
       <div
         v-if="props.messages.length === 0 && props.suggestions.length > 0"
         :class="ns.e('suggestions')"
@@ -67,18 +91,46 @@ const handleClear = () => {
         </YhButton>
       </div>
 
-      <template v-for="(msg, index) in props.messages" :key="msg.id || index">
-        <slot name="message" :message="msg" :index="index">
-          <!-- We use the powerful markdown rendering by default on the bubbles inside AiChat -->
-          <YhAiBubble
-            :content="msg.content"
-            :role="msg.role"
-            :loading="msg.status === 'generating' || msg.status === 'loading'"
-            :variant="msg.role === 'assistant' ? 'borderless' : 'filled'"
-            :time="msg.time"
-            :markdown="true"
-          />
-        </slot>
+      <!-- Virtual Scroll Mode -->
+      <template v-if="virtualScrollEnabled">
+        <div :style="{
+  height: totalHeight + 'px',
+  position: 'relative'
+}">
+          <div :style="{
+  transform: `translateY(${offsetY}px)`
+}">
+            <template v-for="(msg, index) in visibleItems" :key="msg.id || startIndex + index">
+              <slot name="message" :message="msg" :index="startIndex + index">
+                <YhAiBubble
+                  :content="msg.content"
+                  :role="msg.role"
+                  :loading="msg.status === 'generating' || msg.status === 'loading'"
+                  :variant="msg.role === 'assistant' ? 'borderless' : 'filled'"
+                  :time="msg.time"
+                  :markdown="true"
+                />
+              </slot>
+            </template>
+          </div>
+        </div>
+      </template>
+
+      <!-- Normal Mode -->
+      <template v-else>
+        <template v-for="(msg, index) in props.messages" :key="msg.id || index">
+          <slot name="message" :message="msg" :index="index">
+            <!-- We use the powerful markdown rendering by default on the bubbles inside AiChat -->
+            <YhAiBubble
+              :content="msg.content"
+              :role="msg.role"
+              :loading="msg.status === 'generating' || msg.status === 'loading'"
+              :variant="msg.role === 'assistant' ? 'borderless' : 'filled'"
+              :time="msg.time"
+              :markdown="true"
+            />
+          </slot>
+        </template>
       </template>
 
       <!-- Loading Placeholder -->
@@ -575,6 +627,31 @@ html.dark {
   gap: var(--yh-spacing-sm);
 }
 
+.yh-ai-chat__clear-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--yh-text-color-secondary);
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.yh-ai-chat__clear-btn .yh-icon {
+  font-size: 14px;
+  color: inherit;
+}
+.yh-ai-chat__clear-btn:hover {
+  color: var(--yh-text-color-primary);
+  background-color: var(--yh-fill-color-light);
+  border-radius: 999px;
+}
+
 .yh-ai-chat__content {
   flex: 1;
   overflow-y: auto;

package/dist/ai-chat/src/ai-chat.vue.d.ts

@@ -1,15 +1,20 @@
 declare var __VLS_1: {}, __VLS_23: {
-    message: any;
-    index: any;
-}, __VLS_28: {}, __VLS_33: {};
+    message: import("./ai-chat").AiChatMessage;
+    index: number;
+}, __VLS_28: {
+    message: import("./ai-chat").AiChatMessage;
+    index: number;
+}, __VLS_33: {}, __VLS_38: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
     message?: (props: typeof __VLS_23) => any;
 } & {
-    loading?: (props: typeof __VLS_28) => any;
+    message?: (props: typeof __VLS_28) => any;
 } & {
-    sender?: (props: typeof __VLS_33) => any;
+    loading?: (props: typeof __VLS_33) => any;
+} & {
+    sender?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     readonly messages: {
@@ -24,15 +29,67 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         readonly type: import("vue").PropType<string[]>;
         readonly default: () => never[];
     };
+    readonly virtualScroll: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly virtualHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 400;
+    };
+    readonly estimatedItemHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 80;
+    };
     readonly themeOverrides: {
         readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
         readonly default: undefined;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
-    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => void;
+    send: (message: string) => void;
+    "update:messages": (messages: import("./ai-chat").AiChatMessage[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly messages: {
+        readonly type: import("vue").PropType<import("./ai-chat").AiChatMessage[]>;
+        readonly default: () => never[];
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly suggestions: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly default: () => never[];
+    };
+    readonly virtualScroll: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly virtualHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 400;
+    };
+    readonly estimatedItemHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 80;
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onSend?: ((message: string) => any) | undefined;
+    "onUpdate:messages"?: ((messages: import("./ai-chat").AiChatMessage[]) => any) | undefined;
+}>, {
     readonly loading: boolean;
     readonly messages: import("./ai-chat").AiChatMessage[];
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
     readonly suggestions: string[];
+    readonly virtualScroll: boolean;
+    readonly virtualHeight: number;
+    readonly estimatedItemHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;