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

package/src/history/index.vue

@@ -1,292 +0,0 @@
-<script lang="ts" setup>
-import { IconClose, IconDelete, IconEditPen, IconSearch } from '@opentiny/tiny-robot-svgs'
-import { TinyButton, TinyInput } from '@opentiny/vue'
-import { computed } from 'vue'
-import { ItemTag, SearchEmpty } from './components'
-import { useEditItemTitle } from './composables'
-import type {
-  HistoryEvents,
-  HistoryGroup,
-  HistoryItem,
-  HistoryProps,
-  MultiTabHistoryProps,
-  SingleTabHistoryProps,
-} from './index.type'
-
-const props = withDefaults(defineProps<HistoryProps>(), {
-  searchFn: (query: string, { title }: HistoryItem) => {
-    if (!query) {
-      return true
-    }
-
-    return title.toLowerCase().includes(query.toLowerCase())
-  },
-})
-
-const activeTab = defineModel<HistoryProps['activeTab']>('activeTab')
-const searchQuery = defineModel<HistoryProps['searchQuery']>('searchQuery')
-
-const emit = defineEmits<HistoryEvents>()
-
-const computedTabs = computed(() => {
-  if (Array.isArray((props as MultiTabHistoryProps).tabs)) {
-    return (props as MultiTabHistoryProps).tabs
-  }
-
-  return [{ title: (props as SingleTabHistoryProps).tabTitle, id: '0' }]
-})
-
-const computedActiveTab = computed(() => {
-  return activeTab.value || computedTabs.value[0].id
-})
-
-const enableTabBottomBorder = computed(() => {
-  return computedTabs.value.length > 1
-})
-
-const groups = computed(() => {
-  if (Array.isArray(props.data)) {
-    return props.data || []
-  }
-
-  return props.data[computedActiveTab.value] || []
-})
-
-const filteredGroups = computed(() => {
-  if (!props.searchBar) {
-    return groups.value
-  }
-
-  const groupsWithFilteredItems = groups.value.map((group) => {
-    return {
-      ...group,
-      items: group.items.filter((item) => props.searchFn(searchQuery.value || '', item)),
-    } as HistoryGroup
-  })
-
-  return groupsWithFilteredItems.filter((group) => group.items.length > 0)
-})
-
-const handleItemClick = (item: HistoryItem) => {
-  if (item.id === editingItem.value?.id) {
-    return
-  }
-
-  emit('item-click', item)
-}
-
-const handleClose = () => {
-  emit('close')
-}
-
-const handleDelete = (item: HistoryItem) => {
-  // TODO 删除确认弹窗
-  emit('item-delete', item)
-}
-
-const { editingItem, handleEdit, handleEditorInputRef, handleKeyDown } = useEditItemTitle(emit)
-</script>
-
-<template>
-  <div class="tr-history">
-    <div class="tr-history__tabs">
-      <div
-        v-for="tab in computedTabs"
-        :key="tab.id"
-        :class="['tr-history__tab', { active: computedActiveTab === tab.id }]"
-        @click="activeTab = tab.id"
-      >
-        {{ tab.title }}
-      </div>
-    </div>
-    <div v-if="props.searchBar" class="tr-history__search">
-      <tiny-input
-        v-model="searchQuery"
-        :placeholder="props.searchPlaceholder || '搜索对话名称'"
-        :prefix-icon="IconSearch"
-        clearable
-      />
-    </div>
-    <div class="tr-history__content">
-      <template v-if="filteredGroups.length > 0">
-        <div v-for="group in filteredGroups" :key="group.date" class="tr-history__group">
-          <div class="tr-history__date">
-            <span>{{ group.date }}</span>
-          </div>
-          <div
-            v-for="item in group.items"
-            :key="`${item.id}-${item.title}`"
-            :class="['tr-history__item', { selected: props.selected === item.id }]"
-            @click="handleItemClick(item)"
-          >
-            <template v-if="editingItem?.id !== item.id">
-              <span class="tr-history__item-title">{{ item.title }}</span>
-              <ItemTag v-if="item.tag" class="tr-history__item-tag" v-bind="item.tag" />
-              <div class="tr-history__item-actions">
-                <!-- TODO add popover提示 -->
-                <tiny-button :icon="IconEditPen" type="text" size="mini" @click.stop="handleEdit(item)" />
-                <tiny-button :icon="IconDelete" type="text" size="mini" @click.stop="handleDelete(item)" />
-              </div>
-            </template>
-            <template v-else>
-              <input
-                v-model="editingItem.title"
-                class="tr-history__item-edit"
-                :ref="handleEditorInputRef"
-                v-on:keydown="handleKeyDown"
-              />
-            </template>
-          </div>
-        </div>
-      </template>
-      <SearchEmpty v-else :text="searchQuery ? '暂无搜索结果' : '暂无内容'" />
-    </div>
-    <div class="tr-history__close">
-      <tiny-button :icon="IconClose" type="text" size="mini" @click="handleClose" />
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.tr-history {
-  display: flex;
-  gap: 16px;
-  flex-direction: column;
-  background: #fff;
-  border-radius: 24px;
-  padding: 0 20px;
-  position: relative;
-  color: rgb(25, 25, 25);
-
-  .tr-history__tabs {
-    flex-shrink: 0;
-    display: flex;
-    padding-top: 24px;
-    gap: 32px;
-    font-size: 16px;
-    line-height: 1.5;
-    border-bottom: v-bind("enableTabBottomBorder ? '1px solid rgb(240, 240, 240)': 'none'");
-
-    .tr-history__tab {
-      cursor: pointer;
-      padding-bottom: 8px;
-
-      &.active {
-        font-weight: 600;
-        border-bottom: v-bind("enableTabBottomBorder ? '2px solid rgb(25, 25, 25)': 'none'");
-      }
-    }
-  }
-
-  .tr-history__close {
-    position: absolute;
-    right: 16px;
-    top: 16px;
-  }
-
-  .tr-history__search {
-    flex-shrink: 0;
-
-    :deep(.tiny-input__inner) {
-      border-radius: 999px;
-    }
-  }
-
-  .tr-history__content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    overflow-y: auto;
-    padding: 0 20px;
-    margin: 0 -20px;
-    margin-bottom: 12px;
-
-    .tr-history__date {
-      font-size: 12px;
-      line-height: 20px;
-      padding: 4px 12px;
-      color: rgb(128, 128, 128);
-      background-color: rgb(255, 255, 255);
-      position: sticky;
-      top: 0;
-      z-index: 10;
-    }
-
-    .tr-history__item {
-      --tr-history-item-bg: rgb(255, 255, 255);
-
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-      line-height: 24px;
-      border-radius: 12px;
-      background-color: var(--tr-history-item-bg);
-      cursor: pointer;
-      position: relative;
-      z-index: 1;
-      transition: box-shadow 0.3s ease;
-
-      &:hover {
-        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
-        z-index: 20;
-
-        .tr-history__item-actions {
-          opacity: 1;
-        }
-      }
-
-      &.selected {
-        --tr-history-item-bg: rgb(222, 236, 255);
-      }
-
-      .tr-history__item-title {
-        padding: 10px 12px;
-        font-size: 14px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .tr-history__item-tag {
-        flex-shrink: 0;
-        margin-right: 12px;
-      }
-
-      .tr-history__item-actions {
-        display: flex;
-        gap: 8px;
-        opacity: 0;
-        position: absolute;
-        right: 12px;
-        background-color: var(--tr-history-item-bg);
-
-        &::before {
-          content: '';
-          position: absolute;
-          right: 100%;
-          width: 40px;
-          height: 100%;
-
-          background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--tr-history-item-bg) 100%);
-        }
-      }
-
-      .tr-history__item-edit {
-        width: 100%;
-        font-size: 14px;
-        height: 44px;
-        border-radius: 12px;
-        border: 1px solid rgb(20, 118, 255);
-        padding: 0 12px;
-      }
-    }
-  }
-
-  .tiny-button {
-    --tv-Button-height: 20px;
-    --tv-Button-border-radius-only-icon-ontext: 999px;
-    margin: 0;
-  }
-}
-</style>

