@opentiny/tiny-robot 0.1.0-alpha.0

package/src/bubble-list/index.type.ts

@@ -0,0 +1,65 @@
+import { Options as MarkdownItOptions } from 'markdown-it'
+import { Component, CSSProperties, VNode } from 'vue'
+
+export type BubbleRole = 'ai' | 'user'
+
+export interface BubbleRoleConfig {
+  avatar?: VNode
+  align: 'left' | 'right'
+}
+
+export type BubbleStatus = 'loading' | 'generating' | 'aborted' | 'complete' | 'error'
+
+export interface BubbleActionOptions {
+  name: string
+  vnode: VNode | Component
+  show?: boolean | ((props: BubbleItemProps) => boolean)
+}
+
+export type BubbleAction = 'copy' | 'regenerate' | 'like' | 'dislike' | 'continue' | 'edit' | BubbleActionOptions
+
+export interface BubbleItemProps {
+  /**
+   * 角色，`ai` 或 `user`
+   */
+  role: BubbleRole
+  /**
+   * 内容
+   */
+  content?: string
+  /**
+   * 内容类型
+   */
+  type?: 'text' | 'markdown'
+  /**
+   * 气泡状态
+   */
+  status?: BubbleStatus
+  /**
+   * 角色配置项
+   */
+  roleConfig?: BubbleRoleConfig
+  /**
+   * type 为 'markdown' 时，markdown 的配置项
+   */
+  mdConfig?: MarkdownItOptions
+  showActions?: boolean
+  actions?: BubbleAction[]
+  // 样式相关
+  maxWidth?: CSSProperties['maxWidth']
+}
+
+export interface BubbleActionConfig {
+  show?: boolean
+  actions?: BubbleAction[]
+}
+
+export interface BubbleListProps {
+  items: BubbleItemProps[]
+  roleConfigs?: Partial<Record<BubbleRole, BubbleRoleConfig>>
+  mdConfig?: MarkdownItOptions
+  actionConfigs?: Partial<Record<BubbleRole, BubbleActionConfig>>
+  autoScroll?: boolean
+  // 样式相关
+  maxWidth?: CSSProperties['maxWidth']
+}

package/src/conversations/index.ts

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

package/src/conversations/index.vue

@@ -0,0 +1,3 @@
+<script setup lang="ts"></script>
+
+<template>conversations</template>

package/src/index.ts

@@ -0,0 +1,30 @@
+import { App } from 'vue'
+import Welcome from './welcome'
+import Conversations from './conversations'
+import BubbleItem from './bubble-item'
+import BubbleList from './bubble-list'
+import Sender from './sender'
+
+export * from './bubble-list/index.type'
+
+const components = [Welcome, Conversations, BubbleItem, BubbleList, Sender]
+
+export default {
+  install<T>(app: App<T>) {
+    components.forEach((component) => {
+      const name = component.name?.replace(/^Tiny/, '').replace(/^Tr/, '')
+      app.component(`Tr${name}`, component)
+      app.component(`Tiny${name}`, component)
+    })
+  },
+}
+
+export {
+  Welcome as TrWelcome,
+  Conversations as TrConversations,
+  BubbleItem as TrBubbleItem,
+  BubbleItem as TinyBubbleItem,
+  BubbleList as TrBubbleList,
+  BubbleList as TinyBubbleList,
+  Sender as TrSender,
+}

