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

package/src/sender/index.type.ts

@@ -1,162 +0,0 @@
-import type { Ref } from 'vue'
-/**
- * 组件核心类型定义
- */
-
-// 主题类型
-export type ThemeType = 'light' | 'dark'
-
-// 输入模式类型
-export type InputMode = 'single' | 'multiple'
-
-// 提交触发方式
-export type SubmitTrigger = 'enter' | 'ctrlEnter' | 'shiftEnter'
-
-// 语音识别配置
-export interface SpeechConfig {
-  lang?: string // 识别语言，默认浏览器语言
-  continuous?: boolean // 是否持续识别
-  interimResults?: boolean // 是否返回中间结果
-  autoReplace?: boolean // 是否自动替换当前输入内容
-}
-
-export type AutoSize = boolean | { minRows: number; maxRows: number }
-
-// Sender组件属性
-export interface SenderProps {
-  autofocus?: boolean // 自动聚焦
-  autoSize?: AutoSize // 自适应内容高度
-  allowSpeech?: boolean // 是否允许语音识别
-  allowFiles?: boolean // 是否允许上传附件
-  clearable?: boolean // 是否显示清除按钮
-  disabled?: boolean // 禁用状态
-  defaultValue?: string | null // 默认值
-  loading?: boolean // 加载状态
-  modelValue?: string // 双向绑定值
-  mode?: InputMode // 输入框模式：单行/多行
-  maxLength?: number // 最大输入长度
-  submitType?: SubmitTrigger // 提交触发方式
-  speech?: boolean | SpeechConfig // 语音识别配置
-  placeholder?: string // 占位文本
-  showWordLimit?: boolean // 显示字数统计
-  suggestions?: string[] // 输入建议
-  theme?: ThemeType // 主题
-  template?: string // 模板字符串，格式如 "你好 [称呼]，感谢您的 [事项]"
-  hasContent?: boolean // 手动指定是否有内容，用于模板模式
-}
-
-export interface ActionButtonsProps {
-  loading?: boolean // 加载状态
-  disabled?: boolean // 是否禁用
-  showClear?: boolean // 是否可以清除
-  hasContent?: boolean // 是否有文本内容
-  allowSpeech?: boolean // 是否允许语音识别
-  speechStatus?: {
-    isRecording: boolean // 是否正在录制
-    isSupported: boolean // 是否支持语音识别
-  }
-  allowFiles?: boolean // 是否允许上传附件
-  submitType?: SubmitTrigger // 提交触发方式
-  showShortcuts?: boolean // 是否显示快捷键提示
-}
-
-// 组件事件定义
-export type SenderEmits = {
-  (e: 'update:modelValue', value: string): void
-  (e: 'submit', value: string): void
-  (e: 'clear'): void
-  (e: 'speech-start'): void
-  (e: 'speech-end', transcript?: string): void
-  (e: 'speech-interim', transcript: string): void
-  (e: 'speech-error', error: Error): void
-  (e: 'suggestion-select', value: string): void
-  (e: 'focus', event: FocusEvent): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'escape-press'): void // 按下Esc键时触发
-  (e: 'cancel'): void // 取消发送状态时触发
-  (e: 'reset-template'): void // 重置模板状态，退出模板编辑模式
-}
-
-// 语音识别状态
-export interface SpeechState {
-  isRecording: boolean // 是否正在录音
-  isSupported: boolean // 是否支持语音识别
-  error?: Error // 错误信息
-}
-
-// 语音识别Hook配置
-export interface SpeechHookOptions extends SpeechConfig {
-  onStart?: () => void
-  onEnd?: (transcript?: string) => void
-  onInterim?: (transcript: string) => void
-  onFinal?: (transcript: string) => void
-  onError?: (error: Error) => void
-}
-
-// 输入处理器返回类型
-export interface InputHandler {
-  inputValue: Ref<string>
-  isComposing: Ref<boolean>
-  clearInput: () => void
-}
-
-// 键盘处理器返回类型
-export interface KeyboardHandler {
-  handleKeyPress: (e: KeyboardEvent) => void
-  triggerSubmit: () => void
-}
-
-// 语音识别Hook返回类型
-export interface SpeechHandler {
-  speechState: SpeechState
-  start: () => void
-  stop: () => void
-}
-
-/**
- * 模板部分定义
- */
-export interface TemplatePart {
-  /** 内容文本 */
-  content: string
-  /** 是否为可编辑字段 */
-  isField: boolean
-  /** 占位符文本 (当字段为空时显示) */
-  placeholder?: string
-  /** 字段索引 (用于标识可编辑字段) */
-  fieldIndex?: number
-}
-
-/**
- * 模板编辑器属性
- */
-export interface TemplateEditorProps {
-  /** 模板字符串，格式为普通文本与 [占位符] 的组合 */
-  template: string
-  /** 当前值 */
-  value?: string
-}
-
-/**
- * 模板编辑器事件
- */
-export interface TemplateEditorEmits {
-  /** 更新值 */
-  (e: 'update:value', value: string): void
-  /** 输入事件 */
-  (e: 'input', value: string): void
-  /** 内容变更状态 - 通知父组件是否有内容 */
-  (e: 'content-status', hasContent: boolean): void
-  /** 字段激活状态变更 */
-  (e: 'field-active', isActive: boolean, index: number): void
-}
-
-/**
- * 模板编辑器暴露的方法
- */
-export interface TemplateEditorExpose {
-  /** 激活第一个可编辑字段 */
-  activateFirstField: () => void
-  /** 重置所有字段 */
-  resetFields: () => void
-}

