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

package/dist/welcome/index.vue.d.ts

@@ -1,2 +1,18 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+import { WelcomeProps, WelcomeSlots } from './index.type';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<WelcomeSlots> & WelcomeSlots;
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<WelcomeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<WelcomeProps> & Readonly<{}>, {
+    align: "left" | "center" | "right" | string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-robot",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -8,6 +8,7 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "scripts": {
+    "dev": "vue-tsc && vite build --watch",
     "build": "vue-tsc && vite build",
     "type-check": "vue-tsc --noEmit"
   },
@@ -15,17 +16,18 @@
     "vue": "^3.3.11"
   },
   "dependencies": {
+    "@opentiny/tiny-robot-svgs": "0.1.0",
     "@opentiny/vue": "^3.21.0",
     "@opentiny/vue-button": "^3.21.0",
     "@opentiny/vue-icon": "^3.22.0",
     "@opentiny/vue-input": "^3.21.0",
     "@opentiny/vue-tooltip": "^3.22.0",
-    "lodash-es": "4.17.21",
     "markdown-it": "^14.1.0",
     "vue": "^3.3.11"
   },
   "devDependencies": {
     "@opentiny/vue-vite-import": "^1.3.0",
+    "@types/dom-speech-recognition": "^0.0.6",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.13.17",
@@ -38,5 +40,5 @@
     "vue": "^3.3.11",
     "vue-tsc": "^2.2.8"
   },
-  "gitHead": "726b80c0db74ae929e450edb6a7af9fbb8f0fe45"
+  "gitHead": "ff5f5ae32d52a6298401cbd9c7f70f0b0c5253e3"
 }

package/src/bubble/bubble-list.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import Bubble from './bubble.vue'
+import { BubbleListProps, BubbleProps } from './index.type'
+import { useElementScroll } from './useScroll'
+
+const props = withDefaults(defineProps<BubbleListProps>(), {})
+
+const scrollContainer = ref<HTMLDivElement>()
+const { scrollToBottom } = useElementScroll(scrollContainer)
+
+const lastBubble = computed(() => props.items.at(-1))
+
+watch([() => props.items.length, () => lastBubble.value?.content], () => {
+  if (!props.autoScroll) {
+    return
+  }
+
+  scrollToBottom()
+})
+
+const getItemProps = (item: BubbleProps): BubbleProps => {
+  const defaultConfig = item.role ? props.roles?.[item.role] || {} : {}
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { id, ...rest } = item
+  return { ...defaultConfig, ...rest }
+}
+</script>
+
+<template>
+  <div class="tr-bubble-list" ref="scrollContainer">
+    <Bubble v-for="(item, index) in props.items" :key="item.id || index" v-bind="getItemProps(item)"></Bubble>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-bubble-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  padding: 16px;
+}
+</style>

