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

package/src/sender/index.vue

@@ -6,6 +6,7 @@ import { useInputHandler } from './composables/useInputHandler'
 import { useKeyboardHandler } from './composables/useKeyboardHandler'
 import { useSpeechHandler } from './composables/useSpeechHandler'
 import ActionButtons from './components/ActionButtons.vue'
+import TemplateEditor from './components/TemplateEditor.vue'
 import './index.less'
 
 const props = withDefaults(defineProps<SenderProps>(), {
@@ -23,15 +24,33 @@ const props = withDefaults(defineProps<SenderProps>(), {
   showWordLimit: false,
   submitType: 'enter',
   theme: 'light',
+  template: '',
+  hasContent: undefined,
 })
 
 const emit = defineEmits<SenderEmits>()
 
 // 输入引用
 const inputRef = ref<HTMLElement | null>(null)
+const templateEditorRef = ref<InstanceType<typeof TemplateEditor> | null>(null)
+
+// 是否显示模板编辑器
+const showTemplateEditor = computed(() => !!props.template)
 
 // 输入控制
-const { inputValue, isComposing, clearInput }: InputHandler = useInputHandler(props, emit)
+const { inputValue, isComposing, clearInput: originalClearInput }: InputHandler = useInputHandler(props, emit)
+
+// 清空功能增强：同时处理模板和普通输入，并退出模板编辑模式
+const clearInput = () => {
+  // 调用原始清空方法
+  originalClearInput()
+
+  // 如果当前是模板编辑模式，需要退出模板编辑模式
+  if (props.template) {
+    // 发出一个模板重置事件，通知父组件清除模板
+    emit('reset-template')
+  }
+}
 
 // 输入建议
 const showSuggestions = ref(false)
@@ -46,6 +65,19 @@ const selectSuggestion = (value: string) => {
   emit('suggestion-select', value)
 }
 
+// 模板相关处理
+const handleTemplateInput = (value: string) => {
+  inputValue.value = value
+  emit('update:modelValue', value)
+}
+
+// 激活第一个模板字段
+const activateTemplateFirstField = () => {
+  if (templateEditorRef.value) {
+    templateEditorRef.value.activateFirstField()
+  }
+}
+
 // 语音识别
 const speechOptions = computed(() => ({
   ...(typeof props.speech === 'object' ? props.speech : {}),
@@ -93,8 +125,8 @@ const handleBlur = (event: FocusEvent) => {
   emit('blur', event)
 }
 
-// 输入框类型计算
-const inputType = computed(() => (props.mode === 'multiple' ? 'textarea' : 'text'))
+// 初始化自适应对象
+const autoSize = computed(() => (props.mode === 'multiple' ? { minRows: 2, maxRows: 5 } : { maxRows: 1 }))
 
 const justifyContent = computed(
   (): {
@@ -115,6 +147,7 @@ const justifyContent = computed(
 // 状态计算
 const isDisabled = computed(() => props.disabled)
 const isLoading = computed(() => props.loading)
+const hasContent = computed(() => (props.hasContent !== undefined ? props.hasContent : !!inputValue.value))
 
 // 样式类
 const senderClasses = computed(() => ({
@@ -144,7 +177,9 @@ watch(inputValue, () => {
 // 暴露方法
 defineExpose({
   focus: () => {
-    if (inputRef.value) {
+    if (showTemplateEditor.value && templateEditorRef.value) {
+      activateTemplateFirstField()
+    } else if (inputRef.value) {
       inputRef.value.focus()
     } else {
       const input = document.querySelector('.tiny-input__inner') as HTMLInputElement
@@ -163,6 +198,7 @@ defineExpose({
   submit: triggerSubmit,
   startSpeech,
   stopSpeech,
+  activateTemplateFirstField,
 })
 </script>
 
@@ -187,12 +223,24 @@ defineExpose({
 
           <!-- 内容区域 - 确保最小宽度，不被挤占 -->
           <div class="tiny-sender__content-area">
+            <!-- 模板编辑器 -->
+            <template v-if="showTemplateEditor">
+              <TemplateEditor
+                ref="templateEditorRef"
+                :template="template"
+                :value="inputValue"
+                @update:value="handleTemplateInput"
+                @input="handleTemplateInput"
+              />
+            </template>
+            <!-- 普通输入框 -->
             <tiny-input
+              v-else
               ref="inputRef"
               :autosize="autoSize"
-              :type="inputType"
+              type="textarea"
               :readonly="isLoading"
-              :resize="mode === 'multiple' ? 'none' : undefined"
+              resize="none"
               v-model="inputValue"
               :disabled="isDisabled"
               :placeholder="placeholder"
@@ -217,7 +265,7 @@ defineExpose({
                 :loading="loading"
                 :disabled="isDisabled"
                 :show-clear="clearable"
-                :has-content="!!inputValue"
+                :has-content="hasContent"
                 :speech-status="speechState"
                 :submit-type="submitType"
                 @clear="clearInput"
@@ -253,7 +301,7 @@ defineExpose({
                   :loading="loading"
                   :disabled="isDisabled"
                   :show-clear="clearable"
-                  :has-content="!!inputValue"
+                  :has-content="hasContent"
                   :speech-status="speechState"
                   :submit-type="submitType"
                   @clear="clearInput"

package/src/sender/vars.less

@@ -17,7 +17,7 @@
   --tr-sender-padding-bottom: 10px;
   --tr-sender-padding-left: 24px;
   --tr-sender-gap: 8px;
-  --tr-sender-input-height: 100px;
+  --tr-sender-input-height: 26px;
   --tr-sender-input-min-height: 60px;
   --tr-sender-icon-size: 22px;
   --tr-sender-icon-size-small: 18px;
@@ -48,7 +48,7 @@
 
   // 内容区域 (Content)
   --tr-sender-content-min-width: 180px;
-  --tr-sender-content-padding: 15px 10px 10px 24px;
+  --tr-sender-content-padding: 15px 10px 12px 24px;
   --tr-sender-content-padding-with-prefix: 15px 10px 10px 8px;
   --tr-sender-content-flex-grow: 1;
 
@@ -68,7 +68,7 @@
 
 /* 暗色主题 */
 .theme-dark,
-[data-theme="dark"] {
+[data-theme='dark'] {
   --tr-sender-border-color: #4c4d4f;
   --tr-sender-bg-color: #1c1c1c;
   --tr-sender-text-color: #ffffff;

package/src/suggestion/components/CategoryNav.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { Category } from '../index.type'
+
+defineProps({
+  categories: {
+    type: Array as PropType<Category[]>,
+    required: true,
+  },
+  activeCategory: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['category-select'])
+
+const handleCategorySelect = (categoryId: string) => {
+  emit('category-select', categoryId)
+}
+</script>
+
+<template>
+  <div class="tr-suggestion-categories">
+    <div
+      v-for="category in categories"
+      :key="category.id"
+      class="tr-suggestion-categories-item"
+      :class="{ active: activeCategory === category.id }"
+      @click="handleCategorySelect(category.id)"
+    >
+      <slot name="category-label" :category="category">
+        <div class="category-icon" v-if="category.icon">{{ category.icon }}</div>
+        <span>{{ category.label }}</span>
+      </slot>
+    </div>
+  </div>
+</template>

package/src/suggestion/components/SuggestionCapsule.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount, nextTick, PropType, computed, watchEffect } from 'vue'
+import type { SuggestionItem } from '../index.type'
+import { IconEdit } from '@opentiny/tiny-robot-svgs'
+import { getCachedTextWidth } from '../utils/dom'
+
+const props = defineProps({
+  suggestions: {
+    type: Array as PropType<SuggestionItem[]>,
+    required: true,
+  },
+  isExpanded: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['suggestion-click', 'show-expand-button'])
+
+// eslint-disable-next-line
+const capsuleRef = ref<any>(null)
+const showExpandButton = ref(false)
+const isExpandedRef = ref(false)
+const visibleSuggestions = ref<SuggestionItem[]>([])
+const hiddenSuggestions = ref<SuggestionItem[]>([])
+const maxItemsPerRow = ref(0)
+const resizeObserver = ref<ResizeObserver | null>(null)
+
+// 计算每行的胶囊排列，实现从下到上、从左往右的排序
+const arrangedHiddenSuggestions = computed(() => {
+  if (maxItemsPerRow.value <= 0 || hiddenSuggestions.value.length === 0) return []
+
+  // 创建行数组
+  const rows = []
+  const totalSuggestions = [...hiddenSuggestions.value]
+
+  // 按照每行最大容量分组
+  while (totalSuggestions.length > 0) {
+    rows.push(totalSuggestions.splice(0, maxItemsPerRow.value))
+  }
+
+  // 返回行的数组，以便从下到上显示
+  return rows.reverse()
+})
+
+// 检查是否需要显示展开/收起按钮并计算能够容纳的最大胶囊数
+const calculateLayout = async () => {
+  await nextTick()
+  if (!capsuleRef.value || props.suggestions.length === 0) {
+    showExpandButton.value = false
+    emit('show-expand-button', false)
+    return
+  }
+
+  const container = capsuleRef.value
+  const containerWidth = container.clientWidth
+
+  // 重置胶囊分组
+  visibleSuggestions.value = []
+  hiddenSuggestions.value = []
+
+  // 计算一行可以容纳多少个胶囊
+  let accumulatedWidth = 0
+  const margin = 8 // 胶囊之间的间距
+
+  // 先测量一个平均宽度来估算每行可容纳的胶囊数
+  let totalWidth = 0
+  const sampleSize = Math.min(3, props.suggestions.length)
+  for (let i = 0; i < sampleSize; i++) {
+    // 使用缓存测量宽度
+    const itemWidth = getCachedTextWidth(props.suggestions[i].text, 'tr-common-suggestions_item') + margin
+    totalWidth += itemWidth
+  }
+  const avgItemWidth = totalWidth / sampleSize
+  maxItemsPerRow.value = Math.max(1, Math.floor(containerWidth / avgItemWidth))
+
+  // 计算每个胶囊的宽度并确定一行能容纳多少个
+  for (let i = 0; i < props.suggestions.length; i++) {
+    const suggestion = props.suggestions[i]
+    // 使用缓存测量宽度
+    const itemWidth = getCachedTextWidth(suggestion.text, 'tr-common-suggestions_item') + margin
+
+    // 检查是否还能容纳下一个胶囊
+    if (accumulatedWidth + itemWidth <= containerWidth) {
+      accumulatedWidth += itemWidth
+      visibleSuggestions.value.push(suggestion)
+    } else {
+      hiddenSuggestions.value.push(suggestion)
+    }
+  }
+
+  // 如果有隐藏的胶囊，显示展开按钮
+  showExpandButton.value = hiddenSuggestions.value.length > 0
+
+  // 通知父组件是否需要显示展开按钮
+  emit('show-expand-button', showExpandButton.value)
+}
+
+// 处理指令点击
+const handleSuggestionClick = (suggestion: SuggestionItem) => {
+  emit('suggestion-click', suggestion)
+}
+
+// 同步外部展开状态
+watch(
+  () => props.isExpanded,
+  (val) => {
+    isExpandedRef.value = val
+  },
+)
+
+watchEffect(() => {
+  if (capsuleRef.value && props.suggestions.length) {
+    calculateLayout()
+  }
+})
+
+// 组件挂载时使用ResizeObserver监听大小变化
+onMounted(() => {
+  if (capsuleRef.value) {
+    resizeObserver.value = new ResizeObserver(() => {
+      calculateLayout()
+    })
+    resizeObserver.value.observe(capsuleRef.value)
+  }
+})
+
+// 组件卸载时移除监听器
+onBeforeUnmount(() => {
+  if (resizeObserver.value) {
+    resizeObserver.value.disconnect()
+  }
+})
+</script>
+
+<template>
+  <!-- 胶囊式指令 -->
+  <div class="tr-common-suggestions" ref="capsuleRef" :class="{ expanded: isExpandedRef }">
+    <div class="tr-common-suggestions_content">
+      <!-- 向上展开的隐藏胶囊 -->
+      <div class="tr-common-suggestions_expanded-wrapper">
+        <div v-show="isExpandedRef && hiddenSuggestions.length > 0" class="tr-common-suggestions_expanded-area">
+          <div
+            v-for="(row, rowIndex) in arrangedHiddenSuggestions"
+            :key="`row-${rowIndex}`"
+            class="tr-common-suggestions_row"
+          >
+            <div
+              v-for="(suggestion, index) in row"
+              :key="`hidden-${suggestion.id}-${index}`"
+              class="tr-common-suggestions_item"
+              @click="handleSuggestionClick(suggestion)"
+            >
+              <div class="tr-common-suggestions_item_icon">
+                <IconEdit />
+              </div>
+              <div class="tr-common-suggestions_item_text">
+                {{ suggestion.text }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 固定在底部的可见胶囊 -->
+      <div class="tr-common-suggestions_container">
+        <div
+          v-for="(suggestion, index) in visibleSuggestions"
+          :key="`visible-${suggestion.id}-${index}`"
+          class="tr-common-suggestions_item"
+          @click="handleSuggestionClick(suggestion)"
+        >
+          <div class="tr-common-suggestions_item_icon">
+            <IconEdit />
+          </div>
+          <div class="tr-common-suggestions_item_text">
+            {{ suggestion.text }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/suggestion/components/SuggestionPanel.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref, computed, PropType } from 'vue'
+import { SuggestionItem, Category } from '../index.type'
+import CategoryNav from './CategoryNav.vue'
+import { useKeyboardNavigation } from '../composables/useKeyboardNavigation'
+import { IconHotQuestion, IconClose } from '@opentiny/tiny-robot-svgs'
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<SuggestionItem[]>,
+    required: true,
+  },
+  categories: {
+    type: Array as PropType<Category[]>,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '指令',
+  },
+  maxVisibleItems: {
+    type: Number,
+    default: 5,
+  },
+})
+
+const emit = defineEmits(['close', 'select', 'category-select', 'item-hover'])
+
+const items = ref(props.items)
+
+const { handleKeyDown, activeIndex } = useKeyboardNavigation(items, {
+  initialIndex: 0,
+  onClose: () => emit('close'),
+  onSelect: (item) => emit('select', item),
+})
+
+// 当前激活的分类
+const activeCategory = ref<string>(props.categories.length > 0 ? props.categories[0].id : '')
+
+// 计算当前激活分类的项目列表
+const filteredItems = computed(() => {
+  // 如果没有分类或没有选中分类，直接显示 items
+  if (props.categories.length === 0 || !activeCategory.value) {
+    return props.items
+  }
+
+  // 查找当前激活的分类
+  const category = props.categories.find((cat) => cat.id === activeCategory.value)
+  return category ? category.items : []
+})
+
+// 处理分类选择
+const handleCategorySelect = (categoryId: string) => {
+  activeCategory.value = categoryId
+
+  const category = props.categories.find((cat) => cat.id === categoryId)
+  if (category) {
+    emit('category-select', category)
+  }
+}
+
+// 处理选择指令项
+const handleSelect = (item: SuggestionItem) => {
+  emit('select', item)
+}
+
+// 处理关闭面板
+const handleClose = () => {
+  emit('close')
+}
+
+// 处理鼠标悬停
+const handleItemHover = (index: number) => {
+  emit('item-hover', index)
+}
+
+defineExpose({
+  handleKeyDown,
+})
+</script>
+
+<template>
+  <div class="tr-suggestion-panel">
+    <!-- 面板标题 -->
+    <div class="tr-suggestion-header">
+      <div class="tr-suggestion-header-left">
+        <div class="tr-suggestion-header-icon">
+          <slot name="title-icon">
+            <IconHotQuestion />
+          </slot>
+        </div>
+        <div class="tr-suggestion-header-title">{{ title }}</div>
+      </div>
+      <span class="tr-suggestion-close-btn" @click="handleClose">
+        <span class="close-icon"><IconClose /></span>
+      </span>
+    </div>
+
+    <!-- 分类导航 -->
+    <CategoryNav
+      v-if="categories.length > 0"
+      :categories="categories"
+      :active-category="activeCategory"
+      @category-select="handleCategorySelect"
+    />
+
+    <!-- 内容区域 -->
+    <div
+      class="tr-suggestion-content"
+      :style="{ 'max-height': filteredItems.length > maxVisibleItems ? `${maxVisibleItems * 56}px` : 'auto' }"
+    >
+      <div v-if="loading" class="tr-suggestion-loading">
+        <slot name="loading-indicator">
+          <div class="tr-suggestion-loading-spinner"></div>
+        </slot>
+      </div>
+
+      <ul v-else-if="filteredItems.length > 0">
+        <li
+          v-for="(item, index) in filteredItems"
+          :key="item.id"
+          class="tr-suggestion-list-item"
+          :class="{ 'tr-suggestion-item-active': index === activeIndex }"
+          @click="handleSelect(item)"
+          @mouseenter="handleItemHover(index)"
+        >
+          <slot name="item" :item="item" :active="index === activeIndex">
+            <div class="item-content">
+              <div class="item-label">{{ item.text }}</div>
+              <div v-if="item.description" class="item-description">{{ item.description }}</div>
+            </div>
+          </slot>
+        </li>
+      </ul>
+
+      <div v-else class="tr-suggestion-empty">
+        <slot name="empty">
+          <p>无匹配结果</p>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

package/src/suggestion/composables/useKeyboardNavigation.ts

@@ -0,0 +1,101 @@
+import { ref, Ref, watch } from 'vue'
+import type { SuggestionItem } from '../index.type'
+
+export interface KeyboardNavigationOptions {
+  onSelect?: (item: SuggestionItem) => void
+  onClose?: () => void
+  initialIndex?: number
+}
+
+/**
+ * 处理指令列表的键盘导航
+ * @param items 当前可见的指令项列表
+ * @param options 配置选项
+ */
+export function useKeyboardNavigation(items: Ref<SuggestionItem[]>, options: KeyboardNavigationOptions = {}) {
+  const activeIndex = ref(options.initialIndex || -1)
+
+  // 当列表变化时重置激活项
+  watch(items, (newItems) => {
+    if (newItems.length > 0 && activeIndex.value === -1) {
+      activeIndex.value = 0
+    } else if (newItems.length === 0) {
+      activeIndex.value = -1
+    } else if (activeIndex.value >= newItems.length) {
+      activeIndex.value = newItems.length - 1
+    }
+  })
+
+  /**
+   * 处理键盘按键
+   * @param e 键盘事件
+   */
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (items.value.length === 0) return
+
+    switch (e.key) {
+      case 'ArrowUp':
+        e.preventDefault()
+        activeIndex.value = (activeIndex.value - 1 + items.value.length) % items.value.length
+        scrollToActive()
+        break
+
+      case 'ArrowDown':
+        e.preventDefault()
+        activeIndex.value = (activeIndex.value + 1) % items.value.length
+        scrollToActive()
+        break
+
+      case 'Enter':
+
+      case 'Tab':
+        e.preventDefault()
+        if (activeIndex.value >= 0 && activeIndex.value < items.value.length) {
+          options.onSelect?.(items.value[activeIndex.value])
+        }
+        break
+
+      case 'Escape':
+        e.preventDefault()
+        options.onClose?.()
+        break
+    }
+  }
+
+  /**
+   * 滚动到当前激活项
+   */
+  const scrollToActive = () => {
+    setTimeout(() => {
+      const activeElement = document.querySelector(`.tr-suggestion-list-item:nth-child(${activeIndex.value + 1})`)
+      const container = activeElement?.closest('.tr-suggestion-content')
+
+      if (activeElement && container) {
+        const containerRect = container.getBoundingClientRect()
+        const itemRect = activeElement.getBoundingClientRect()
+
+        if (itemRect.bottom > containerRect.bottom) {
+          container.scrollTop += itemRect.bottom - containerRect.bottom
+        } else if (itemRect.top < containerRect.top) {
+          container.scrollTop -= containerRect.top - itemRect.top
+        }
+      }
+    }, 0)
+  }
+
+  /**
+   * 设置激活项索引
+   */
+  const setActiveIndex = (index: number) => {
+    if (index >= -1 && index < items.value.length) {
+      activeIndex.value = index
+    }
+  }
+
+  return {
+    activeIndex,
+    handleKeyDown,
+    scrollToActive,
+    setActiveIndex,
+  }
+}

package/src/suggestion/composables/useSuggestionFilter.ts

@@ -0,0 +1,34 @@
+import { computed, Ref } from 'vue'
+import type { SuggestionItem } from '../index.type'
+
+/**
+ * 过滤和搜索指令项列表
+ * @param items 原始指令项列表
+ * @param searchTerm 搜索关键词
+ */
+export function useSuggestionFilter(items: Ref<SuggestionItem[]>, searchTerm: Ref<string>) {
+  /**
+   * 根据搜索词过滤指令列表
+   */
+  const filteredItems = computed(() => {
+    const term = searchTerm.value.trim().toLowerCase()
+    if (!term) return items.value
+
+    return items.value.filter((item) => {
+      // 搜索文本匹配
+      if (item.text.toLowerCase().includes(term)) return true
+
+      // 搜索描述匹配
+      if (item.description?.toLowerCase().includes(term)) return true
+
+      // 搜索关键词匹配
+      if (item.keywords?.some((keyword) => keyword.toLowerCase().includes(term))) return true
+
+      return false
+    })
+  })
+
+  return {
+    filteredItems,
+  }
+}