@opentiny/tiny-robot 0.1.0-alpha.0 → 0.2.0-alpha.0

package/src/question/index.type.ts

@@ -0,0 +1,86 @@
+export interface Category {
+  id: string
+  label: string
+  icon?: string
+  questions: Question[]
+}
+
+export interface Question {
+  id: string
+  text: string
+  keywords?: string[]
+}
+
+export interface TrQuestionPanel {
+  openModal: () => void
+  closeModal: () => void
+  toggleFloating: () => void
+  setActiveCategory: (categoryId: string) => void
+  refreshData: () => Promise<void>
+}
+
+export type ThemeType = 'light' | 'dark'
+
+/**
+ * Question组件属性定义
+ */
+export interface QuestionProps {
+  /**
+   * 问题分类列表
+   * 包含多个分类，每个分类下有多个问题
+   */
+  categories: Category[]
+
+  /**
+   * 浮动显示的问题列表
+   * 显示在组件底部的常见问题胶囊
+   */
+  commonQuestions: Question[]
+
+  /**
+   * 是否初始展开常见问题
+   * @default false
+   */
+  initialExpanded?: boolean
+
+  /**
+   * 弹窗宽度
+   * @default '640px'
+   */
+  modalWidth?: string
+
+  /**
+   * 主题类型
+   * @default 'light'
+   */
+  theme?: ThemeType
+
+  /**
+   * 是否点击外部关闭弹窗
+   * @default true
+   */
+  closeOnClickOutside?: boolean
+
+  /**
+   * 是否显示加载中状态
+   * @default false
+   */
+  loading?: boolean
+}
+
+/**
+ * Question组件事件定义
+ */
+export type QuestionEmits = {
+  /**
+   * 问题点击事件
+   * @param question 被点击的问题对象
+   */
+  'question-click': [question: Question]
+
+  /**
+   * 分类选择事件
+   * @param category 被选择的分类对象
+   */
+  'select-category': [category: Category]
+}

package/src/question/index.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, ref, defineProps, defineEmits, defineExpose, watch, onMounted, withDefaults } from 'vue'
+import { useQuestions } from './composables/useQuestions'
+import CommonQuestions from './components/CommonQuestions.vue'
+import HotQuestions from './components/HotQuestions.vue'
+import type { Category, Question, QuestionProps, QuestionEmits } from './index.type'
+
+import { IconHotQuestion, IconArrowUp, IconArrowDown, IconTypeAll } from '@opentiny/tiny-robot-svgs'
+import './index.less'
+
+const props = withDefaults(defineProps<QuestionProps>(), {
+  categories: () => [] as Category[],
+  commonQuestions: () => [] as Question[],
+  initialExpanded: false,
+  modalWidth: '640px',
+  theme: 'light',
+  closeOnClickOutside: true,
+  loading: false,
+})
+
+// 切换问题展示
+const toggleExpand = () => {
+  isExpanded.value = !isExpanded.value
+}
+
+const emit = defineEmits<QuestionEmits>()
+
+const categories = computed(() => props.categories)
+const isExpanded = ref(props.initialExpanded)
+
+const { modalVisible, currentTheme, setActiveCategory, openModal, closeModal, setTheme, refreshData } =
+  useQuestions(categories)
+
+// 同步 props 到内部状态
+watch(
+  () => props.theme,
+  (value) => {
+    setTheme(value)
+  },
+)
+
+// 处理问题点击
+const handleQuestionClick = (question: Question) => {
+  closeModal()
+  emit('question-click', question)
+}
+
+// 处理分类选择
+const handleCategorySelect = (category: Category) => {
+  if (category) {
+    setActiveCategory(category.id)
+    emit('select-category', category)
+  }
+}
+
+// 处理按钮隐藏
+const showExpandButton = ref(false)
+
+const handleShowExpandButton = (value: boolean) => {
+  showExpandButton.value = value
+}
+
+// 组件挂载时初始化主题
+onMounted(() => {
+  document.documentElement.setAttribute('data-theme', currentTheme.value)
+})
+
+// 暴露实例方法
+defineExpose({
+  openModal,
+  closeModal,
+  toggleFloating: toggleExpand,
+  setActiveCategory,
+  refreshData,
+})
+</script>
+
+<template>
+  <div class="tr-question-container" :class="[`theme-${theme}`]" :data-theme="theme">
+    <!-- 热门问题弹窗触发按钮 -->
+    <div class="tr-question-trigger" @click="openModal">
+      <IconHotQuestion />
+    </div>
+
+    <!-- 热门问题弹窗 -->
+    <HotQuestions
+      :visible="modalVisible"
+      :categories="categories"
+      :modal-width="modalWidth"
+      :loading="loading"
+      :close-on-click-outside="closeOnClickOutside"
+      @update:visible="modalVisible = $event"
+      @close="modalVisible = false"
+      @question-click="handleQuestionClick"
+      @select-category="handleCategorySelect"
+    >
+      <!-- 传递插槽内容 -->
+      <template #category-label="{ category }">
+        <slot name="category-label" :category="category">
+          <div class="category-icon">
+            <IconTypeAll />
+          </div>
+          <span>{{ category.label }}</span>
+        </slot>
+      </template>
+
+      <template #question-item="{ question, index }">
+        <slot name="question-item" :question="question" :index="index">
+          <span>{{ index + 1 }}.</span> {{ question.text }}
+        </slot>
+      </template>
+
+      <template #loading-indicator>
+        <slot name="loading-indicator">
+          <div class="tr-question-loading-spinner"></div>
+        </slot>
+      </template>
+
+      <template #empty-state>
+        <slot name="empty-state">
+          <p>暂无相关问题</p>
+        </slot>
+      </template>
+    </HotQuestions>
+
+    <!-- 常见问题胶囊 -->
+    <CommonQuestions
+      :isExpanded="isExpanded"
+      :questions="commonQuestions"
+      @show-expand-button="handleShowExpandButton"
+      @question-click="handleQuestionClick"
+    />
+
+    <!-- 常规问题完整内容触发按钮 -->
+    <div v-if="showExpandButton" class="tr-question-wrap-trigger" @click="toggleExpand">
+      <IconArrowUp v-if="!isExpanded" />
+      <IconArrowDown v-else />
+    </div>
+  </div>
+</template>