package/src/bubble/bubble.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import markdownit from 'markdown-it'
+import { computed, defineComponent, useSlots } from 'vue'
+import { BubbleActionOptions, BubbleEvents, BubbleProps, BubbleSlots } from './index.type'
+import { CopyAction, RefreshAction } from './components/actions'
+
+const props = withDefaults(defineProps<BubbleProps>(), {
+  content: '',
+  placement: 'start',
+  type: 'text',
+  maxWidth: '80%',
+})
+
+const emit = defineEmits<BubbleEvents>()
+
+defineSlots<BubbleSlots>()
+
+const slots = useSlots()
+
+const bubbleContent = computed(() => {
+  if (props.type === 'markdown') {
+    return markdownit(props.mdConfig || {}).render(props.content)
+  }
+  return props.content
+})
+
+const placementStart = computed(() => props.placement === 'start')
+
+const AvatarComp = computed(() => {
+  if (!props.avatar) {
+    return null
+  }
+
+  return defineComponent(() => {
+    return () => props.avatar
+  })
+})
+
+const defaultActionsMap = new Map<string, BubbleActionOptions>([
+  [
+    'copy',
+    {
+      name: 'copy',
+      vnode: CopyAction,
+      show: true,
+    },
+  ],
+  [
+    'refresh',
+    {
+      name: 'refresh',
+      vnode: RefreshAction,
+      show: true,
+    },
+  ],
+])
+
+const computedActions = computed(() => {
+  const actions = (props.actions || []).map((action) => {
+    if (typeof action === 'string') {
+      return defaultActionsMap.get(action)
+    }
+
+    if (defaultActionsMap.has(action.name)) {
+      return {
+        ...defaultActionsMap.get(action.name),
+        ...action,
+      }
+    }
+
+    return action
+  })
+
+  return actions.filter((action): action is BubbleActionOptions => Boolean(action))
+})
+
+const handleActionClick = (name: string, ...args: unknown[]) => {
+  if (name === 'copy') {
+    emit('copy', args[0] as boolean)
+    return
+  }
+
+  if (name === 'refresh') {
+    emit('refresh')
+    return
+  }
+
+  emit('action', name, ...args)
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'tr-bubble',
+      {
+        'placement-start': placementStart,
+        'placement-end': !placementStart,
+      },
+    ]"
+  >
+    <div v-if="AvatarComp" class="tr-bubble__avatar">
+      <component :is="AvatarComp"></component>
+    </div>
+    <div class="tr-bubble__content-wrapper">
+      <slot v-if="props.loading" name="loading">
+        <div class="tr-bubble__loading">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </slot>
+      <div v-else :class="['tr-bubble__content']">
+        <div class="tr-bubbule__body">
+          <slot>
+            <span v-if="props.type === 'markdown'" v-html="bubbleContent"></span>
+            <span v-else>{{ bubbleContent }}</span>
+            <span v-if="props.aborted" class="tr-bubbule__aborted">（用户停止）</span>
+          </slot>
+        </div>
+        <div v-if="slots.footer || computedActions.length > 0" class="tr-bubbule__footer">
+          <div class="tr-bubbule__footer-left">
+            <slot name="footer"></slot>
+          </div>
+          <div class="tr-bubbule__footer-actions">
+            <template v-for="action in computedActions" :key="action?.name">
+              <component
+                :is="action.vnode"
+                v-show="typeof action.show === 'function' ? action.show(props) : action.show"
+                :bubbleItem="props"
+                @click="handleActionClick(action.name, $event)"
+              ></component>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-bubble {
+  display: flex;
+  gap: 16px;
+  max-width: v-bind('props.maxWidth');
+
+  &.placement-start {
+    flex-direction: row;
+  }
+
+  &.placement-end {
+    flex-direction: row-reverse;
+    margin-left: auto;
+  }
+}
+
+.tr-bubble__avatar {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tr-bubble__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+
+  span {
+    height: 8px;
+    width: 8px;
+    margin: 0 2px;
+    background-color: #bbb;
+    border-radius: 50%;
+    display: inline-block;
+    animation: typing 1.4s infinite ease-in-out both;
+
+    &:nth-child(1) {
+      animation-delay: 0s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+  }
+
+  @keyframes typing {
+    0%,
+    80%,
+    100% {
+      transform: scale(0);
+    }
+    40% {
+      transform: scale(1);
+    }
+  }
+}
+
+.tr-bubble__content {
+  background-color: white;
+  padding: 16px 24px;
+  border-radius: 24px;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.02);
+
+  .tr-bubbule__body {
+    color: rgb(25, 25, 25);
+    font-size: 16px;
+    line-height: 26px;
+  }
+
+  .tr-bubbule__aborted {
+    color: rgb(128, 128, 128);
+    font-size: 14px;
+  }
+
+  .tr-bubbule__footer {
+    display: flex;
+    gap: 12px;
+
+    .tr-bubbule__footer-left {
+      flex: 1;
+    }
+
+    .tr-bubbule__footer-actions {
+      display: flex;
+      flex-shrink: 0;
+      gap: 4px;
+      margin-top: 12px;
+
+      & > * {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+}
+</style>

package/src/bubble/components/actions/copy.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { BubbleProps } from '../../index.type'
+import { IconCopy } from '@opentiny/tiny-robot-svgs'
+
+const { bubbleItem } = defineProps<{ bubbleItem: BubbleProps }>()
+
+const emit = defineEmits(['click'])
+
+async function copyToClipboard(text: string) {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (err: unknown) {
+    return false
+  }
+}
+
+const handleClick = async () => {
+  const result = bubbleItem.content ? await copyToClipboard(bubbleItem.content) : false
+
+  emit('click', result)
+}
+</script>
+
+<template>
+  <button class="icon-btn" @click="handleClick">
+    <IconCopy width="16px" height="16px" />
+  </button>
+</template>
+
+<style lang="less" scoped>
+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;
+  background-color: white;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+
+  &:active {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+}
+</style>

package/src/bubble/components/actions/refresh.vue

@@ -0,0 +1,31 @@
+<template>
+  <button class="icon-btn"><IconRefresh width="16px" height="16px" /></button>
+</template>
+
+<script setup lang="ts">
+import { IconRefresh } from '@opentiny/tiny-robot-svgs'
+</script>
+
+<style lang="less" scoped>
+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;
+  background-color: white;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+
+  &:active {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+}
+</style>

package/src/bubble/index.ts

@@ -0,0 +1,23 @@
+import { App } from 'vue'
+import BubbleComp from './bubble.vue'
+import BubbleListComp from './bubble-list.vue'
+
+BubbleComp.name = 'TrBubble'
+
+const bubbleInstall = function (app: App) {
+  app.component(BubbleComp.name!, BubbleComp)
+}
+
+BubbleComp.install = bubbleInstall
+
+export const Bubble = BubbleComp as typeof BubbleComp & { install: typeof bubbleInstall }
+
+BubbleListComp.name = 'TrBubbleList'
+
+const bubbleListInstall = function (app: App) {
+  app.component(BubbleListComp.name!, BubbleListComp)
+}
+
+BubbleListComp.install = bubbleListInstall
+
+export const BubbleList = BubbleListComp as typeof BubbleListComp & { install: typeof bubbleListInstall }

package/src/bubble/index.type.ts

@@ -0,0 +1,63 @@
+import { Options as MarkdownItOptions } from 'markdown-it'
+import { Component, CSSProperties, VNode } from 'vue'
+
+export interface BubbleActionOptions {
+  name: 'copy' | 'refresh' | string
+  vnode?: VNode | Component
+  show?: boolean | ((props: BubbleProps) => boolean)
+}
+
+export type BubbleAction = 'copy' | 'refresh' | BubbleActionOptions
+
+export type BubblePalcement = 'start' | 'end'
+
+export interface BubbleProps {
+  /**
+   * 气泡内容
+   */
+  content?: string
+  id?: string
+  /**
+   * 气泡位置
+   */
+  placement?: BubblePalcement
+  avatar?: VNode
+  role?: string
+  /**
+   * 内容类型
+   */
+  type?: 'text' | 'markdown'
+  loading?: boolean
+  aborted?: boolean
+  /**
+   * type 为 'markdown' 时，markdown 的配置项
+   */
+  mdConfig?: MarkdownItOptions
+
+  actions?: BubbleAction[]
+  // 样式相关
+  maxWidth?: CSSProperties['maxWidth']
+}
+
+export interface BubbleSlots {
+  default: () => unknown
+  footer: () => unknown
+  loading: () => unknown
+}
+
+export interface BubbleEvents {
+  (e: 'copy', result: boolean): void
+  (e: 'refresh'): void
+  (e: 'action', name: string, ...args: unknown[]): void
+}
+
+export type BubbleRoleConfig = Pick<BubbleProps, 'placement' | 'avatar' | 'type' | 'mdConfig' | 'actions' | 'maxWidth'>
+
+export interface BubbleListProps {
+  items: BubbleProps[]
+  /**
+   * 每个角色的默认配置项
+   */
+  roles?: Record<string, BubbleRoleConfig>
+  autoScroll?: boolean
+}

package/src/bubble/useScroll.ts

@@ -0,0 +1,14 @@
+import { nextTick, Ref } from 'vue'
+
+export const useElementScroll = (elemRef: Ref<HTMLElement | null | undefined>) => {
+  const scrollToBottom = () => {
+    nextTick(() => {
+      elemRef.value?.scrollTo({
+        top: elemRef.value.scrollHeight,
+        behavior: 'smooth',
+      })
+    })
+  }
+
+  return { scrollToBottom }
+}

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,41 @@
 import { App } from 'vue'
-import Welcome from './welcome'
+import { Bubble, BubbleList } from './bubble'
 import Conversations from './conversations'
-import BubbleItem from './bubble-item'
-import BubbleList from './bubble-list'
+import { Prompt, Prompts } from './prompts'
 import Sender from './sender'
+import Welcome from './welcome'
+import Question from './question'
 
-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, Conversations, Prompt, Prompts, Sender, Welcome, Question]
 
 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,
+  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
+}