package/src/sender/components/ActionButtons.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TinyButton, TinyTooltip } from '@opentiny/vue'
+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({
+  /**
+   * 清除内容事件
+   */
+  clear: () => true,
+  /**
+   * 切换语音识别状态事件
+   * @param {boolean} state - 新的语音识别状态
+   */
+  'toggle-speech': (state: boolean) => Boolean(state),
+  /**
+   * 提交内容事件
+   */
+  submit: () => true,
+})
+
+/**
+ * 是否启用语音功能
+ */
+const speechEnabled = computed(() => props.allowSpeech)
+
+/**
+ * 语音按钮提示文本
+ */
+const speechButtonText = computed(() => (props.speechStatus.isRecording ? '停止录音' : '开始语音输入'))
+
+const isSpeechRecording = computed(() => props.speechStatus.isRecording)
+
+/**
+ * 提交按钮tooltip
+ */
+const submitTooltip = computed(() => {
+  return props.loading ? `发送中...` : '发送消息'
+})
+
+/**
+ * 整体禁用状态
+ */
+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')
+  }
+}
+</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-tooltip :content="speechButtonText" placement="top">
+        <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>
+      </tiny-tooltip>
+    </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-tooltip :content="submitTooltip" placement="top">
+        <tiny-button type="text" @click="handleSubmit" class="submit-button" :disabled="isDisabled">
+          <div class="button-content">
+            <img v-if="!loading" src="../../assets/icons/send.svg" alt="发送" />
+            <img v-else src="../../assets/icons/loading.svg" alt="加载中" class="loading" />
+          </div>
+        </tiny-button>
+      </tiny-tooltip>
+    </template>
+  </div>
+</template>

package/src/sender/composables/useInputHandler.ts

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

package/src/sender/composables/useKeyboardHandler.ts

@@ -0,0 +1,99 @@
+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
+    alert('提交成功')
+    emit('submit', inputValue.value.trim())
+  }
+
+  /**
+   * 检查是否为指定的提交快捷键
+   * @param event 键盘事件
+   * @param submitType 提交类型
+   */
+  const checkSubmitShortcut = (event: KeyboardEvent, submitType: SubmitTrigger): boolean => {
+    const isEnter = event.key === 'Enter'
+    if (!isEnter) return false
+
+    switch (submitType) {
+      case 'enter':
+        console.log('enter')
+        return !event.shiftKey && !event.ctrlKey && !event.metaKey
+      case 'ctrlEnter':
+        console.log('ctrlEnter')
+        return (event.ctrlKey || event.metaKey) && !event.shiftKey
+      case 'shiftEnter':
+        console.log('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

@@ -0,0 +1,128 @@
+import { reactive } from 'vue'
+import type { SpeechHookOptions, SpeechHandler, SpeechState } from '../index.type'
+
+declare global {
+  interface Window {
+    webkitSpeechRecognition: typeof SpeechRecognition
+    SpeechRecognition: typeof SpeechRecognition
+  }
+}
+
+/**
+ * 语音识别处理 Hook
+ * 集中管理语音识别相关逻辑
+ *
+ * @param options 语音识别配置
+ */
+
+export function useSpeechHandler(options: SpeechHookOptions): SpeechHandler {
+  // 语音识别状态
+  const speechState = reactive<SpeechState>({
+    isRecording: false,
+    isSupported: 'webkitSpeechRecognition' in window || 'SpeechRecognition' in window,
+    error: undefined,
+  })
+
+  // 创建语音识别实例
+  const recognition = speechState.isSupported
+    ? new (window.webkitSpeechRecognition || window.SpeechRecognition)()
+    : null
+
+  // 初始化语音识别配置
+  if (recognition) {
+    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/global.d.ts

@@ -0,0 +1,44 @@
+interface SpeechRecognitionEvent extends Event {
+  results: SpeechRecognitionResultList
+  resultIndex: number
+  emma?: Document
+}
+
+interface SpeechRecognitionErrorEvent extends Event {
+  error:
+    | 'no-speech'
+    | 'aborted'
+    | 'audio-capture'
+    | 'network'
+    | 'not-allowed'
+    | 'service-not-allowed'
+    | 'bad-grammar'
+    | 'language-not-supported'
+  message: string
+}
+
+interface SpeechRecognition extends EventTarget {
+  // 属性
+  lang: string
+  continuous: boolean
+  interimResults: boolean
+  maxAlternatives: number
+  serviceURI: string
+
+  // 事件处理器
+  onend: (this: SpeechRecognition, ev: Event) => void
+  onerror: (ev: SpeechRecognitionErrorEvent) => void
+  onresult: (this: SpeechRecognition, ev: SpeechRecognitionEvent) => void
+  onstart: (this: SpeechRecognition, ev: Event) => void
+
+  // 方法
+  start(): void
+  stop(): void
+  abort(): void
+}
+
+// 声明全局变量
+declare let SpeechRecognition: {
+  new (): SpeechRecognition
+  prototype: SpeechRecognition
+}