package/src/sender/index.vue

@@ -1,338 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from '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'
-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>(), {
-  autofocus: false,
-  autoSize: false,
-  allowSpeech: true,
-  allowFiles: false,
-  clearable: false,
-  disabled: false,
-  loading: false,
-  modelValue: '',
-  mode: 'single',
-  maxLength: Infinity,
-  placeholder: '请输入内容...',
-  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: originalClearInput }: InputHandler = useInputHandler(props, emit)
-
-// 清空功能增强：同时处理模板和普通输入，并退出模板编辑模式
-const clearInput = () => {
-  // 调用原始清空方法
-  originalClearInput()
-
-  // 如果当前是模板编辑模式，需要退出模板编辑模式
-  if (props.template) {
-    // 发出一个模板重置事件，通知父组件清除模板
-    emit('reset-template')
-  }
-}
-
-// 输入建议
-const showSuggestions = ref(false)
-const filteredSuggestions = computed(() => {
-  if (!props.suggestions || !inputValue.value) return []
-  return props.suggestions.filter((item) => item.toLowerCase().includes(inputValue.value.toLowerCase()))
-})
-
-const selectSuggestion = (value: string) => {
-  inputValue.value = value
-  showSuggestions.value = false
-  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 : {}),
-  onStart: () => emit('speech-start'),
-  onEnd: (transcript?: string) => emit('speech-end', transcript),
-  onInterim: (transcript: string) => emit('speech-interim', transcript),
-  onFinal: (text: string) => {
-    inputValue.value = text
-    emit('speech-end', text)
-  },
-  onError: (err: Error) => {
-    showError(err.message)
-    emit('speech-error', err)
-  },
-}))
-
-const { speechState, start: startSpeech, stop: stopSpeech } = useSpeechHandler(speechOptions.value)
-
-// 语音控制
-const toggleSpeech = () => {
-  if (speechState.isRecording) {
-    stopSpeech()
-  } else {
-    startSpeech()
-  }
-}
-
-// 键盘处理
-const { handleKeyPress, triggerSubmit }: KeyboardHandler = useKeyboardHandler(
-  props,
-  emit,
-  inputValue,
-  isComposing,
-  speechState,
-  showSuggestions,
-  toggleSpeech,
-)
-
-// 处理焦点事件
-const handleFocus = (event: FocusEvent) => {
-  emit('focus', event)
-}
-
-const handleBlur = (event: FocusEvent) => {
-  emit('blur', event)
-}
-
-// 初始化自适应对象
-const autoSize = computed(() => (props.mode === 'multiple' ? { minRows: 2, maxRows: 5 } : { maxRows: 1 }))
-
-const justifyContent = computed(
-  (): {
-    display: string
-    justifyContent: 'space-between' | 'flex-end'
-    alignItems: string
-  } => {
-    const justifyContent = props.showWordLimit && props.maxLength !== Infinity ? 'space-between' : 'flex-end'
-
-    return {
-      display: 'flex',
-      justifyContent,
-      alignItems: 'center',
-    }
-  },
-)
-
-// 状态计算
-const isDisabled = computed(() => props.disabled)
-const isLoading = computed(() => props.loading)
-const hasContent = computed(() => (props.hasContent !== undefined ? props.hasContent : !!inputValue.value))
-
-// 样式类
-const senderClasses = computed(() => ({
-  'is-disabled': isDisabled.value,
-  'is-loading': isLoading.value,
-  'has-error': !!errorMessage.value,
-}))
-
-// 错误处理
-const errorMessage = ref<string>('')
-const showError = (msg: string) => {
-  errorMessage.value = msg
-  setTimeout(() => (errorMessage.value = ''), 5000)
-}
-
-// 输入法结束处理
-const handleCompositionEnd = () => {
-  isComposing.value = false
-  setTimeout(() => (isComposing.value = false), 50)
-}
-
-// 监听输入变化
-watch(inputValue, () => {
-  showSuggestions.value = !!props.suggestions && !!inputValue.value
-})
-
-// 暴露方法
-defineExpose({
-  focus: () => {
-    if (showTemplateEditor.value && templateEditorRef.value) {
-      activateTemplateFirstField()
-    } else if (inputRef.value) {
-      inputRef.value.focus()
-    } else {
-      const input = document.querySelector('.tiny-input__inner') as HTMLInputElement
-      input?.focus()
-    }
-  },
-  blur: () => {
-    if (inputRef.value) {
-      inputRef.value.blur()
-    } else {
-      const input = document.querySelector('.tiny-input__inner') as HTMLInputElement
-      input?.blur()
-    }
-  },
-  clear: clearInput,
-  submit: triggerSubmit,
-  startSpeech,
-  stopSpeech,
-  activateTemplateFirstField,
-})
-</script>
-
-<template>
-  <div class="tiny-sender" :class="[senderClasses, `theme-${theme}`, `mode-${mode}`]" :data-theme="theme">
-    <!-- 输入区域容器 -->
-    <div class="tiny-sender__container">
-      <div class="tiny-sender__input-wrapper">
-        <!-- 头部插槽 -->
-        <Transition name="tiny-sender-slide-down">
-          <div v-if="$slots.header" class="tiny-sender__header-slot">
-            <slot name="header"></slot>
-          </div>
-        </Transition>
-
-        <!-- 输入行 - 横向布局 -->
-        <div class="tiny-sender__input-row" :class="{ 'has-prefix': $slots.prefix, 'has-header': $slots.header }">
-          <!-- 前缀插槽 -->
-          <div v-if="$slots.prefix" class="tiny-sender__prefix-slot">
-            <slot name="prefix" />
-          </div>
-
-          <!-- 内容区域 - 确保最小宽度，不被挤占 -->
-          <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="textarea"
-              :readonly="isLoading"
-              resize="none"
-              v-model="inputValue"
-              :disabled="isDisabled"
-              :placeholder="placeholder"
-              :maxlength="maxLength"
-              :autofocus="autofocus"
-              @keydown="handleKeyPress"
-              @compositionstart="isComposing = true"
-              @compositionend="handleCompositionEnd"
-              @focus="handleFocus"
-              @blur="handleBlur"
-            />
-          </div>
-
-          <!-- 操作区域/后置插槽 -->
-          <div v-if="mode === 'single'" class="tiny-sender__actions-slot">
-            <div class="tiny-sender__buttons-container">
-              <slot name="actions" />
-              <action-buttons
-                class="inline-buttons"
-                :allow-speech="allowSpeech"
-                :allow-files="allowFiles"
-                :loading="loading"
-                :disabled="isDisabled"
-                :show-clear="clearable"
-                :has-content="hasContent"
-                :speech-status="speechState"
-                :submit-type="submitType"
-                @clear="clearInput"
-                @toggle-speech="toggleSpeech"
-                @submit="triggerSubmit"
-                @cancel="$emit('cancel')"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- 底部插槽 - 底部工具栏作为默认内容 -->
-        <Transition name="tiny-sender-slide-up">
-          <div v-if="$slots.footer" class="tiny-sender__footer-slot">
-            <slot name="footer"></slot>
-          </div>
-          <div
-            v-else-if="mode !== 'single' || (showWordLimit && maxLength !== Infinity)"
-            :style="justifyContent"
-            class="tiny-sender__footer-slot tiny-sender__bottom-row"
-          >
-            <!-- 字数限制 -->
-            <div v-if="showWordLimit && maxLength !== Infinity" class="tiny-sender__word-limit">
-              {{ inputValue.length }}/{{ maxLength }}
-            </div>
-
-            <!-- 多行模式下的操作按钮 -->
-            <div v-if="mode === 'multiple'" class="tiny-sender__toolbar">
-              <div class="tiny-sender__buttons-container">
-                <action-buttons
-                  :allow-speech="allowSpeech"
-                  :allow-files="allowFiles"
-                  :loading="loading"
-                  :disabled="isDisabled"
-                  :show-clear="clearable"
-                  :has-content="hasContent"
-                  :speech-status="speechState"
-                  :submit-type="submitType"
-                  @clear="clearInput"
-                  @toggle-speech="toggleSpeech"
-                  @submit="triggerSubmit"
-                  @cancel="$emit('cancel')"
-                />
-              </div>
-            </div>
-          </div>
-        </Transition>
-      </div>
-    </div>
-
-    <!-- 输入建议 -->
-    <Transition name="tiny-sender-slide-up">
-      <div v-if="showSuggestions && filteredSuggestions.length" class="tiny-sender__suggestions">
-        <div
-          v-for="(item, index) in filteredSuggestions"
-          :key="index"
-          class="suggestion-item"
-          @click="selectSuggestion(item)"
-        >
-          {{ item }}
-        </div>
-      </div>
-    </Transition>
-
-    <!-- 错误提示 -->
-    <div v-if="errorMessage" class="tiny-sender__error">
-      {{ errorMessage }}
-    </div>
-  </div>
-</template>