package/src/question/vars.less

@@ -0,0 +1,135 @@
+/* ----------------- 颜色变量 ----------------- */
+: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,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { TinyButton, TinyTooltip } from '@opentiny/vue'
+import TinyButton from '@opentiny/vue-button'
 import { IconClose } from '@opentiny/vue-icon'
 import { ActionButtonsProps } from '../index.type'
 
@@ -46,41 +46,32 @@ const props = withDefaults(defineProps<ActionButtonsProps>(), {
   submitType: 'enter',
 })
 
-const emit = defineEmits({
+const emit = defineEmits<{
   /**
    * 清除内容事件
    */
-  clear: () => true,
+  (e: 'clear'): void
   /**
    * 切换语音识别状态事件
-   * @param {boolean} state - 新的语音识别状态
    */
-  'toggle-speech': (state: boolean) => Boolean(state),
+  (e: 'toggle-speech', state: boolean): void
   /**
    * 提交内容事件
    */
-  submit: () => true,
-})
+  (e: 'submit'): void
+  /**
+   * 取消发送事件，用于取消加载状态
+   */
+  (e: 'cancel'): void
+}>()
 
 /**
  * 是否启用语音功能
  */
 const speechEnabled = computed(() => props.allowSpeech)
 
-/**
- * 语音按钮提示文本
- */
-const speechButtonText = computed(() => (props.speechStatus.isRecording ? '停止录音' : '开始语音输入'))
-
 const isSpeechRecording = computed(() => props.speechStatus.isRecording)
 
-/**
- * 提交按钮tooltip
- */
-const submitTooltip = computed(() => {
-  return props.loading ? `发送中...` : '发送消息'
-})
-
 /**
  * 整体禁用状态
  */
@@ -113,6 +104,15 @@ const handleSubmit = () => {
     emit('submit')
   }
 }
+
+/**
+ * 处理取消操作
+ */
+const handleCancel = () => {
+  if (!isDisabled.value) {
+    emit('cancel')
+  }
+}
 </script>
 
 <template>