package/src/icon-button/index.ts

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

package/src/icon-button/index.type.ts

@@ -1,8 +0,0 @@
-import { Component, VNode } from 'vue'
-
-export interface IconButtonProps {
-  icon: VNode | Component
-  size?: string
-  svgSize?: string
-  tooltip?: string
-}

package/src/icon-button/index.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import TinyTooltip from '@opentiny/vue-tooltip'
-import { IconButtonProps } from './index.type'
-
-const props = withDefaults(defineProps<IconButtonProps>(), {
-  size: '24px',
-  svgSize: '16px',
-})
-</script>
-
-<template>
-  <tiny-tooltip v-if="tooltip" :content="tooltip" effect="dark" placement="top" :open-delay="500">
-    <button class="tr-icon-button">
-      <component :is="props.icon" />
-    </button>
-  </tiny-tooltip>
-  <button v-else class="tr-icon-button">
-    <component :is="props.icon" />
-  </button>
-</template>
-<style lang="less" scoped>
-button.tr-icon-button {
-  --tr-icon-button-bg: transparent;
-  --tr-icon-button-hover-bg: rgba(0, 0, 0, 0.04);
-  --tr-icon-button-active-bg: rgba(0, 0, 0, 0.15);
-  --tr-icon-button-border-radius: 8px;
-
-  width: v-bind('props.size');
-  height: v-bind('props.size');
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: var(--tr-icon-button-border-radius);
-  cursor: pointer;
-  padding: 0;
-  transition: background-color 0.3s;
-  background-color: var(--tr-icon-button-bg);
-
-  &:hover {
-    background-color: var(--tr-icon-button-hover-bg);
-  }
-
-  &:active {
-    background-color: var(--tr-icon-button-active-bg);
-  }
-
-  svg {
-    font-size: v-bind('props.svgSize');
-  }
-}
-</style>