package/src/sender/vars.less

@@ -1,84 +0,0 @@
-// 主题变量
-:root {
-  // 基础颜色
-  --tr-sender-border-color: #dcdfe6;
-  --tr-sender-bg-color: #fff;
-  --tr-sender-text-color: #303133;
-  --tr-sender-text-color-secondary: #909399;
-  --tr-sender-error-color: #f56c6c;
-  --tr-sender-input-disabled-bg-color: #f0f0f0;
-  --tr-sender-word-limit-color: #808080;
-  --tr-sender-button-icon-color: #5e7ce0;
-
-  // 尺寸
-  --tr-sender-border-radius: 28px;
-  --tr-sender-padding-top: 15px;
-  --tr-sender-padding-right: 10px;
-  --tr-sender-padding-bottom: 10px;
-  --tr-sender-padding-left: 24px;
-  --tr-sender-gap: 8px;
-  --tr-sender-input-height: 26px;
-  --tr-sender-input-min-height: 60px;
-  --tr-sender-icon-size: 22px;
-  --tr-sender-icon-size-small: 18px;
-
-  // 字体
-  --tr-sender-font-size: 14px;
-  --tr-sender-font-size-small: 12px;
-
-  // 动画
-  --tr-sender-transition-duration: 0.2s;
-
-  // 阴影
-  --tr-sender-box-shadow: 0 4px 16px 0px rgba(0, 0, 0, 0.08);
-  --tr-sender-focus-shadow: 0 0 0 2px rgba(94, 124, 224, 0.3);
-
-  // 插槽变量
-  // 头部插槽 (Header)
-  --tr-sender-header-max-height: 120px;
-  --tr-sender-header-min-height: 40px;
-  --tr-sender-header-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --tr-sender-header-padding: 10px;
-
-  // 前缀插槽 (Prefix)
-  --tr-sender-prefix-width: 60px;
-  --tr-sender-prefix-min-width: 44px;
-  --tr-sender-prefix-hover-bg: #f5f5f5;
-  --tr-sender-prefix-padding-left: 16px;
-
-  // 内容区域 (Content)
-  --tr-sender-content-min-width: 180px;
-  --tr-sender-content-padding: 15px 10px 12px 24px;
-  --tr-sender-content-padding-with-prefix: 15px 10px 10px 8px;
-  --tr-sender-content-flex-grow: 1;
-
-  // 操作区域 (Actions)
-  --tr-sender-actions-width: auto;
-  --tr-sender-actions-min-width: 32px;
-  --tr-sender-actions-gap: 8px;
-  --tr-sender-actions-icon-size: 20px;
-  --tr-sender-actions-padding-right: 10px;
-
-  // 底部插槽 (Footer)
-  --tr-sender-footer-max-height: 200px;
-  --tr-sender-footer-min-height: 0;
-  --tr-sender-footer-bg: #fff;
-  --tr-sender-footer-hover: #f9f9f9;
-}
-
-/* 暗色主题 */
-.theme-dark,
-[data-theme='dark'] {
-  --tr-sender-border-color: #4c4d4f;
-  --tr-sender-bg-color: #1c1c1c;
-  --tr-sender-text-color: #ffffff;
-  --tr-sender-text-color-secondary: #a0a0a0;
-  --tr-sender-input-disabled-bg-color: #2a2a2a;
-  --tr-sender-box-shadow: 0 4px 16px 0px rgba(0, 0, 0, 0.2);
-  --tr-sender-button-icon-color: #a0a0a0;
-
-  // 暗色主题插槽变量
-  --tr-sender-prefix-hover-bg: #333;
-  --tr-sender-footer-bg: #2c2c2c;
-  --tr-sender-footer-hover: #3a3a3a;
-}

package/src/suggestion/components/CategoryNav.vue

@@ -1,38 +0,0 @@
-<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>