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

package/src/question/vars.less

@@ -1,135 +0,0 @@
-/* ----------------- 颜色变量 ----------------- */
-:root {
-  /* 主题基础颜色 */
-  --tr-question-primary-color: #1890ff;
-  --tr-question-background-color: #ffffff;
-  --tr-question-modal-background-color: #ffffff;
-  --tr-question-text-color: #333333;
-  --tr-question-text-color-secondary: #666666;
-  --tr-question-border-color: #e8e8e8;
-  --tr-question-hover-color: #f5f5f5;
-  --tr-question-tab-hover-bg: #f0f0f0;
-  --tr-question-active-tab-color: var(--tr-question-primary-color);
-  --tr-question-active-tab-bg: #e6f7ff;
-
-  /* 弹窗相关颜色 */
-  --tr-question-header-bg: #f9f9f9;
-  --tr-question-title-color: #1d2129;
-  --tr-question-close-icon-color: #86909c;
-  --tr-question-tab-active-bg: #e8f3ff;
-  --tr-question-tab-active-text: #1890ff;
-  --tr-question-tab-text: #4e5969;
-  --tr-question-tab-border: #f0f0f0;
-  --tr-question-list-divider-color: #f0f0f0;
-  --tr-question-modal-backdrop-color: rgba(0, 0, 0, 0.5);
-  
-  /* 常见问题颜色 */
-  --tr-question-common-bg: #fff;
-  --tr-question-common-text: #191919;
-  --tr-question-common-hover-bg: #ebebeb;
-  --tr-question-common-shadow: rgba(0, 0, 0, 0.04);
-  
-  /* 背景颜色 */
-  --tr-question-container-bg: #f8f8f8;
-  --tr-question-list-item-bg: #fff;
-  --tr-question-list-hover-shadow: rgba(0, 0, 0, 0.08);
-  --tr-question-category-bg: rgba(0, 0, 0, 0.04);
-  --tr-question-category-hover-bg: rgba(0, 0, 0, 0.08);
-  --tr-question-category-active-border: #191919;
-  --tr-question-item-border-color: rgba(0, 0, 0, 0.04);
-  
-  /* 滚动条颜色 */
-  --tr-question-scrollbar-track-bg: rgba(16, 31, 28, 0.1);
-  --tr-question-scrollbar-thumb-bg: rgba(144, 147, 153, 0.5);
-  --tr-question-scrollbar-thumb-hover-bg: rgba(144, 147, 153, 0.3);
-
-  /* ----------------- 尺寸变量 ----------------- */
-  /* 圆角 */
-  --tr-question-border-radius: 24px;
-  --tr-question-category-border-radius: 8px;
-  --tr-question-list-border-radius: 12px;
-  --tr-question-common-border-radius: 16px;
-  --tr-question-scrollbar-border-radius: 2em;
-  
-  /* 间距和尺寸 */
-  --tr-question-spacing: 16px;
-  --tr-question-icon-size: 16px;
-  --tr-question-container-height: 46px;
-  --tr-question-item-height: 56px;
-  --tr-question-trigger-size: 32px;
-  --tr-question-common-item-height: 32px;
-  --tr-question-category-height: 38px;
-  --tr-question-scrollbar-width: 4px;
-  --tr-question-modal-padding: 24px;
-  --tr-question-modal-max-height: 80vh;
-  --tr-question-modal-max-width: 640px;
-  --tr-question-content-max-height: calc(80vh - 120px);
-
-  /* ----------------- 文字变量 ----------------- */
-  /* 字体 */
-  --tr-question-font-size: 14px;
-  --tr-question-title-font-size: 18px;
-  --tr-question-title-font-weight: 600;
-  --tr-question-item-font-weight: 400;
-  --tr-question-line-height: 1.5;
-  --tr-question-item-line-height: 22px;
-
-  /* ----------------- 特效变量 ----------------- */
-  /* 阴影 */
-  --tr-question-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  --tr-question-trigger-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
-  --tr-question-common-item-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
-  --tr-question-list-item-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  --tr-question-wrap-trigger-shadow: 2px 0 9px rgba(0, 0, 0, 0.04);
-
-  /* 动画 */
-  --tr-question-transition-duration: 0.3s;
-  --tr-question-transition-timing: ease;
-  --tr-question-hover-transition: all var(--tr-question-transition-duration) var(--tr-question-transition-timing);
-}
-
-/* ----------------- 暗色主题变量 ----------------- */
-[data-theme='dark'] {
-  /* 主题基础颜色 */
-  --tr-question-primary-color: #177ddc;
-  --tr-question-background-color: #1f1f1f;
-  --tr-question-modal-background-color: #2a2a2a;
-  --tr-question-text-color: #f0f0f0;
-  --tr-question-text-color-secondary: #aaaaaa;
-  --tr-question-border-color: #434343;
-  --tr-question-hover-color: #303030;
-  --tr-question-tab-hover-bg: #3a3a3a;
-  --tr-question-active-tab-color: var(--tr-question-primary-color);
-  --tr-question-active-tab-bg: #113a5c;
-
-  /* 弹窗相关颜色 */
-  --tr-question-header-bg: #2a2a2a;
-  --tr-question-title-color: #c9d1d9;
-  --tr-question-close-icon-color: #8b949e;
-  --tr-question-tab-active-bg: #30363d;
-  --tr-question-tab-active-text: #58a6ff;
-  --tr-question-tab-text: #8b949e;
-  --tr-question-tab-border: #30363d;
-  --tr-question-list-divider-color: #30363d;
-  --tr-question-modal-backdrop-color: rgba(0, 0, 0, 0.7);
-  
-  /* 常见问题颜色 */
-  --tr-question-common-bg: #2a2a2a;
-  --tr-question-common-text: #e6e6e6;
-  --tr-question-common-hover-bg: #3a3a3a;
-  --tr-question-common-shadow: rgba(0, 0, 0, 0.2);
-  
-  /* 背景颜色 */
-  --tr-question-container-bg: #141414;
-  --tr-question-list-item-bg: #2a2a2a;
-  --tr-question-list-hover-shadow: rgba(0, 0, 0, 0.3);
-  --tr-question-category-bg: rgba(255, 255, 255, 0.04);
-  --tr-question-category-hover-bg: rgba(255, 255, 255, 0.08);
-  --tr-question-category-active-border: #e6e6e6;
-  --tr-question-item-border-color: rgba(255, 255, 255, 0.04);
-  
-  /* 滚动条颜色 */
-  --tr-question-scrollbar-track-bg: rgba(255, 255, 255, 0.05);
-  --tr-question-scrollbar-thumb-bg: rgba(255, 255, 255, 0.2);
-  --tr-question-scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.3);
-}

