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

package/src/sender/composables/useSpeechHandler.ts

@@ -1,122 +0,0 @@
-import { reactive } from 'vue'
-import type { SpeechHookOptions, SpeechHandler, SpeechState } from '../index.type'
-
-/**
- * 语音识别处理 Hook
- * 集中管理语音识别相关逻辑
- *
- * @param options 语音识别配置
- */
-
-export function useSpeechHandler(options: SpeechHookOptions): SpeechHandler {
-  // 语音识别状态
-  const speechState = reactive<SpeechState>({
-    isRecording: false,
-    isSupported:
-      (typeof window !== 'undefined' && 'webkitSpeechRecognition' in window) || 'SpeechRecognition' in window,
-    error: undefined,
-  })
-
-  // 创建语音识别实例
-  const recognition: SpeechRecognition | undefined = speechState.isSupported
-    ? new (window.webkitSpeechRecognition || window.SpeechRecognition)()
-    : undefined
-
-  // 初始化语音识别配置
-  if (recognition !== undefined) {
-    recognition.continuous = options.continuous ?? false
-    recognition.interimResults = options.interimResults ?? true
-    recognition.lang = options.lang ?? navigator.language
-
-    // 开始识别事件
-    recognition.onstart = () => {
-      speechState.isRecording = true
-      speechState.error = undefined
-      options.onStart?.()
-    }
-
-    // 结束识别事件
-    recognition.onend = () => {
-      speechState.isRecording = false
-      options.onEnd?.()
-    }
-
-    // 中间结果事件
-    recognition.onresult = (event: SpeechRecognitionEvent) => {
-      const transcript = Array.from(event.results)
-        .map((result) => result[0].transcript)
-        .join('')
-
-      if (event.results[0].isFinal) {
-        options.onFinal?.(transcript)
-      } else {
-        options.onInterim?.(transcript)
-      }
-    }
-
-    // 错误处理
-    recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
-      speechState.error = new Error(event.error)
-      speechState.isRecording = false
-      options.onError?.(speechState.error)
-    }
-  }
-
-  // 开始录音
-  const start = () => {
-    if (!recognition) {
-      const error = new Error('浏览器不支持语音识别')
-      speechState.error = error
-      options.onError?.(error)
-      return
-    }
-
-    // 已经在录音中则先停止当前会话
-    if (speechState.isRecording) {
-      try {
-        recognition.stop()
-        // 短暂延迟后再开始新的录音会话
-        setTimeout(() => {
-          try {
-            recognition.start()
-          } catch (err) {
-            handleError(err)
-          }
-        }, 100)
-      } catch (err) {
-        handleError(err)
-      }
-      return
-    }
-
-    try {
-      recognition.start()
-    } catch (error) {
-      handleError(error)
-    }
-  }
-
-  // 停止录音
-  const stop = () => {
-    if (recognition && speechState.isRecording) {
-      try {
-        recognition.stop()
-      } catch (error) {
-        handleError(error)
-      }
-    }
-  }
-
-  // 处理错误
-  const handleError = (error: unknown) => {
-    speechState.error = error instanceof Error ? error : new Error('语音识别操作失败')
-    speechState.isRecording = false
-    options.onError?.(speechState.error)
-  }
-
-  return {
-    speechState,
-    start,
-    stop,
-  }
-}

package/src/sender/index.less