package/src/index.ts

@@ -1,76 +0,0 @@
-import { App } from 'vue'
-import { Bubble, BubbleList } from './bubble'
-import Container from './container'
-import Conversations from './conversations'
-import Feedback from './feedback'
-import History from './history'
-import IconButton from './icon-button'
-import { Prompt, Prompts } from './prompts'
-import Question from './question'
-import Sender from './sender'
-import Welcome from './welcome'
-import Suggestion from './suggestion'
-
-export * from './bubble/index.type'
-export * from './container/index.type'
-export * from './feedback/index.type'
-export * from './history/index.type'
-export * from './icon-button/index.type'
-export * from './prompts/index.type'
-export * from './sender/index.type'
-export * from './welcome/index.type'
-export * from './suggestion/index.type'
-
-const components = [
-  Bubble,
-  BubbleList,
-  Container,
-  Conversations,
-  Feedback,
-  History,
-  IconButton,
-  Prompt,
-  Prompts,
-  Question,
-  Sender,
-  Welcome,
-  Suggestion,
-]
-
-export default {
-  install<T>(app: App<T>) {
-    components.forEach((component) => {
-      const name = component.name!.replace(/^Tiny/, '').replace(/^Tr/, '')
-      app.component(`Tr${name}`, component)
-    })
-  },
-}
-
-export {
-  Bubble,
-  Bubble as TrBubble,
-  BubbleList,
-  BubbleList as TrBubbleList,
-  Container,
-  Container as TrContainer,
-  Conversations,
-  Conversations as TrConversations,
-  Feedback,
-  Feedback as TrFeedback,
-  History,
-  History as TrHistory,
-  IconButton,
-  IconButton as TrIconButton,
-  Prompt,
-  Prompt as TrPrompt,
-  Prompts,
-  Prompts as TrPrompts,
-  Sender,
-  Sender as TrSender,
-  Welcome,
-  Welcome as TrWelcome,
-  Suggestion,
-  Suggestion as TrSuggestion,
-  Question,
-  Question as TrQuestion,
-}

package/src/prompts/index.ts

@@ -1,25 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import { PromptProps } from './index.type'
-
-const props = defineProps<PromptProps>()
-</script>
-
-<template>
-  <div :class="['tr-prompt', { disabled: props.disabled }]">
-    <div class="tr-prompt__icon">
-      <component :is="props.icon"></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' }]">
-      <template v-if="typeof props.badge === 'string'">
-        {{ props.badge }}
-      </template>
-      <template v-else>
-        <component :is="props.badge"></component>
-      </template>
-    </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

@@ -1,50 +0,0 @@
-<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>