package/src/sender/components/ActionButtons.vue

@@ -1,168 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import TinyButton from '@opentiny/vue-button'
-import { IconClose } from '@opentiny/vue-icon'
-import { ActionButtonsProps } from '../index.type'
-
-const TinyIconCloseSquare = IconClose()
-
-const props = withDefaults(defineProps<ActionButtonsProps>(), {
-  /**
-   * 是否显示加载状态
-   * @default false
-   */
-  loading: false,
-  /**
-   * 是否禁用所有操作
-   * @default false
-   */
-  disabled: false,
-  /**
-   * 是否显示清除按钮
-   * @default true
-   */
-  showClear: true,
-  /**
-   * 输入框是否有内容
-   * @default false
-   */
-  hasContent: false,
-  /**
-   * 是否允许语音功能
-   */
-  allowSpeech: false,
-  speechStatus: () => ({
-    isRecording: false,
-    isSupported: false,
-  }),
-  /**
-   * 是否允许附件功能
-   */
-  allowFiles: false,
-  /**
-   * 提交快捷方式
-   * @default 'enter'
-   */
-  submitType: 'enter',
-})
-
-const emit = defineEmits<{
-  /**
-   * 清除内容事件
-   */
-  (e: 'clear'): void
-  /**
-   * 切换语音识别状态事件
-   */
-  (e: 'toggle-speech', state: boolean): void
-  /**
-   * 提交内容事件
-   */
-  (e: 'submit'): void
-  /**
-   * 取消发送事件，用于取消加载状态
-   */
-  (e: 'cancel'): void
-}>()
-
-/**
- * 是否启用语音功能
- */
-const speechEnabled = computed(() => props.allowSpeech)
-
-const isSpeechRecording = computed(() => props.speechStatus.isRecording)
-
-/**
- * 整体禁用状态
- */
-const isDisabled = computed(() => props.disabled)
-
-/**
- * 处理清除操作
- */
-const handleClear = () => {
-  if (!isDisabled.value) {
-    emit('clear')
-  }
-}
-
-/**
- * 切换语音识别状态
- */
-const handleToggleSpeech = () => {
-  if (!isDisabled.value) {
-    const newState = !props.speechStatus.isRecording
-    emit('toggle-speech', newState)
-  }
-}
-
-/**
- * 处理提交操作
- */
-const handleSubmit = () => {
-  if (!isDisabled.value) {
-    emit('submit')
-  }
-}
-
-/**
- * 处理取消操作
- */
-const handleCancel = () => {
-  if (!isDisabled.value) {
-    emit('cancel')
-  }
-}
-</script>
-
-<template>
-  <div class="action-buttons">
-    <!-- 文件上传按钮 -->
-    <template v-if="allowFiles && !loading">
-      <tiny-tooltip content="上传文件" placement="top">
-        <tiny-button type="text" :disabled="isDisabled">
-          <img src="../../assets/icons/accessory.svg" class="button-icon" alt="上传文件" />
-        </tiny-button>
-      </tiny-tooltip>
-    </template>
-
-    <!-- 语音按钮：仅在启用语音功能时显示 -->
-    <template v-if="speechEnabled && !loading">
-      <tiny-button
-        type="text"
-        :disabled="isDisabled"
-        @click="handleToggleSpeech"
-        class="speech-button"
-        :class="{ 'is-recording': isSpeechRecording }"
-      >
-        <img v-if="!isSpeechRecording" src="../../assets/icons/voice.svg" class="button-icon" alt="录音" />
-        <img v-else src="../../assets/icons/loading-speech.svg" class="button-icon recording-icon" alt="语音中" />
-      </tiny-button>
-    </template>
-
-    <template v-if="showClear">
-      <tiny-tooltip content="清空内容" placement="top">
-        <tiny-button type="text" :disabled="isDisabled || !hasContent" @click="handleClear" style="margin-left: 0">
-          <component :is="TinyIconCloseSquare" class="button-icon" />
-        </tiny-button>
-      </tiny-tooltip>
-    </template>
-
-    <!-- 提交按钮：主操作按钮 -->
-    <template v-if="hasContent || loading">
-      <tiny-button
-        type="text"
-        :class="loading ? 'cancel-button' : 'submit-button'"
-        :disabled="isDisabled"
-        @click="loading ? handleCancel() : handleSubmit()"
-      >
-        <div class="button-content">
-          <img v-if="!loading" src="../../assets/icons/send.svg" alt="发送" />
-          <tiny-tooltip v-else content="停止生成" placement="top">
-            <img src="../../assets/icons/loading.svg" alt="加载中" class="loading" />
-          </tiny-tooltip>
-        </div>
-      </tiny-button>
-    </template>
-  </div>
-</template>

