@opentiny/tiny-robot 0.1.0-alpha.0 → 0.1.0

package/src/question/vars.less

@@ -0,0 +1,135 @@
+/* ----------------- 颜色变量 ----------------- */
+:root {
+  /* 主题基础颜色 */
+  --tr-question-primary-color: #1890ff;
+  --tr-question-background-color: #ffffff;
+  --tr-question-modal-background-color: #ffffff;
+  --tr-question-text-color: #333333;
+  --tr-question-text-color-secondary: #666666;
+  --tr-question-border-color: #e8e8e8;
+  --tr-question-hover-color: #f5f5f5;
+  --tr-question-tab-hover-bg: #f0f0f0;
+  --tr-question-active-tab-color: var(--tr-question-primary-color);
+  --tr-question-active-tab-bg: #e6f7ff;
+
+  /* 弹窗相关颜色 */
+  --tr-question-header-bg: #f9f9f9;
+  --tr-question-title-color: #1d2129;
+  --tr-question-close-icon-color: #86909c;
+  --tr-question-tab-active-bg: #e8f3ff;
+  --tr-question-tab-active-text: #1890ff;
+  --tr-question-tab-text: #4e5969;
+  --tr-question-tab-border: #f0f0f0;
+  --tr-question-list-divider-color: #f0f0f0;
+  --tr-question-modal-backdrop-color: rgba(0, 0, 0, 0.5);
+  
+  /* 常见问题颜色 */
+  --tr-question-common-bg: #fff;
+  --tr-question-common-text: #191919;
+  --tr-question-common-hover-bg: #ebebeb;
+  --tr-question-common-shadow: rgba(0, 0, 0, 0.04);
+  
+  /* 背景颜色 */
+  --tr-question-container-bg: #f8f8f8;
+  --tr-question-list-item-bg: #fff;
+  --tr-question-list-hover-shadow: rgba(0, 0, 0, 0.08);
+  --tr-question-category-bg: rgba(0, 0, 0, 0.04);
+  --tr-question-category-hover-bg: rgba(0, 0, 0, 0.08);
+  --tr-question-category-active-border: #191919;
+  --tr-question-item-border-color: rgba(0, 0, 0, 0.04);
+  
+  /* 滚动条颜色 */
+  --tr-question-scrollbar-track-bg: rgba(16, 31, 28, 0.1);
+  --tr-question-scrollbar-thumb-bg: rgba(144, 147, 153, 0.5);
+  --tr-question-scrollbar-thumb-hover-bg: rgba(144, 147, 153, 0.3);
+
+  /* ----------------- 尺寸变量 ----------------- */
+  /* 圆角 */
+  --tr-question-border-radius: 24px;
+  --tr-question-category-border-radius: 8px;
+  --tr-question-list-border-radius: 12px;
+  --tr-question-common-border-radius: 16px;
+  --tr-question-scrollbar-border-radius: 2em;
+  
+  /* 间距和尺寸 */
+  --tr-question-spacing: 16px;
+  --tr-question-icon-size: 16px;
+  --tr-question-container-height: 46px;
+  --tr-question-item-height: 56px;
+  --tr-question-trigger-size: 32px;
+  --tr-question-common-item-height: 32px;
+  --tr-question-category-height: 38px;
+  --tr-question-scrollbar-width: 4px;
+  --tr-question-modal-padding: 24px;
+  --tr-question-modal-max-height: 80vh;
+  --tr-question-modal-max-width: 640px;
+  --tr-question-content-max-height: calc(80vh - 120px);
+
+  /* ----------------- 文字变量 ----------------- */
+  /* 字体 */
+  --tr-question-font-size: 14px;
+  --tr-question-title-font-size: 18px;
+  --tr-question-title-font-weight: 600;
+  --tr-question-item-font-weight: 400;
+  --tr-question-line-height: 1.5;
+  --tr-question-item-line-height: 22px;
+
+  /* ----------------- 特效变量 ----------------- */
+  /* 阴影 */
+  --tr-question-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --tr-question-trigger-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+  --tr-question-common-item-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+  --tr-question-list-item-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  --tr-question-wrap-trigger-shadow: 2px 0 9px rgba(0, 0, 0, 0.04);
+
+  /* 动画 */
+  --tr-question-transition-duration: 0.3s;
+  --tr-question-transition-timing: ease;
+  --tr-question-hover-transition: all var(--tr-question-transition-duration) var(--tr-question-transition-timing);
+}
+
+/* ----------------- 暗色主题变量 ----------------- */
+[data-theme='dark'] {
+  /* 主题基础颜色 */
+  --tr-question-primary-color: #177ddc;
+  --tr-question-background-color: #1f1f1f;
+  --tr-question-modal-background-color: #2a2a2a;
+  --tr-question-text-color: #f0f0f0;
+  --tr-question-text-color-secondary: #aaaaaa;
+  --tr-question-border-color: #434343;
+  --tr-question-hover-color: #303030;
+  --tr-question-tab-hover-bg: #3a3a3a;
+  --tr-question-active-tab-color: var(--tr-question-primary-color);
+  --tr-question-active-tab-bg: #113a5c;
+
+  /* 弹窗相关颜色 */
+  --tr-question-header-bg: #2a2a2a;
+  --tr-question-title-color: #c9d1d9;
+  --tr-question-close-icon-color: #8b949e;
+  --tr-question-tab-active-bg: #30363d;
+  --tr-question-tab-active-text: #58a6ff;
+  --tr-question-tab-text: #8b949e;
+  --tr-question-tab-border: #30363d;
+  --tr-question-list-divider-color: #30363d;
+  --tr-question-modal-backdrop-color: rgba(0, 0, 0, 0.7);
+  
+  /* 常见问题颜色 */
+  --tr-question-common-bg: #2a2a2a;
+  --tr-question-common-text: #e6e6e6;
+  --tr-question-common-hover-bg: #3a3a3a;
+  --tr-question-common-shadow: rgba(0, 0, 0, 0.2);
+  
+  /* 背景颜色 */
+  --tr-question-container-bg: #141414;
+  --tr-question-list-item-bg: #2a2a2a;
+  --tr-question-list-hover-shadow: rgba(0, 0, 0, 0.3);
+  --tr-question-category-bg: rgba(255, 255, 255, 0.04);
+  --tr-question-category-hover-bg: rgba(255, 255, 255, 0.08);
+  --tr-question-category-active-border: #e6e6e6;
+  --tr-question-item-border-color: rgba(255, 255, 255, 0.04);
+  
+  /* 滚动条颜色 */
+  --tr-question-scrollbar-track-bg: rgba(255, 255, 255, 0.05);
+  --tr-question-scrollbar-thumb-bg: rgba(255, 255, 255, 0.2);
+  --tr-question-scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.3);
+}

