@opentiny/tiny-robot 0.2.0-alpha.1 → 0.2.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-robot",
-  "version": "0.2.0-alpha.1",
+  "version": "0.2.0-alpha.2",
   "publishConfig": {
     "access": "public"
   },
@@ -16,7 +16,7 @@
     "vue": "^3.3.11"
   },
   "dependencies": {
-    "@opentiny/tiny-robot-svgs": "0.2.0-alpha.1",
+    "@opentiny/tiny-robot-svgs": "0.2.0-alpha.2",
     "@opentiny/vue": "^3.21.0",
     "@opentiny/vue-button": "^3.21.0",
     "@opentiny/vue-icon": "^3.22.0",
@@ -40,5 +40,5 @@
     "vue": "^3.3.11",
     "vue-tsc": "^2.2.8"
   },
-  "gitHead": "3000951723ed8b1caa1361ebac131229bec9c237"
+  "gitHead": "f334d2ba1772fe0e2859d5f859980257e70f36e1"
 }

package/src/action-group/ActionGroup.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { IconMenu } from '@opentiny/tiny-robot-svgs'
+import TinyTooltip from '@opentiny/vue-tooltip'
 import { onClickOutside, useWindowSize } from '@vueuse/core'
 import { computed, nextTick, ref, useTemplateRef, VNode, watch } from 'vue'
 import IconButton from '../icon-button'