package/src/sender/components/TemplateEditor.vue

@@ -1,274 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, nextTick, watch } from 'vue'
-import { TemplatePart, TemplateEditorProps, TemplateEditorEmits, TemplateEditorExpose } from '../index.type'
-
-// 使用类型定义props
-const props = defineProps<TemplateEditorProps>()
-
-// 使用类型定义emits
-const emit = defineEmits<TemplateEditorEmits>()
-
-// 编辑器DOM引用
-const editorRef = ref<HTMLElement | null>(null)
-
-// 输入框引用集合
-// eslint-disable-next-line
-const inputRefs = ref<any>({})
-
-// 当前激活的输入块索引
-const activeFieldIndex = ref<number>(-1)
-
-// 解析模板，将其分解为普通文本和可编辑字段
-const templateParts = computed<TemplatePart[]>(() => {
-  // TODO: 如果已有值，使用现有值填充模板
-  if (props.value) {
-    return parseValueIntoTemplate()
-  }
-
-  // 否则使用模板解析
-  const parts: TemplatePart[] = []
-  let currentIndex = 0
-  let fieldIndex = 0
-
-  // 正则表达式匹配 [xxx] 格式
-  const regex = /\[(.*?)\]/g
-  let match
-
-  while ((match = regex.exec(props.template)) !== null) {
-    // 添加匹配前的普通文本
-    if (match.index > currentIndex) {
-      parts.push({
-        content: props.template.substring(currentIndex, match.index),
-        isField: false,
-      })
-    }
-
-    // 添加匹配的字段
-    parts.push({
-      content: '',
-      placeholder: match[1],
-      isField: true,
-      fieldIndex: fieldIndex++,
-    })
-
-    currentIndex = match.index + match[0].length
-  }
-
-  // 添加剩余的普通文本
-  if (currentIndex < props.template.length) {
-    parts.push({
-      content: props.template.substring(currentIndex),
-      isField: false,
-    })
-  }
-
-  return parts
-})
-
-// 解析现有值填充到模板中
-const parseValueIntoTemplate = (): TemplatePart[] => {
-  // 在实际应用中，这里应该根据模板和现有值进行匹配
-  return templateParts.value
-}
-
-// 生成完整的文本值
-const generateValue = (): string => {
-  return templateParts.value.map((part) => part.content).join('')
-}
-
-// 更新值并触发事件
-const updateValue = (): void => {
-  const newValue = generateValue()
-  emit('update:value', newValue)
-  emit('input', newValue)
-}
-
-// 激活输入块
-const activateField = (index: number): void => {
-  activeFieldIndex.value = index
-
-  // 确保DOM更新后再聚焦
-  nextTick(() => {
-    if (inputRefs.value[index]) {
-      inputRefs.value[index]?.focus()
-    }
-  })
-}
-
-// 取消激活输入块
-const deactivateField = (): void => {
-  updateValue()
-  activeFieldIndex.value = -1
-}
-
-// 处理输入框键盘事件
-const handleInputKeyDown = (event: KeyboardEvent, index: number): void => {
-  if (event.key === 'Tab') {
-    event.preventDefault()
-
-    // 找到下一个输入块
-    const nextFieldIndex = findNextFieldIndex(index, event.shiftKey)
-    if (nextFieldIndex !== -1) {
-      // 先更新当前值
-      updateValue()
-      // 再激活下一个字段
-      activateField(nextFieldIndex)
-    }
-  } else if (event.key === 'Enter') {
-    event.preventDefault()
-    deactivateField()
-  }
-}
-
-// 寻找下一个输入块索引，支持通过 shift+tab 反向查找
-const findNextFieldIndex = (currentIndex: number, isReverse = false): number => {
-  if (isReverse) {
-    // 向前查找（Shift+Tab）
-    for (let i = currentIndex - 1; i >= 0; i--) {
-      if (templateParts.value[i].isField) {
-        return i
-      }
-    }
-
-    // 如果没有找到，则循环到最后一个字段
-    for (let i = templateParts.value.length - 1; i > currentIndex; i--) {
-      if (templateParts.value[i].isField) {
-        return i
-      }
-    }
-  } else {
-    // 向后查找（Tab）
-    for (let i = currentIndex + 1; i < templateParts.value.length; i++) {
-      if (templateParts.value[i].isField) {
-        return i
-      }
-    }
-
-    // 循环回到第一个输入块
-    for (let i = 0; i < currentIndex; i++) {
-      if (templateParts.value[i].isField) {
-        return i
-      }
-    }
-  }
-
-  return -1
-}
-
-// 监听值变化
-watch(
-  () => props.value,
-  (newValue) => {
-    // 如果外部值为空字符串，清空所有字段内容
-    if (newValue === '') {
-      resetFields()
-    }
-  },
-)
-
-// 重置所有字段内容
-const resetFields = (): void => {
-  // 清空所有输入块内容
-  templateParts.value.forEach((part) => {
-    if (part.isField) {
-      part.content = ''
-    }
-  })
-  // 更新值
-  updateValue()
-}
-
-// 导出方法供父组件调用
-defineExpose<TemplateEditorExpose>({
-  activateFirstField: () => {
-    for (let i = 0; i < templateParts.value.length; i++) {
-      if (templateParts.value[i].isField) {
-        activateField(i)
-        break
-      }
-    }
-  },
-  resetFields,
-})
-</script>
-
-<template>
-  <div class="template-editor">
-    <div class="template-content" ref="editorRef">
-      <template v-for="(part, index) in templateParts" :key="index">
-        <!-- 普通文本部分 -->
-        <span v-if="!part.isField">{{ part.content }}</span>
-
-        <!-- 可编辑的输入块部分 -->
-        <span
-          v-else
-          class="template-field"
-          :class="{ 'template-field-active': activeFieldIndex === index }"
-          @click="activateField(index)"
-        >
-          <input
-            v-if="activeFieldIndex === index"
-            :ref="(el) => (inputRefs[index] = el)"
-            v-model="part.content"
-            class="template-input"
-            @blur="deactivateField()"
-            @keydown="handleInputKeyDown($event, index)"
-            @click.stop
-          />
-          <span v-else class="template-placeholder">{{ part.content || part.placeholder }}</span>
-        </span>
-      </template>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.template-editor {
-  width: 100%;
-  min-height: 26px;
-  line-height: 26px;
-}
-
-.template-content {
-  display: inline;
-  word-break: break-word;
-}
-
-.template-field {
-  display: inline-block;
-  height: 26px;
-  min-width: fit-content;
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.05);
-  padding: 0 10px;
-  margin: 0 2px;
-  vertical-align: middle;
-  cursor: text;
-  transition: all 0.2s ease;
-}
-
-.template-field:hover {
-  background: rgba(0, 0, 0, 0.08);
-}
-
-.template-placeholder {
-  color: #666;
-  user-select: none;
-}
-
-.template-input {
-  box-sizing: border-box;
-  width: 100%;
-  height: 26px;
-  border: 1px solid rgb(194, 194, 194);
-  border-radius: 4px;
-  padding: 0 10px;
-  outline: none;
-  background: white;
-}
-
-.template-field-active {
-  background: transparent;
-  padding: 0;
-}
-</style>

