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

package/src/sender/composables/useKeyboardHandler.ts

@@ -1,101 +0,0 @@
-import { Ref } from 'vue'
-import type { SenderProps, SenderEmits, SpeechState, SubmitTrigger } from '../index.type'
-
-/**
- * 键盘处理Hook
- * 集中管理组件的键盘相关操作
- *
- * @param props - 组件属性
- * @param emit - 组件方法
- * @param inputValue - 输入值
- * @param isComposing - 是否处于输入法组合状态（即编辑态）
- * @param speechState - 语音识别状态
- * @param showSuggestions - 是否显示建议列表
- * @param toggleSpeech - 切换语音识别函数
- */
-export function useKeyboardHandler(
-  props: SenderProps,
-  emit: SenderEmits,
-  inputValue: Ref<string>,
-  isComposing: Ref<boolean>,
-  speechState: SpeechState,
-  showSuggestions: Ref<boolean>,
-  toggleSpeech: () => void,
-) {
-  /**
-   * 验证提交条件
-   */
-  const validateSubmission = (value: string) => {
-    return !props.disabled && !props.loading && value.trim().length > 0
-  }
-
-  /**
-   * 触发提交
-   */
-  const triggerSubmit = () => {
-    if (!validateSubmission(inputValue.value)) return
-    emit('submit', inputValue.value.trim())
-  }
-
-  /**
-   * 检查是否为指定的提交快捷键
-   * @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'
-    if (!isEnter) return false
-
-    switch (submitType) {
-      case 'enter':
-        return !event.shiftKey && !event.ctrlKey && !event.metaKey
-      case 'ctrlEnter':
-        return (event.ctrlKey || event.metaKey) && !event.shiftKey
-      case 'shiftEnter':
-        return event.shiftKey && !event.ctrlKey && !event.metaKey
-      default:
-        return false
-    }
-  }
-
-  /**
-   * 处理键盘按下事件
-   */
-  const handleKeyPress = (event: KeyboardEvent) => {
-    if (isComposing.value) return // 阻止输入法状态下的提交
-
-    // 处理Esc键 - 关闭建议列表或停止语音录制
-    if (event.key === 'Escape') {
-      if (showSuggestions.value) {
-        showSuggestions.value = false
-        event.preventDefault()
-      } else if (speechState.isRecording) {
-        toggleSpeech()
-        event.preventDefault()
-      }
-
-      emit('escape-press')
-      return
-    }
-
-    // 检查是否匹配当前的提交快捷键
-    const shouldSubmit = checkSubmitShortcut(event, props.submitType as SubmitTrigger)
-
-    // 只有当满足提交条件且输入框有内容时才提交
-    if (shouldSubmit && validateSubmission(inputValue.value)) {
-      event.preventDefault()
-      triggerSubmit()
-    }
-  }
-
-  return {
-    handleKeyPress,
-    triggerSubmit,
-  }
-}

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 }