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

package/src/container/index.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { IconCancelFullScreen, IconClose, IconFullScreen } from '@opentiny/tiny-robot-svgs'
+import { computed } from 'vue'
+import { ContainerProps, ContainerSlots } from './index.type'
+
+const show = defineModel<ContainerProps['show']>('show', { required: true })
+const fullscreen = defineModel<ContainerProps['fullscreen']>('fullscreen')
+
+defineSlots<ContainerSlots>()
+
+const IconFullScreenSwitcher = computed(() => (fullscreen.value ? IconCancelFullScreen : IconFullScreen))
+</script>
+
+<template>
+  <div class="tr-container">
+    <div class="tr-container__dragging-bar-wrapper">
+      <div class="tr-container__dragging-bar"></div>
+    </div>
+    <div class="tr-container__header">
+      <slot name="title">
+        <h3 class="tr-container__title">OpenTiny NEXT</h3>
+      </slot>
+      <div class="tr-container__header-operations">
+        <slot name="operations"></slot>
+        <button class="icon-btn" @click="$emit('update:fullscreen', !fullscreen)">
+          <IconFullScreenSwitcher />
+        </button>
+        <button class="icon-btn" @click="$emit('update:show', false)">
+          <IconClose />
+        </button>
+      </div>
+    </div>
+    <div class="tr-container__body">
+      <slot></slot>
+    </div>
+    <div class="tr-container__footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-container {
+  --tr-container-width: 480px;
+
+  background-color: rgb(248, 248, 248);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: v-bind('fullscreen? "0" : "unset"');
+  width: v-bind('fullscreen? "unset" : "var(--tr-container-width)"');
+  z-index: v-bind('show? "100":"-1"');
+  opacity: v-bind('show? "1":"0"');
+  display: flex;
+  flex-direction: column;
+
+  .tr-container__dragging-bar-wrapper {
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px;
+
+    // TODO 拖拽条的逻辑
+    .tr-container__dragging-bar {
+      width: 40px;
+      height: 4px;
+      background-color: rgb(217, 217, 217);
+      border-radius: 999px;
+      cursor: grab;
+    }
+  }
+
+  .tr-container__header {
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 24px;
+  }
+
+  .tr-container__title {
+    margin: 0;
+    padding: 0;
+    color: rgb(25, 25, 25);
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .tr-container__header-operations {
+    display: flex;
+    gap: 8px;
+
+    button.icon-btn {
+      width: 28px;
+      height: 28px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      padding: 0;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, 0.15);
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  .tr-container__body {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .tr-container__footer {
+    flex-shrink: 0;
+  }
+}
+</style>

package/src/conversations/index.ts

@@ -1,7 +1,7 @@
 import { App } from 'vue'
 import Conversations from './index.vue'
 
-Conversations.name = 'TrConversations'
+Conversations.name = 'Conversations'
 
 const install = function <T>(app: App<T>) {
   app.component(Conversations.name!, Conversations)

package/src/index.ts

@@ -1,30 +1,44 @@
 import { App } from 'vue'
-import Welcome from './welcome'
+import { Bubble, BubbleList } from './bubble'
+import Container from './container'
 import Conversations from './conversations'
-import BubbleItem from './bubble-item'
-import BubbleList from './bubble-list'
+import { Prompt, Prompts } from './prompts'
+import Question from './question'
 import Sender from './sender'
+import Welcome from './welcome'
 
-export * from './bubble-list/index.type'
+export * from './bubble/index.type'
+export * from './prompts/index.type'
+export * from './sender/index.type'
+export * from './welcome/index.type'
 
-const components = [Welcome, Conversations, BubbleItem, BubbleList, Sender]
+const components = [Bubble, BubbleList, Container, Conversations, Prompt, Prompts, Question, Sender, Welcome]
 
 export default {
   install<T>(app: App<T>) {
     components.forEach((component) => {
-      const name = component.name?.replace(/^Tiny/, '').replace(/^Tr/, '')
+      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,
+  Bubble,
+  Bubble as TrBubble,
+  BubbleList,
   BubbleList as TrBubbleList,
-  BubbleList as TinyBubbleList,
+  Container,
+  Container as TrContainer,
+  Conversations,
+  Conversations as TrConversations,
+  Prompt,
+  Prompt as TrPrompt,
+  Prompts,
+  Prompts as TrPrompts,
+  Sender,
   Sender as TrSender,
+  Welcome,
+  Welcome as TrWelcome,
+  Question,
 }

package/src/prompts/index.ts

@@ -0,0 +1,25 @@
+import { App } from 'vue'
+import PromptComp from './prompt.vue'
+import PromptsComp from './prompts.vue'
+
+// TrPrompt
+PromptComp.name = 'TrPrompt'
+
+const installPrompt = function <T>(app: App<T>) {
+  app.component(PromptComp.name!, PromptComp)
+}
+
+PromptComp.install = installPrompt
+
+export const Prompt = PromptComp as typeof PromptComp & { install: typeof installPrompt }
+
+// TrPrompts
+PromptsComp.name = 'TrPrompts'
+
+const installPrompts = function <T>(app: App<T>) {
+  app.component(PromptsComp.name!, PromptsComp)
+}
+
+PromptsComp.install = installPrompts
+
+export const Prompts = PromptsComp as typeof PromptsComp & { install: typeof installPrompts }

package/src/prompts/index.type.ts

@@ -0,0 +1,59 @@
+import { CSSProperties, VNode } from 'vue'
+
+export interface PromptProps {
+  /**
+   * 提示标签，显示提示的主要内容
+   */
+  label: string
+  /**
+   * 唯一标识用于区分每个提示项，用于 Prompts 列表。如果不传此参数，则使用 index 作为 key
+   */
+  id?: string
+  /**
+   * 提示描述，提供额外的信息
+   */
+  description?: string
+  /**
+   * 提示图标，显示在提示项的左侧
+   */
+  icon?: VNode
+  /**
+   * 是否禁用。默认 false
+   */
+  disabled?: boolean
+  /**
+   * 提示徽章，显示在提示项的右上角
+   */
+  badge?: string | VNode
+}
+
+export interface PromptsProps {
+  /**
+   * 包含多个提示项的列表
+   */
+  items: PromptProps[]
+  /**
+   * 自定义样式，用于各个提示项的不同部分
+   */
+  itemStyle?: string | CSSProperties
+  /**
+   *  自定义类名，用于各个提示项的不同部分
+   */
+  itemClass?: string | string[]
+  /**
+   * 提示列表是否垂直排列。默认 false
+   */
+  vertical?: boolean
+  /**
+   * 提示列表是否折行。默认 false
+   */
+  wrap?: boolean
+}
+
+export interface PromptsEvents {
+  (e: 'item-click', ev: MouseEvent, item: PromptProps): void
+}
+
+export interface PromptsSlots {
+  footer?: () => unknown
+}

package/src/prompts/prompt.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, defineComponent, VNode } from 'vue'
+import { PromptProps } from './index.type'
+
+const props = defineProps<PromptProps>()
+
+const vnodeToComponent = (vnode?: VNode | string) => {
+  if (!vnode) {
+    return null
+  }
+
+  return defineComponent(() => {
+    return () => vnode
+  })
+}
+
+const iconComp = computed(() => {
+  return vnodeToComponent(props.icon)
+})
+
+const badgeComp = computed(() => {
+  return vnodeToComponent(props.badge)
+})
+</script>
+
+<template>
+  <div :class="['tr-prompt', { disabled: props.disabled }]">
+    <div class="tr-prompt__icon">
+      <component :is="iconComp"></component>
+    </div>
+    <div class="tr-prompt__content">
+      <h6 class="tr-prompt__content-label">{{ props.label }}</h6>
+      <p v-if="props.description" class="tr-prompt__content-description">{{ props.description }}</p>
+    </div>
+    <div :class="['tr-prompt__badge', { label: typeof props.badge === 'string' }]">
+      <component :is="badgeComp"></component>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-prompt {
+  --tr-prompt-bg-color: white;
+  --tr-prompt-hover-color: rgba(0, 0, 0, 0.04);
+  --tr-prompt-active-color: rgba(0, 0, 0, 0.15);
+  --tr-prompt-disabled-color: rgba(0, 0, 0, 0.04);
+  --tr-prompt-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  --tr-prompt-text: rgb(25, 25, 25);
+  --tr-prompt-text-muted: rgb(89, 89, 89);
+
+  flex: none;
+  display: flex;
+  gap: 12px;
+  border-radius: 16px;
+  box-shadow: var(--tr-prompt-box-shadow);
+  padding: 16px 24px;
+  position: relative;
+  cursor: pointer;
+  transition: background 0.3s;
+  background-color: var(--tr-prompt-bg-color);
+
+  &:hover {
+    background-color: var(--tr-prompt-hover-color);
+  }
+
+  &.disabled {
+    cursor: default;
+    pointer-events: none;
+    background-color: var(--tr-prompt-disabled-color);
+  }
+
+  &:active {
+    background-color: var(--tr-prompt-active-color);
+  }
+}
+
+.tr-prompt__content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: start;
+
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--tr-prompt-text);
+}
+
+.tr-prompt__content-label {
+  margin: 0;
+  padding: 0;
+  font-weight: 500;
+}
+
+.tr-prompt__content-description {
+  margin: 0;
+  padding: 0;
+  color: var(--tr-prompt-text-muted);
+}
+
+.tr-prompt__badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 12px;
+  border-top-right-radius: 16px;
+  border-bottom-left-radius: 16px;
+  background-color: rgb(255, 234, 232);
+
+  &.label {
+    color: rgb(242, 48, 48);
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+</style>

package/src/prompts/prompts.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { toRaw } from 'vue'
+import { PromptProps, PromptsEvents, PromptsProps, PromptsSlots } from './index.type'
+import Prompt from './prompt.vue'
+
+const props = defineProps<PromptsProps>()
+
+const emit = defineEmits<PromptsEvents>()
+
+defineSlots<PromptsSlots>()
+
+const handleClick = (ev: MouseEvent, item: PromptProps) => {
+  emit('item-click', ev, toRaw(item))
+}
+</script>
+
+<template>
+  <div class="tr-prompts">
+    <div :class="['tr-prompts__list-container', { wrap: props.wrap, vertical: props.vertical }]">
+      <Prompt
+        v-for="(item, index) in props.items"
+        :key="item.id || index"
+        v-bind="item"
+        :style="props.itemStyle"
+        :class="props.itemClass"
+        @click="handleClick($event, item)"
+      ></Prompt>
+    </div>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-prompts {
+  .tr-prompts__list-container {
+    display: flex;
+    gap: 16px;
+    overflow-x: auto;
+
+    &.wrap {
+      flex-wrap: wrap;
+    }
+
+    &.vertical {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+}
+</style>

package/src/question/components/CommonQuestions.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount, nextTick, PropType } from 'vue'
+import type { Question } from '../index.type'
+import { IconEdit } from '@opentiny/tiny-robot-svgs'
+
+const props = defineProps({
+  questions: {
+    type: Array as PropType<Question[]>,
+    required: true,
+  },
+  isExpanded: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['question-click', 'show-expand-button'])
+
+const commonQuestionsRef = ref<HTMLElement | null>(null)
+const showExpandButton = ref(false)
+const isExpandedRef = ref(false)
+const visibleQuestions = ref<Question[]>([])
+const hiddenQuestions = ref<Question[]>([])
+
+watch(
+  () => props.isExpanded,
+  (val) => {
+    isExpandedRef.value = val
+  },
+)
+
+// 检查是否需要显示展开/收起按钮并计算能够容纳的最大胶囊数
+const checkOverflow = async () => {
+  await nextTick()
+  if (commonQuestionsRef.value) {
+    const container = commonQuestionsRef.value
+    const containerWidth = container.clientWidth
+
+    // 重置胶囊分组
+    visibleQuestions.value = []
+    hiddenQuestions.value = []
+
+    if (props.questions.length === 0) {
+      showExpandButton.value = false
+      return
+    }
+
+    // 计算一行可以容纳多少个胶囊
+    let accumulatedWidth = 0
+    const margin = 8 // 胶囊之间的间距
+
+    // 克隆一个胶囊元素来测量其基本尺寸
+    const tempItem = document.createElement('div')
+    tempItem.className = 'tr-common-questions_item'
+    tempItem.style.visibility = 'hidden'
+    tempItem.style.position = 'absolute'
+    container.appendChild(tempItem)
+
+    // 计算每个胶囊的宽度并确定一行能容纳多少个
+    for (let i = 0; i < props.questions.length; i++) {
+      const question = props.questions[i]
+
+      // 设置临时元素内容来测量其宽度
+      tempItem.textContent = question.text
+      const itemWidth = tempItem.offsetWidth + margin
+
+      // 检查是否还能容纳下一个胶囊
+      if (accumulatedWidth + itemWidth <= containerWidth) {
+        accumulatedWidth += itemWidth
+        visibleQuestions.value.push(question)
+      } else {
+        hiddenQuestions.value.push(question)
+      }
+    }
+
+    // 移除临时元素
+    container.removeChild(tempItem)
+
+    // 如果有隐藏的胶囊，显示展开按钮
+    showExpandButton.value = hiddenQuestions.value.length > 0
+    // 初始状态设为未展开
+    isExpandedRef.value = false
+
+    emit('show-expand-button', showExpandButton.value)
+  }
+}
+
+// 处理问题点击
+const handleQuestionClick = (question: Question) => {
+  emit('question-click', question)
+}
+
+// 监听 props 变化
+watch(
+  () => props.questions,
+  () => {
+    // 当问题列表变化时重新计算
+    checkOverflow()
+  },
+  { deep: true },
+)
+
+// 处理窗口大小变化
+const handleResize = () => {
+  checkOverflow()
+}
+
+// 组件挂载时添加窗口大小变化监听
+onMounted(() => {
+  checkOverflow()
+  window.addEventListener('resize', handleResize)
+})
+
+// 组件卸载时移除监听器
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<template>
+  <div class="tr-common-questions" ref="commonQuestionsRef" :class="{ expanded: isExpandedRef }">
+    <!-- 渲染可见的胶囊 -->
+    <div
+      v-for="(question, index) in visibleQuestions"
+      :key="`visible-${question.id}-${index}`"
+      class="tr-common-questions_item"
+      @click="handleQuestionClick(question)"
+    >
+      <div style="display: flex; align-items: center"><IconEdit /></div>
+      {{ question.text }}
+    </div>
+
+    <!-- 渲染被隐藏的胶囊（展开时显示） -->
+    <div v-if="isExpandedRef">
+      <div
+        v-for="(question, index) in hiddenQuestions"
+        :key="`hidden-${question.id}-${index}`"
+        class="tr-common-questions_item"
+        @click="handleQuestionClick(question)"
+      >
+        <IconEdit />
+        {{ question.text }}
+      </div>
+    </div>
+  </div>
+</template>