package/src/sender/components/ActionButtons.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { TinyButton, TinyTooltip } from '@opentiny/vue'
+import TinyButton from '@opentiny/vue-button'
 import { IconClose } from '@opentiny/vue-icon'
 import { ActionButtonsProps } from '../index.type'
 
@@ -46,41 +46,32 @@ const props = withDefaults(defineProps<ActionButtonsProps>(), {
   submitType: 'enter',
 })
 
-const emit = defineEmits({
+const emit = defineEmits<{
   /**
    * 清除内容事件
    */
-  clear: () => true,
+  (e: 'clear'): void
   /**
    * 切换语音识别状态事件
-   * @param {boolean} state - 新的语音识别状态
    */
-  'toggle-speech': (state: boolean) => Boolean(state),
+  (e: 'toggle-speech', state: boolean): void
   /**
    * 提交内容事件
    */
-  submit: () => true,
-})
+  (e: 'submit'): void
+  /**
+   * 取消发送事件，用于取消加载状态
+   */
+  (e: 'cancel'): void
+}>()
 
 /**
  * 是否启用语音功能
  */
 const speechEnabled = computed(() => props.allowSpeech)
 
-/**
- * 语音按钮提示文本
- */
-const speechButtonText = computed(() => (props.speechStatus.isRecording ? '停止录音' : '开始语音输入'))
-
 const isSpeechRecording = computed(() => props.speechStatus.isRecording)
 