@@ -128,18 +128,16 @@ const handleSubmit = () => {
 
     <!-- 语音按钮：仅在启用语音功能时显示 -->
     <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>
+      <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">
@@ -152,14 +150,19 @@ const handleSubmit = () => {
 
     <!-- 提交按钮：主操作按钮 -->
     <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>
+      <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/composables/useInputHandler.ts

@@ -1,5 +1,4 @@
 import { ref, watch } from 'vue'
-import { debounce } from 'lodash-es'
 import type { SenderProps, SenderEmits } from '../index.type'
 
 /**
@@ -10,7 +9,7 @@ import type { SenderProps, SenderEmits } from '../index.type'
  * @param emit  组件方法
  */
 export function useInputHandler(props: SenderProps, emit: SenderEmits) {
-  const inputValue = ref(props.defaultValue || '')
+  const inputValue = ref(props.modelValue || props.defaultValue || '')
   const inputWrapper = ref<HTMLElement | null>(null)
 
   // 同步外部值变化
@@ -23,23 +22,29 @@ export function useInputHandler(props: SenderProps, emit: SenderEmits) {
     },
   )
 
+  // 监听内部值变化，触发update:modelValue事件
+  watch(
+    () => inputValue.value,
+    (val) => {
+      emit('update:modelValue', 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 submitValue = inputValue.value
+
+    if (!props.disabled && !props.loading && submitValue.trim()) {
+      emit('submit', submitValue)
+    }
   }
 
   // 清空输入

package/src/sender/composables/useKeyboardHandler.ts

@@ -34,7 +34,6 @@ export function useKeyboardHandler(
    */
   const triggerSubmit = () => {
     if (!validateSubmission(inputValue.value)) return
-    alert('提交成功')
     emit('submit', inputValue.value.trim())
   }
 
@@ -42,6 +41,12 @@ export function useKeyboardHandler(
    * 检查是否为指定的提交快捷键
    * @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'
@@ -49,13 +54,10 @@ export function useKeyboardHandler(
 
     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

package/src/sender/composables/useSpeechHandler.ts

@@ -1,13 +1,6 @@
 import { reactive } from 'vue'
 import type { SpeechHookOptions, SpeechHandler, SpeechState } from '../index.type'
 
-declare global {
-  interface Window {
-    webkitSpeechRecognition: typeof SpeechRecognition
-    SpeechRecognition: typeof SpeechRecognition
-  }
-}
-
 /**
  * 语音识别处理 Hook
  * 集中管理语音识别相关逻辑
@@ -19,17 +12,18 @@ export function useSpeechHandler(options: SpeechHookOptions): SpeechHandler {
   // 语音识别状态
   const speechState = reactive<SpeechState>({
     isRecording: false,
-    isSupported: 'webkitSpeechRecognition' in window || 'SpeechRecognition' in window,
+    isSupported:
+      (typeof window !== 'undefined' && 'webkitSpeechRecognition' in window) || 'SpeechRecognition' in window,
     error: undefined,
   })
 
   // 创建语音识别实例
-  const recognition = speechState.isSupported
+  const recognition: SpeechRecognition | undefined = speechState.isSupported
     ? new (window.webkitSpeechRecognition || window.SpeechRecognition)()
-    : null
+    : undefined
 
   // 初始化语音识别配置
-  if (recognition) {
+  if (recognition !== undefined) {
     recognition.continuous = options.continuous ?? false
     recognition.interimResults = options.interimResults ?? true
     recognition.lang = options.lang ?? navigator.language

package/src/sender/index.less

@@ -2,13 +2,9 @@
 
 // 主要组件样式
 .tiny-sender {
-  border: 1px solid var(--tr-sender-border-color);
-  border-radius: var(--tr-sender-border-radius);
   background: var(--tr-sender-bg-color);
   position: relative;
   color: var(--tr-sender-text-color);
-  padding: var(--tr-sender-padding-top) var(--tr-sender-padding-right) var(--tr-sender-padding-bottom)
-    var(--tr-sender-padding-left);
 
   // TinyUI 输入框调整
   .tiny-input__prefix {
@@ -166,11 +162,12 @@
     min-width: var(--tr-sender-prefix-min-width);
     flex: 0 0 var(--tr-sender-prefix-width); /* 固定宽度，不可伸缩 */
     display: flex;
-    align-items: center;
+    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);
 
@@ -290,6 +287,7 @@
     var(--tr-sender-padding-left);
   background: var(--tr-sender-bg-color);
   border-radius: var(--tr-sender-border-radius);
+  align-items: center;
 
   /* 按钮图标统一样式 */
   .button-icon {

package/src/sender/index.type.ts

@@ -31,7 +31,6 @@ export interface SenderProps {
   clearable?: boolean // 是否显示清除按钮
   disabled?: boolean // 禁用状态
   defaultValue?: string | null // 默认值
-  debounceSubmit?: number // 提交防抖时间(ms)
   loading?: boolean // 加载状态
   modelValue?: string // 双向绑定值
   mode?: InputMode // 输入框模式：单行/多行
@@ -72,6 +71,7 @@ export type SenderEmits = {
   (e: 'focus', event: FocusEvent): void
   (e: 'blur', event: FocusEvent): void
   (e: 'escape-press'): void // 按下Esc键时触发
+  (e: 'cancel'): void // 取消发送状态时触发
 }
 
 // 语音识别状态