package/src/sender/composables/useInputHandler.ts

@@ -1,74 +0,0 @@
-import { ref, watch } from 'vue'
-import type { SenderProps, SenderEmits } from '../index.type'
-
-/**
- * 输入框值处理 Hook
- * 对输入框的值进行集中处理
- *
- * @param props 组件属性
- * @param emit  组件方法
- */
-export function useInputHandler(props: SenderProps, emit: SenderEmits) {
-  const inputValue = ref(props.modelValue || props.defaultValue || '')
-  const inputWrapper = ref<HTMLElement | null>(null)
-
-  // 同步外部值变化
-  watch(
-    () => props.modelValue,
-    (val) => {
-      if (val !== undefined && val !== inputValue.value) {
-        inputValue.value = val
-      }
-    },
-  )
-
-  // 监听内部值变化，触发update:modelValue事件
-  watch(
-    () => inputValue.value,
-    (val) => {
-      emit('update:modelValue', val)
-    },
-  )
-
-  // 双向绑定处理
-  const handleChange = (value: string) => {
-    inputValue.value = value
-    emit('update:modelValue', value)
-  }
-
-  // 提交处理
-  const handleSubmit = (event?: Event) => {
-    event?.preventDefault()
-
-    const submitValue = inputValue.value
-
-    if (!props.disabled && !props.loading && submitValue.trim()) {
-      emit('submit', submitValue)
-    }
-  }
-
-  // 清空输入
-  const handleClear = () => {
-    inputValue.value = ''
-    emit('update:modelValue', '')
-    emit('clear')
-  }
-
-  // 输入法状态
-  const isComposing = ref(false)
-
-  // 清除输入
-  const clearInput = () => {
-    handleClear()
-  }
-
-  return {
-    inputValue,
-    inputWrapper,
-    isComposing,
-    handleChange,
-    handleSubmit,
-    handleClear,
-    clearInput,
-  }
-}