-/**
- * 提交按钮tooltip
- */
-const submitTooltip = computed(() => {
-  return props.loading ? `发送中...` : '发送消息'
-})
-
 /**
  * 整体禁用状态
  */
@@ -113,6 +104,15 @@ const handleSubmit = () => {
     emit('submit')
   }
 }
+
+/**
+ * 处理取消操作
+ */
+const handleCancel = () => {
+  if (!isDisabled.value) {
+    emit('cancel')
+  }
+}
 </script>
 
 <template>
@@ -128,18 +128,16 @@ const handleSubmit = () => {
 
     <!-- 语音按钮：仅在启用语音功能时显示 -->
     <template v-if="speechEnabled && !loading">
-      <tiny-tooltip :content="speechButtonText" placement="top">
-        <tiny-button
-          type="text"
-          :disabled="isDisabled"
-          @click="handleToggleSpeech"
-          class="speech-button"
-          :class="{ 'is-recording': isSpeechRecording }"
-        >
-          <img v-if="!isSpeechRecording" src="../../assets/icons/voice.svg" class="button-icon" alt="录音" />
-          <img v-else src="../../assets/icons/loading-speech.svg" class="button-icon recording-icon" alt="语音中" />
-        </tiny-button>
-      </tiny-tooltip>
+      <tiny-button
+        type="text"
+        :disabled="isDisabled"
+        @click="handleToggleSpeech"
+        class="speech-button"
+        :class="{ 'is-recording': isSpeechRecording }"
+      >
+        <img v-if="!isSpeechRecording" src="../../assets/icons/voice.svg" class="button-icon" alt="录音" />
+        <img v-else src="../../assets/icons/loading-speech.svg" class="button-icon recording-icon" alt="语音中" />
+      </tiny-button>
     </template>
 
     <template v-if="showClear">
@@ -152,14 +150,19 @@ const handleSubmit = () => {
 
     <!-- 提交按钮：主操作按钮 -->
     <template v-if="hasContent || loading">
-      <tiny-tooltip :content="submitTooltip" placement="top">
-        <tiny-button type="text" @click="handleSubmit" class="submit-button" :disabled="isDisabled">
-          <div class="button-content">
-            <img v-if="!loading" src="../../assets/icons/send.svg" alt="发送" />
-            <img v-else src="../../assets/icons/loading.svg" alt="加载中" class="loading" />
-          </div>
-        </tiny-button>
-      </tiny-tooltip>
+      <tiny-button
+        type="text"
+        :class="loading ? 'cancel-button' : 'submit-button'"
+        :disabled="isDisabled"
+        @click="loading ? handleCancel() : handleSubmit()"
+      >
+        <div class="button-content">
+          <img v-if="!loading" src="../../assets/icons/send.svg" alt="发送" />
+          <tiny-tooltip v-else content="停止生成" placement="top">
+            <img src="../../assets/icons/loading.svg" alt="加载中" class="loading" />
+          </tiny-tooltip>
+        </div>
+      </tiny-button>
     </template>
   </div>
 </template>

package/src/sender/composables/useInputHandler.ts

@@ -1,5 +1,4 @@
 import { ref, watch } from 'vue'
-import { debounce } from 'lodash-es'
 import type { SenderProps, SenderEmits } from '../index.type'
 
 /**
@@ -10,7 +9,7 @@ import type { SenderProps, SenderEmits } from '../index.type'
  * @param emit  组件方法
  */
 export function useInputHandler(props: SenderProps, emit: SenderEmits) {
-  const inputValue = ref(props.defaultValue || '')
+  const inputValue = ref(props.modelValue || props.defaultValue || '')
   const inputWrapper = ref<HTMLElement | null>(null)
 
   // 同步外部值变化
@@ -23,23 +22,29 @@ export function useInputHandler(props: SenderProps, emit: SenderEmits) {
     },
   )
 
+  // 监听内部值变化，触发update:modelValue事件
+  watch(
+    () => inputValue.value,
+    (val) => {
+      emit('update:modelValue', val)
+    },
+  )
+
   // 双向绑定处理
   const handleChange = (value: string) => {
     inputValue.value = value
     emit('update:modelValue', value)
   }
 
-  // 防抖提交
-  const debouncedSubmit = debounce((value: string) => {
-    if (!props.disabled && !props.loading && value.trim()) {
-      emit('submit', value)
-    }
-  }, props.debounceSubmit)
-
   // 提交处理
   const handleSubmit = (event?: Event) => {
     event?.preventDefault()
-    debouncedSubmit(inputValue.value)
+
+    const submitValue = inputValue.value
+
+    if (!props.disabled && !props.loading && submitValue.trim()) {
+      emit('submit', submitValue)
+    }
   }
 
   // 清空输入

package/src/sender/composables/useKeyboardHandler.ts

@@ -34,7 +34,6 @@ export function useKeyboardHandler(
    */
   const triggerSubmit = () => {
     if (!validateSubmission(inputValue.value)) return
-    alert('提交成功')
     emit('submit', inputValue.value.trim())
   }
 
@@ -42,6 +41,12 @@ export function useKeyboardHandler(
    * 检查是否为指定的提交快捷键
    * @param event 键盘事件
    * @param submitType 提交类型
+   * @returns 是否触发提交
+   *
+   * 提交行为说明：
+   * - 当 submitType 为 enter 时：按 Enter 键提交
+   * - 当 submitType 为 ctrlEnter 时：按 Ctrl+Enter 提交，单独按 Enter 换行
+   * - 当 submitType 为 shiftEnter 时：按 Shift+Enter 提交，单独按 Enter 换行
    */
   const checkSubmitShortcut = (event: KeyboardEvent, submitType: SubmitTrigger): boolean => {
     const isEnter = event.key === 'Enter'
@@ -49,13 +54,10 @@ export function useKeyboardHandler(
 
     switch (submitType) {
       case 'enter':
-        console.log('enter')
         return !event.shiftKey && !event.ctrlKey && !event.metaKey
       case 'ctrlEnter':
-        console.log('ctrlEnter')
         return (event.ctrlKey || event.metaKey) && !event.shiftKey
       case 'shiftEnter':
-        console.log('shiftEnter')
         return event.shiftKey && !event.ctrlKey && !event.metaKey
       default:
         return false

package/src/sender/composables/useSpeechHandler.ts

@@ -1,13 +1,6 @@
 import { reactive } from 'vue'
 import type { SpeechHookOptions, SpeechHandler, SpeechState } from '../index.type'
 
-declare global {
-  interface Window {
-    webkitSpeechRecognition: typeof SpeechRecognition
-    SpeechRecognition: typeof SpeechRecognition
-  }
-}
-
 /**
  * 语音识别处理 Hook
  * 集中管理语音识别相关逻辑
@@ -19,17 +12,18 @@ export function useSpeechHandler(options: SpeechHookOptions): SpeechHandler {
   // 语音识别状态
   const speechState = reactive<SpeechState>({
     isRecording: false,
-    isSupported: 'webkitSpeechRecognition' in window || 'SpeechRecognition' in window,
+    isSupported:
+      (typeof window !== 'undefined' && 'webkitSpeechRecognition' in window) || 'SpeechRecognition' in window,
     error: undefined,
   })
 
   // 创建语音识别实例
-  const recognition = speechState.isSupported
+  const recognition: SpeechRecognition | undefined = speechState.isSupported
     ? new (window.webkitSpeechRecognition || window.SpeechRecognition)()
-    : null
+    : undefined
 
   // 初始化语音识别配置
-  if (recognition) {
+  if (recognition !== undefined) {
     recognition.continuous = options.continuous ?? false
     recognition.interimResults = options.interimResults ?? true
     recognition.lang = options.lang ?? navigator.language

package/src/sender/index.less

@@ -2,13 +2,9 @@
 
 // 主要组件样式
 .tiny-sender {
-  border: 1px solid var(--tr-sender-border-color);
-  border-radius: var(--tr-sender-border-radius);
   background: var(--tr-sender-bg-color);
   position: relative;
   color: var(--tr-sender-text-color);
-  padding: var(--tr-sender-padding-top) var(--tr-sender-padding-right) var(--tr-sender-padding-bottom)
-    var(--tr-sender-padding-left);
 
   // TinyUI 输入框调整
   .tiny-input__prefix {
@@ -166,11 +162,12 @@
     min-width: var(--tr-sender-prefix-min-width);
     flex: 0 0 var(--tr-sender-prefix-width); /* 固定宽度，不可伸缩 */
     display: flex;
-    align-items: center;
+    align-items: start;
     justify-content: center;
     background: var(--tr-sender-bg-color);
     border-radius: var(--tr-sender-border-radius) 0 0 var(--tr-sender-border-radius);
     transition: background-color var(--tr-sender-transition-duration);
+    padding-top: 8px;
     padding-left: var(--tr-sender-prefix-padding-left);
     padding-right: calc(var(--tr-sender-padding-right) / 2);
 
@@ -290,6 +287,7 @@
     var(--tr-sender-padding-left);
   background: var(--tr-sender-bg-color);
   border-radius: var(--tr-sender-border-radius);
+  align-items: center;
 
   /* 按钮图标统一样式 */
   .button-icon {

package/src/sender/index.type.ts

@@ -31,7 +31,6 @@ export interface SenderProps {
   clearable?: boolean // 是否显示清除按钮
   disabled?: boolean // 禁用状态
   defaultValue?: string | null // 默认值
-  debounceSubmit?: number // 提交防抖时间(ms)
   loading?: boolean // 加载状态
   modelValue?: string // 双向绑定值
   mode?: InputMode // 输入框模式：单行/多行
@@ -72,6 +71,7 @@ export type SenderEmits = {
   (e: 'focus', event: FocusEvent): void
   (e: 'blur', event: FocusEvent): void
   (e: 'escape-press'): void // 按下Esc键时触发
+  (e: 'cancel'): void // 取消发送状态时触发
 }
 
 // 语音识别状态

package/src/sender/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { TinyInput } from '@opentiny/vue'
+import TinyInput from '@opentiny/vue-input'
 import type { SenderProps, SenderEmits, InputHandler, KeyboardHandler } from './index.type'
 import { useInputHandler } from './composables/useInputHandler'
 import { useKeyboardHandler } from './composables/useKeyboardHandler'
@@ -15,7 +15,6 @@ const props = withDefaults(defineProps<SenderProps>(), {
   allowFiles: false,
   clearable: false,
   disabled: false,
-  debounceSubmit: 300,
   loading: false,
   modelValue: '',
   mode: 'single',
@@ -224,6 +223,7 @@ defineExpose({
                 @clear="clearInput"
                 @toggle-speech="toggleSpeech"
                 @submit="triggerSubmit"
+                @cancel="$emit('cancel')"
               />
             </div>
           </div>
@@ -259,6 +259,7 @@ defineExpose({
                   @clear="clearInput"
                   @toggle-speech="toggleSpeech"
                   @submit="triggerSubmit"
+                  @cancel="$emit('cancel')"
                 />
               </div>
             </div>

package/src/welcome/index.type.ts

@@ -0,0 +1,12 @@
+import { VNode } from 'vue'
+
+export interface WelcomeProps {
+  title: string
+  description: string
+  align?: 'left' | 'center' | 'right' | string
+  icon?: VNode
+}
+
+export interface WelcomeSlots {
+  footer: () => unknown
+}

package/src/welcome/index.vue

@@ -1,3 +1,69 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { WelcomeProps, WelcomeSlots } from './index.type'
 
-<template>Welcome</template>
+const props = withDefaults(defineProps<WelcomeProps>(), {
+  align: 'center',
+})
+
+defineSlots<WelcomeSlots>()
+</script>
+
+<template>
+  <div class="tr-welcome">
+    <div class="tr-welcome__title-wrapper">
+      <span v-if="props.icon" class="tr-welcome__icon">
+        <component :is="props.icon"></component>
+      </span>
+      <h3 class="tr-welcome__title">{{ props.title }}</h3>
+    </div>
+    <span class="tr-welcome__description">{{ props.description }}</span>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-welcome {
+  --title-font: 40px;
+  --title-color: rgb(25, 25, 25);
+  --title-font-size: 40px;
+  --title-line-height: 56px;
+  --title-font-weight: 600;
+  --description-color: rgb(25, 25, 25);
+  --description-font-size: 20px;
+  --description-line-height: 34px;
+  --description-font-weight: 500;
+
+  text-align: v-bind('props.align');
+
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+}
+
+.tr-welcome__title-wrapper {
+}
+
+.tr-welcome__icon {
+  margin-right: 16px;
+}
+
+.tr-welcome__title {
+  color: var(--title-color);
+  font-size: var(--title-font-size);
+  line-height: var(--title-line-height);
+  font-weight: var(--title-font-weight);
+
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+}
+
+.tr-welcome__description {
+  color: var(--description-color);
+  font-size: var(--description-font-size);
+  line-height: var(--description-line-height);
+  font-weight: var(--description-font-weight);
+
+  margin-top: 32px;
+}
+</style>

package/dist/bubble-item/components/icons/ai.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
-export default _default;

package/dist/bubble-item/components/icons/index.d.ts

@@ -1,2 +0,0 @@
-export { default as AIIcon } from './ai.vue';
-export { default as UserIcon } from './user.vue';

package/dist/bubble-item/components/icons/user.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
-export default _default;

package/dist/bubble-item/index.d.ts

@@ -1,7 +0,0 @@
-import { App } from 'vue';
-import { default as BubbleItem } from './bubble-item.vue';
-declare const install: (app: App) => void;
-declare const _default: typeof BubbleItem & {
-    install: typeof install;
-};
-export default _default;

package/dist/bubble-list/index.d.ts

@@ -1,8 +0,0 @@
-import { App } from 'vue';
-import { default as BubbleList } from './bubble-list.vue';
-export type BA = typeof BubbleList;
-declare const install: (app: App) => void;
-declare const _default: typeof BubbleList & {
-    install: typeof install;
-};
-export default _default;

package/dist/bubble-list/index.type.d.ts

@@ -1,55 +0,0 @@
-import { Options as MarkdownItOptions } from 'markdown-it';
-import { Component, CSSProperties, VNode } from 'vue';
-export type BubbleRole = 'ai' | 'user';
-export interface BubbleRoleConfig {
-    avatar?: VNode;
-    align: 'left' | 'right';
-}
-export type BubbleStatus = 'loading' | 'generating' | 'aborted' | 'complete' | 'error';
-export interface BubbleActionOptions {
-    name: string;
-    vnode: VNode | Component;
-    show?: boolean | ((props: BubbleItemProps) => boolean);
-}
-export type BubbleAction = 'copy' | 'regenerate' | 'like' | 'dislike' | 'continue' | 'edit' | BubbleActionOptions;
-export interface BubbleItemProps {
-    /**
-     * 角色，`ai` 或 `user`
-     */
-    role: BubbleRole;
-    /**
-     * 内容
-     */
-    content?: string;
-    /**
-     * 内容类型
-     */
-    type?: 'text' | 'markdown';
-    /**
-     * 气泡状态
-     */
-    status?: BubbleStatus;
-    /**
-     * 角色配置项
-     */
-    roleConfig?: BubbleRoleConfig;
-    /**
-     * type 为 'markdown' 时，markdown 的配置项
-     */
-    mdConfig?: MarkdownItOptions;
-    showActions?: boolean;
-    actions?: BubbleAction[];
-    maxWidth?: CSSProperties['maxWidth'];
-}
-export interface BubbleActionConfig {
-    show?: boolean;
-    actions?: BubbleAction[];
-}
-export interface BubbleListProps {
-    items: BubbleItemProps[];
-    roleConfigs?: Partial<Record<BubbleRole, BubbleRoleConfig>>;
-    mdConfig?: MarkdownItOptions;
-    actionConfigs?: Partial<Record<BubbleRole, BubbleActionConfig>>;
-    autoScroll?: boolean;
-    maxWidth?: CSSProperties['maxWidth'];
-}