@@ -108,32 +109,46 @@ watch(windowHeight, () => {
 
 <template>
   <div class="tr-action-group">
-    <span
+    <tiny-tooltip
       v-for="(item, index) in list"
       :key="index"
-      class="tr-action-group__btn-wrapper"
-      @click="handleItemClick(item.props?.name)"
+      :content="item.props?.label"
+      effect="dark"
+      placement="top"
+      :open-delay="500"
+      :disabled="!props.showTooltip"
     >
-      <component :is="item" />
-    </span>
-    <span v-if="showMore" ref="moreBtnRef" class="tr-action-group__btn-wrapper" @click="handleMoreClick">
-      <slot name="moreBtn">
-        <icon-button :icon="IconMenu" tooltip="更多" />
-      </slot>
-      <transition name="tr-action-group-dropdown">
-        <ul v-show="showDropdown" ref="dropDownRef" :class="['tr-action-group__dropdown', dropDownPlacement]">
-          <li
-            class="tr-action-group__dropdown-item"
-            v-for="(item, index) in moreList"
-            :key="index"
-            @click.stop="handleItemClick(item.props?.name)"
-          >
-            <component v-if="!props.dropDownShowLabelOnly" :is="item" />
-            <span class="tr-action-group__dropdown-item-text">{{ item.props?.label }}</span>
-          </li>
-        </ul>
-      </transition>
-    </span>
+      <span class="tr-action-group__btn-wrapper" @click="handleItemClick(item.props?.name)">
+        <component :is="item" />
+      </span>
+    </tiny-tooltip>
+    <tiny-tooltip
+      v-if="showMore"
+      content="更多"
+      effect="dark"
+      placement="top"
+      :open-delay="500"
+      :disabled="!props.showTooltip"
+    >
+      <span ref="moreBtnRef" class="tr-action-group__btn-wrapper" @click="handleMoreClick">
+        <slot name="moreBtn">
+          <icon-button :icon="IconMenu" />
+        </slot>
+        <transition name="tr-action-group-dropdown">
+          <ul v-show="showDropdown" ref="dropDownRef" :class="['tr-action-group__dropdown', dropDownPlacement]">
+            <li
+              class="tr-action-group__dropdown-item"
+              v-for="(item, index) in moreList"
+              :key="index"
+              @click.stop="handleItemClick(item.props?.name)"
+            >
+              <component v-if="!props.dropDownShowLabelOnly" :is="item" />
+              <span class="tr-action-group__dropdown-item-text">{{ item.props?.label }}</span>
+            </li>
+          </ul>
+        </transition>
+      </span>
+    </tiny-tooltip>
   </div>
 </template>
 

package/src/action-group/index.type.ts

@@ -2,6 +2,7 @@ import { VNode } from 'vue'
 
 export interface ActionGroupProps {
   maxNum?: number
+  showTooltip?: boolean
   dropDownShowLabelOnly?: boolean
 }
 

package/src/bubble/{bubble.vue → Bubble.vue}

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import markdownit from 'markdown-it'
-import { computed, useSlots } from 'vue'
-import { CopyAction, RefreshAction } from './components/actions'
-import { BubbleActionOptions, BubbleEvents, BubbleProps, BubbleSlots } from './index.type'
+import { computed } from 'vue'
+import { BubbleProps, BubbleSlots } from './index.type'
 
 const props = withDefaults(defineProps<BubbleProps>(), {
   content: '',
@@ -11,72 +10,20 @@ const props = withDefaults(defineProps<BubbleProps>(), {
   maxWidth: '80%',
 })
 
-const emit = defineEmits<BubbleEvents>()
+const slots = defineSlots<BubbleSlots>()
 
-defineSlots<BubbleSlots>()
-
-const slots = useSlots()
+const markdownItInstance = computed(() => {
+  return markdownit(props.mdConfig || {})
+})
 
 const bubbleContent = computed(() => {
   if (props.type === 'markdown') {
-    return markdownit(props.mdConfig || {}).render(props.content)
+    return markdownItInstance.value.render(props.content)
   }
   return props.content
 })
 
 const placementStart = computed(() => props.placement === 'start')
-
-const defaultActionsMap = new Map<string, BubbleActionOptions>([
-  [
-    'copy',
-    {
-      name: 'copy',
-      vnode: CopyAction,
-      show: true,
-    },
-  ],
-  [
-    'refresh',
-    {
-      name: 'refresh',
-      vnode: RefreshAction,
-      show: true,
-    },
-  ],
-])
-
-const computedActions = computed(() => {
-  const actions = (props.actions || []).map((action) => {
-    if (typeof action === 'string') {
-      return defaultActionsMap.get(action)
-    }
-
-    if (defaultActionsMap.has(action.name)) {
-      return {
-        ...defaultActionsMap.get(action.name),
-        ...action,
-      }
-    }
-
-    return action
-  })
-
-  return actions.filter((action): action is BubbleActionOptions => Boolean(action))
-})
-
-const handleActionClick = (name: string, ...args: unknown[]) => {
-  if (name === 'copy') {
-    emit('copy', args[0] as boolean)
-    return
-  }
-
-  if (name === 'refresh') {
-    emit('refresh')
-    return
-  }
-
-  emit('action', name, ...args)
-}
 </script>
 
 <template>
@@ -93,7 +40,7 @@ const handleActionClick = (name: string, ...args: unknown[]) => {
       <component :is="props.avatar"></component>
     </div>
     <div class="tr-bubble__content-wrapper">
-      <slot v-if="props.loading" name="loading">
+      <slot v-if="props.loading" name="loading" :bubble-props="props">
         <div class="tr-bubble__loading">
           <span></span>
           <span></span>
@@ -102,26 +49,14 @@ const handleActionClick = (name: string, ...args: unknown[]) => {
       </slot>
       <div v-else :class="['tr-bubble__content']">
         <div class="tr-bubbule__body">
-          <slot>
+          <slot :bubble-props="props">
             <span v-if="props.type === 'markdown'" v-html="bubbleContent"></span>
             <span v-else>{{ bubbleContent }}</span>
             <span v-if="props.aborted" class="tr-bubbule__aborted">（用户停止）</span>
           </slot>
         </div>
-        <div v-if="slots.footer || computedActions.length > 0" class="tr-bubbule__footer">
-          <div class="tr-bubbule__footer-left">
-            <slot name="footer"></slot>
-          </div>
-          <div class="tr-bubbule__footer-actions">
-            <template v-for="action in computedActions" :key="action?.name">
-              <component
-                :is="action.vnode"
-                v-show="typeof action.show === 'function' ? action.show(props) : action.show"
-                :bubbleItem="props"
-                @click="handleActionClick(action.name, $event)"
-              ></component>
-            </template>
-          </div>
+        <div v-if="slots.footer" class="tr-bubbule__footer">
+          <slot name="footer" :bubble-props="props"></slot>
         </div>
       </div>
     </div>
@@ -203,6 +138,7 @@ const handleActionClick = (name: string, ...args: unknown[]) => {
     color: rgb(25, 25, 25);
     font-size: 16px;
     line-height: 26px;
+    word-break: break-word;
   }
 
   .tr-bubbule__aborted {
@@ -211,27 +147,7 @@ const handleActionClick = (name: string, ...args: unknown[]) => {
   }
 
   .tr-bubbule__footer {
-    display: flex;
-    gap: 12px;
-
-    .tr-bubbule__footer-left {
-      flex: 1;
-    }
-
-    .tr-bubbule__footer-actions {
-      display: flex;
-      flex-shrink: 0;
-      gap: 4px;
-      margin-top: 12px;
-
-      & > * {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-      }
-    }
+    margin-top: 12px;
   }
 }
 </style>

package/src/bubble/BubbleList.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useScroll } from '@vueuse/core'
+import { computed, useTemplateRef, watch } from 'vue'
+import Bubble from './Bubble.vue'
+import { BubbleListProps, BubbleProps, BubbleSlots } from './index.type'
+
+const props = withDefaults(defineProps<BubbleListProps>(), {})
+
+const scrollContainerRef = useTemplateRef<HTMLDivElement>('scrollContainer')
+const { y } = useScroll(scrollContainerRef, {
+  behavior: 'smooth',
+  throttle: 100,
+})
+const lastBubble = computed(() => props.items.at(-1))
+
+watch([() => props.items.length, () => lastBubble.value?.content], () => {
+  if (!props.autoScroll || !scrollContainerRef.value) {
+    return
+  }
+
+  y.value = scrollContainerRef.value.scrollHeight
+})
+
+const getItemProps = (item: BubbleProps & { slots?: BubbleSlots }): BubbleProps => {
+  const defaultConfig = item.role ? props.roles?.[item.role] || {} : {}
+  const { slots: _roleSlots, ...rest } = defaultConfig
+  const { slots: _itemSlots, ...restItem } = item
+  return { ...rest, ...restItem }
+}
+
+const getItemSlots = (item: BubbleProps & { slots?: BubbleSlots }): BubbleSlots => {
+  const defaultConfig = item.role ? props.roles?.[item.role] || {} : {}
+  return { ...defaultConfig.slots, ...item.slots }
+}
+</script>
+
+<template>
+  <div class="tr-bubble-list" ref="scrollContainer">
+    <Bubble v-for="(item, index) in props.items" :key="item.id || index" v-bind="getItemProps(item)">
+      <template v-for="(_, slotName) in getItemSlots(item)" #[slotName]="slotProps" :key="slotName">
+        <component :is="getItemSlots(item)[slotName]" v-bind="slotProps" />
+      </template>
+    </Bubble>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-bubble-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  padding: 16px;
+}
+</style>

package/src/bubble/index.ts

@@ -1,6 +1,6 @@
 import { App } from 'vue'
-import BubbleComp from './bubble.vue'
-import BubbleListComp from './bubble-list.vue'
+import BubbleComp from './Bubble.vue'
+import BubbleListComp from './BubbleList.vue'
 
 BubbleComp.name = 'TrBubble'
 

package/src/bubble/index.type.ts

@@ -1,13 +1,5 @@
 import { Options as MarkdownItOptions } from 'markdown-it'
-import { Component, CSSProperties, VNode } from 'vue'
-
-export interface BubbleActionOptions {
-  name: 'copy' | 'refresh' | string
-  vnode?: VNode | Component
-  show?: boolean | ((props: BubbleProps) => boolean)
-}
-
-export type BubbleAction = 'copy' | 'refresh' | BubbleActionOptions
+import { CSSProperties, VNode } from 'vue'
 
 export type BubblePalcement = 'start' | 'end'
 
@@ -33,28 +25,22 @@ export interface BubbleProps {
    * type 为 'markdown' 时，markdown 的配置项
    */
   mdConfig?: MarkdownItOptions
-
-  actions?: BubbleAction[]
   // 样式相关
   maxWidth?: CSSProperties['maxWidth']
 }
 
 export interface BubbleSlots {
-  default: () => unknown
-  footer: () => unknown
-  loading: () => unknown
+  default?: (slotProps: { bubbleProps: BubbleProps }) => unknown
+  footer?: (slotProps: { bubbleProps: BubbleProps }) => unknown
+  loading?: (slotProps: { bubbleProps: BubbleProps }) => unknown
 }
 
-export interface BubbleEvents {
-  (e: 'copy', result: boolean): void
-  (e: 'refresh'): void
-  (e: 'action', name: string, ...args: unknown[]): void
+export type BubbleRoleConfig = Pick<BubbleProps, 'placement' | 'avatar' | 'type' | 'mdConfig' | 'maxWidth'> & {
+  slots?: BubbleSlots
 }
 
-export type BubbleRoleConfig = Pick<BubbleProps, 'placement' | 'avatar' | 'type' | 'mdConfig' | 'actions' | 'maxWidth'>
-
 export interface BubbleListProps {
-  items: BubbleProps[]
+  items: (BubbleProps & { slots?: BubbleSlots })[]
   /**
    * 每个角色的默认配置项
    */

package/src/container/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { IconCancelFullScreen, IconClose, IconFullScreen } from '@opentiny/tiny-robot-svgs'
 import { computed } from 'vue'
+import IconButton from '../icon-button'
 import { ContainerProps, ContainerSlots } from './index.type'
 
 const show = defineModel<ContainerProps['show']>('show', { required: true })
@@ -22,17 +23,16 @@ const IconFullScreenSwitcher = computed(() => (fullscreen.value ? IconCancelFull
       </slot>
       <div class="tr-container__header-operations">
         <slot name="operations"></slot>
-        <button class="icon-btn" @click="$emit('update:fullscreen', !fullscreen)">
-          <IconFullScreenSwitcher />
-        </button>
-        <button class="icon-btn" @click="$emit('update:show', false)">
-          <IconClose />
-        </button>
+        <icon-button
+          size="28"
+          svg-size="20"
+          :icon="IconFullScreenSwitcher"
+          @click="$emit('update:fullscreen', !fullscreen)"
+        ></icon-button>
+        <icon-button size="28" svg-size="20" :icon="IconClose" @click="$emit('update:show', false)"></icon-button>
       </div>
     </div>
-    <div class="tr-container__body">
-      <slot></slot>
-    </div>
+    <slot></slot>
     <div class="tr-container__footer">
       <slot name="footer"></slot>
     </div>
@@ -95,34 +95,9 @@ const IconFullScreenSwitcher = computed(() => (fullscreen.value ? IconCancelFull
   .tr-container__header-operations {
     display: flex;
     gap: 8px;
-
-    button.icon-btn {
-      width: 28px;
-      height: 28px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      border-radius: 8px;
-      cursor: pointer;
-      padding: 0;
-      transition: background-color 0.3s;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.04);
-      }
-
-      &:active {
-        background-color: rgba(0, 0, 0, 0.15);
-      }
-
-      svg {
-        font-size: 20px;
-      }
-    }
   }
 
-  .tr-container__body {
+  .tr-container__header + :slotted(*) {
     flex: 1;
     overflow-y: auto;
   }

package/src/feedback/index.vue

@@ -42,8 +42,9 @@ const handleSourceList = () => {
 <template>
   <div class="tr-feedback">
     <div class="tr-feedback__operations">
-      <div v-if="props.operations?.length" class="tr-feedback__operations-left">
+      <div class="tr-feedback__operations-left">
         <action-group
+          v-if="props.operations?.length"
           :max-num="props.operationsLimit"
           :drop-down-show-label-only="true"
           @item-click="handleOperation"
@@ -66,32 +67,31 @@ const handleSourceList = () => {
             </tiny-button>
           </template>
         </action-group>
-      </div>
-      <div v-else-if="props.sources?.length">
-        <span class="tr-feedback__source" @click="handleSourceList">
-          <span>{{ props.sources?.length }}条来源</span>
-          <component :is="showSourceList ? IconArrowUp : IconArrowDown" />
-        </span>
+        <div v-else-if="props.sources?.length">
+          <span class="tr-feedback__source" @click="handleSourceList">
+            <span>{{ props.sources?.length }}条来源</span>
+            <component :is="showSourceList ? IconArrowUp : IconArrowDown" />
+          </span>
+        </div>
       </div>
       <div class="tr-feedback__operations-right">
-        <action-group :max-num="props.actionsLimit" @item-click="handleAction">
+        <action-group :max-num="props.actionsLimit" :show-tooltip="true" @item-click="handleAction">
           <action-group-item
             v-for="action in props.actions"
             :key="action.name"
             :name="action.name"
             :label="action.label"
           >
-            <icon-button
-              v-if="typeof action.icon === 'string'"
-              :icon="iconMap[action.icon]"
-              :tooltip="action.label"
-            ></icon-button>
+            <icon-button v-if="typeof action.icon === 'string'" :icon="iconMap[action.icon]"></icon-button>
             <component v-else :is="action.icon"></component>
           </action-group-item>
         </action-group>
       </div>
     </div>
-    <div class="tr-feedback__footer">
+    <div
+      v-if="(props.operations?.length && props.sources?.length) || (showSourceList && props.sources)"
+      class="tr-feedback__footer"
+    >
       <div v-if="props.operations?.length && props.sources?.length">
         <span class="tr-feedback__source" @click="handleSourceList">
           <span>{{ props.sources?.length }}条来源</span>

package/src/icon-button/index.type.ts

@@ -2,7 +2,6 @@ import { Component, VNode } from 'vue'
 
 export interface IconButtonProps {
   icon: VNode | Component
-  size?: string
-  svgSize?: string
-  tooltip?: string
+  size?: string | number
+  svgSize?: string | number
 }

package/src/icon-button/index.vue

@@ -1,20 +1,26 @@
 <script setup lang="ts">
-import TinyTooltip from '@opentiny/vue-tooltip'
 import { IconButtonProps } from './index.type'
+import { computed } from 'vue'
 
 const props = withDefaults(defineProps<IconButtonProps>(), {
   size: '24px',
   svgSize: '16px',
 })
+
+const formatSize = (size: string | number) => {
+  if (!isNaN(Number(size))) {
+    return `${size}px`
+  }
+
+  return size as string
+}
+
+const size = computed(() => formatSize(props.size))
+const svgSize = computed(() => formatSize(props.svgSize))
 </script>
 
 <template>
-  <tiny-tooltip v-if="tooltip" :content="tooltip" effect="dark" placement="top" :open-delay="500">
-    <button class="tr-icon-button">
-      <component :is="props.icon" />
-    </button>
-  </tiny-tooltip>
-  <button v-else class="tr-icon-button">
+  <button class="tr-icon-button">
     <component :is="props.icon" />
   </button>
 </template>
@@ -25,8 +31,8 @@ button.tr-icon-button {
   --tr-icon-button-active-bg: rgba(0, 0, 0, 0.15);
   --tr-icon-button-border-radius: 8px;
 
-  width: v-bind('props.size');
-  height: v-bind('props.size');
+  width: v-bind('size');
+  height: v-bind('size');
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -46,7 +52,7 @@ button.tr-icon-button {
   }
 
   svg {
-    font-size: v-bind('props.svgSize');
+    font-size: v-bind('svgSize');
   }
 }
 </style>