@@ -1,352 +0,0 @@
-@import './vars.less';
-
-// 主要组件样式
-.tiny-sender {
-  position: relative;
-  color: var(--tr-sender-text-color);
-
-  // TinyUI 输入框调整
-  .tiny-input__prefix {
-    left: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  .tiny-input__inner {
-    border: none;
-    padding-left: 0;
-    padding-right: 16px;
-    background-color: var(--tr-sender-bg-color);
-    color: var(--tr-sender-text-color);
-
-    &::placeholder {
-      color: var(--tr-sender-text-color-secondary);
-    }
-  }
-
-  .tiny-input.is-disabled .tiny-input__inner {
-    border: none;
-    background: var(--tr-sender-bg-color);
-    color: var(--tr-sender-text-color-secondary);
-  }
-
-  .tiny-textarea.is-disabled .tiny-textarea__inner {
-    border: none;
-    background: var(--tr-sender-bg-color);
-    color: var(--tr-sender-text-color-secondary);
-  }
-
-  .tiny-input__suffix {
-    right: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  .tiny-textarea__inner {
-    border: none;
-    height: 26px;
-
-    padding: 0;
-    align-content: center; // 使内容垂直居中
-    background-color: var(--tr-sender-bg-color);
-    color: var(--tr-sender-text-color);
-
-    &::placeholder {
-      color: var(--tr-sender-text-color-secondary);
-    }
-  }
-
-  .tiny-textarea:before,
-  .tiny-textarea:after {
-    display: none;
-  }
-
-  // 内容容器 - 包含输入框、工具栏等
-  &__container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  // 输入行 - 横向布局，包含prefix、content、actions
-  &__input-row {
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-  }
-
-  // 头部插槽
-  &__header-slot {
-    width: 100%;
-    max-height: var(--tr-sender-header-max-height);
-    min-height: var(--tr-sender-header-min-height);
-    overflow-y: auto;
-    border-radius: var(--tr-sender-border-radius) var(--tr-sender-border-radius) 0 0;
-    background: var(--tr-sender-bg-color);
-    padding: var(--tr-sender-header-padding);
-    margin-bottom: var(--tr-sender-gap);
-    z-index: 1;
-    border-bottom: 1px solid var(--tr-sender-border-color);
-  }
-
-  // 底部插槽
-  &__footer-slot {
-    width: 100%;
-    border-radius: 0 0 var(--tr-sender-border-radius) var(--tr-sender-border-radius);
-    background: var(--tr-sender-footer-bg);
-    z-index: 1;
-
-    &.tiny-sender__bottom-row {
-      padding: 2px 10px 10px 24px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .suggestion-item {
-      padding: var(--tr-sender-padding-top) var(--tr-sender-padding-right) var(--tr-sender-padding-bottom)
-        var(--tr-sender-padding-left);
-      cursor: pointer;
-      transition: background-color var(--tr-sender-transition-duration);
-
-      &:hover {
-        background: var(--tr-sender-footer-hover);
-      }
-    }
-  }
-
-  // 输入区域
-  &__input-wrapper {
-    position: relative;
-    width: 100%;
-    margin: var(--tr-sender-gap) 0;
-    border: none;
-    padding: 0;
-    border-radius: var(--tr-sender-border-radius);
-    box-shadow: var(--tr-sender-box-shadow);
-    background-color: var(--tr-sender-bg-color);
-    display: flex;
-    flex-direction: column;
-
-    .tiny-input__count {
-      display: flex;
-    }
-
-    .tiny-input__count-inner {
-      height: 22px;
-      right: 0;
-    }
-  }
-
-  // 内容区域
-  &__content-area {
-    flex: var(--tr-sender-content-flex-grow) 1 var(--tr-sender-content-min-width);
-    min-width: var(--tr-sender-content-min-width);
-    padding: var(--tr-sender-content-padding);
-    position: relative;
-    overflow: hidden;
-
-    // 当前置插槽存在时，调整内边距
-    .has-prefix & {
-      padding: var(--tr-sender-content-padding-with-prefix);
-    }
-
-    .has-header & {
-      padding-top: 0;
-    }
-
-    .tiny-textarea,
-    .tiny-input {
-      width: 100%;
-    }
-  }
-
-  // 前缀区域
-  &__prefix-slot {
-    width: var(--tr-sender-prefix-width);
-    min-width: var(--tr-sender-prefix-min-width);
-    flex: 0 0 var(--tr-sender-prefix-width); /* 固定宽度，不可伸缩 */
-    display: flex;
-    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);
-
-    &:hover {
-      background-color: var(--tr-sender-prefix-hover-bg);
-    }
-  }
-
-  // 动作区域
-  &__actions-slot {
-    display: flex;
-    align-items: center;
-    gap: var(--tr-sender-actions-gap);
-    margin-left: auto;
-    flex: 0 0 auto; /* 不可伸缩，但可以根据内容自适应宽度 */
-    min-width: var(--tr-sender-actions-min-width);
-    padding-right: var(--tr-sender-actions-padding-right);
-
-    .button-icon {
-      font-size: var(--tr-sender-actions-icon-size);
-      transition: transform var(--tr-sender-transition-duration);
-
-      &:hover {
-        transform: scale(1.1);
-      }
-    }
-  }
-
-  &__bottom-row {
-    padding: 2px 10px 10px 24px;
-  }
-
-  // 字数限制
-  &__word-limit {
-    font-size: var(--tr-sender-font-size);
-    font-weight: 400;
-    line-height: 22px;
-    text-align: left;
-    letter-spacing: 0;
-    color: var(--tr-sender-word-limit-color);
-  }
-
-  // 输入建议
-  &__suggestions {
-    position: absolute;
-    bottom: 100%;
-    left: 0;
-    width: 100%;
-    background: var(--tr-sender-bg-color);
-    border: 1px solid var(--tr-sender-border-color);
-    border-radius: var(--tr-sender-border-radius);
-    box-shadow: var(--tr-sender-box-shadow);
-    z-index: 10;
-    max-height: 200px;
-    overflow-y: auto;
-  }
-
-  // 错误提示
-  &__error {
-    position: absolute;
-    bottom: -20px;
-    left: 0;
-    color: var(--tr-sender-error-color);
-    font-size: var(--tr-sender-font-size-small);
-  }
-
-  // 禁用状态
-  &.is-disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-  }
-
-  // 加载状态
-  &.is-loading {
-    cursor: wait;
-
-    .tiny-input__inner {
-      cursor: wait;
-      background-color: var(--tr-sender-bg-color);
-    }
-
-    .tiny-textarea__inner {
-      cursor: wait;
-      background-color: var(--tr-sender-bg-color);
-    }
-  }
-
-  // 错误状态
-  &.has-error {
-    border-color: var(--tr-sender-error-color);
-  }
-
-  // 响应式设计
-  @media (max-width: 768px) {
-    &__prefix-slot {
-      width: var(--tr-sender-prefix-min-width);
-      min-width: var(--tr-sender-prefix-min-width);
-    }
-
-    &__actions-slot {
-      padding: 0 calc(var(--tr-sender-padding-right) / 2);
-      gap: calc(var(--tr-sender-actions-gap) / 2);
-      min-width: auto;
-    }
-
-    &__header-slot,
-    &__footer-slot {
-      padding: calc(var(--tr-sender-padding-top) / 2);
-    }
-
-    &__content-area {
-      min-width: 120px;
-    }
-  }
-}
-
-// ActionButtons组件样式
-.action-buttons {
-  display: flex;
-  gap: var(--tr-sender-gap);
-  padding-left: var(--tr-sender-padding-left);
-  padding-right: var(--tr-sender-padding-right);
-  background: var(--tr-sender-bg-color);
-  border-radius: var(--tr-sender-border-radius);
-  align-items: center;
-
-  /* 按钮图标统一样式 */
-  .button-icon {
-    font-size: var(--tr-sender-icon-size);
-    transition: transform var(--tr-sender-transition-duration);
-    fill: var(--tr-sender-button-icon-color);
-    color: var(--tr-sender-button-icon-color);
-    margin-right: 0;
-
-    &:hover {
-      transform: scale(1.1);
-      border-radius: 8px;
-      background-color: var(--tr-sender-prefix-hover-bg);
-    }
-  }
-
-  .submit-button {
-    margin-left: 0;
-  }
-
-  /* 禁用状态样式 */
-  .is-disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-}
-
-.button-content {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  position: relative;
-
-  // 当只有图标时保持居中
-  &:empty {
-    display: block;
-  }
-}
-
-.shortcut-hint {
-  position: absolute;
-  bottom: -16px;
-  font-size: 10px;
-  color: var(--tr-sender-text-color-secondary);
-  white-space: nowrap;
-  user-select: none;
-}
-
-/** 处理相邻按钮元素边界  */
-.tiny-button + .tiny-button {
-  margin-left: 0;
-}

package/src/sender/index.ts

@@ -1,12 +0,0 @@
-import { App } from 'vue'
-import Sender from './index.vue'
-
-Sender.name = 'TrSender'
-
-const install = function <T>(app: App<T>) {
-  app.component(Sender.name!, Sender)
-}
-
-Sender.install = install
-
-export default Sender as typeof Sender & { install: typeof install }

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
-}