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

package/src/history/components/item-tag.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { HistoryItemTagProps } from '../index.type'
+
+const props = withDefaults(defineProps<HistoryItemTagProps>(), {
+  type: 'default',
+})
+</script>
+
+<template>
+  <div :class="['tr-history__item-tag', props.type]" :style="props.style">
+    <span>{{ props.text }}</span>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-history__item-tag {
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 18px;
+  border-radius: 2px;
+
+  &.default {
+    color: rgb(25, 25, 25);
+    background-color: rgb(245, 245, 245);
+  }
+
+  &.success {
+    // TODO 成功
+    color: rgb(25, 25, 25);
+    background-color: rgb(245, 245, 245);
+  }
+
+  &.warning {
+    // TODO 警告
+    color: rgb(25, 25, 25);
+    background-color: rgb(245, 245, 245);
+  }
+
+  &.error {
+    color: rgb(242, 48, 48);
+    background-color: rgb(252, 227, 224);
+  }
+
+  &.info {
+    color: rgb(20, 118, 255);
+    background-color: rgb(222, 236, 255);
+  }
+}
+</style>

package/src/history/components/search-empty.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="tr-history__empty">
+    <span class="tr-history__empty-icon">
+      <IconEmptySearch />
+    </span>
+    <span class="tr-history__empty-text">{{ props.text }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IconEmptySearch } from '@opentiny/tiny-robot-svgs'
+
+const props = withDefaults(defineProps<{ text: string }>(), {
+  text: '暂无内容',
+})
+</script>
+
+<style lang="less" scoped>
+.tr-history__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 84px;
+  padding-bottom: 0;
+
+  .tr-history__empty-icon {
+    font-size: 16px;
+  }
+
+  .tr-history__empty-text {
+    font-size: 12px;
+    line-height: 24px;
+    color: rgb(25, 25, 25);
+  }
+}
+</style>

package/src/history/composables/index.ts

@@ -0,0 +1 @@
+export * from './useEditItemTitle'

package/src/history/composables/useEditItemTitle.ts

@@ -0,0 +1,75 @@
+import { onClickOutside } from '@vueuse/core'
+import { ComponentPublicInstance, nextTick, ref, watchEffect } from 'vue'
+import { HistoryEvents, HistoryItem } from '../index.type'
+
+export const useEditItemTitle = (emit: HistoryEvents) => {
+  const editingItem = ref<Pick<HistoryItem, 'id' | 'title'> & { rawData: HistoryItem }>()
+
+  const handleEdit = (item: HistoryItem) => {
+    editingItem.value = {
+      id: item.id,
+      title: item.title,
+      rawData: item,
+    }
+  }
+
+  const inputRef = ref<HTMLInputElement | null>(null)
+
+  const handleEditorInputRef = (el: Element | ComponentPublicInstance | null) => {
+    if (!el) {
+      return
+    }
+
+    nextTick(() => {
+      inputRef.value = el as HTMLInputElement
+      inputRef.value.focus()
+    })
+  }
+
+  let stopFn: (() => void) | undefined = undefined
+
+  const handleConfirm = () => {
+    if (editingItem.value) {
+      if (editingItem.value.title !== editingItem.value.rawData.title) {
+        const { title, rawData } = editingItem.value
+        emit('item-title-change', title, rawData)
+      }
+      editingItem.value = undefined
+    }
+
+    stopFn?.()
+    stopFn = undefined
+  }
+
+  const handleCancel = () => {
+    editingItem.value = undefined
+    stopFn?.()
+    stopFn = undefined
+  }
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleConfirm()
+    } else if (e.key === 'Escape') {
+      handleCancel()
+    }
+  }
+
+  watchEffect(() => {
+    if (!inputRef.value) {
+      return
+    }
+
+    stopFn?.()
+    stopFn = onClickOutside(inputRef, () => {
+      handleConfirm()
+    })
+  })
+
+  return {
+    editingItem,
+    handleEdit,
+    handleEditorInputRef,
+    handleKeyDown,
+  }
+}

package/src/history/index.ts

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

package/src/history/index.type.ts

@@ -0,0 +1,50 @@
+import { CSSProperties } from 'vue'
+
+interface BaseHistoryProps {
+  activeTab?: string
+  searchBar?: boolean
+  searchQuery?: string
+  searchPlaceholder?: string
+  searchFn?: (query: string, item: HistoryItem) => boolean
+  selected?: string
+}
+
+export type SingleTabHistoryProps = {
+  tabTitle: string
+  data: HistoryGroup[]
+} & BaseHistoryProps
+
+export type MultiTabHistoryProps = {
+  tabs: {
+    title: string
+    id: string
+  }[]
+  data: Record<string, HistoryGroup[]>
+} & BaseHistoryProps
+
+export type HistoryProps = SingleTabHistoryProps | MultiTabHistoryProps
+
+export interface HistoryGroup<T = Record<string, unknown>> {
+  date: string
+  items: HistoryItem<T>[]
+}
+
+export interface HistoryItemTagProps {
+  text: string
+  type?: 'success' | 'warning' | 'error' | 'info' | 'default'
+  style?: CSSProperties
+}
+
+export interface HistoryItem<T = Record<string, unknown>> {
+  id: string
+  title: string
+  tag?: HistoryItemTagProps
+  data?: T
+}
+
+export interface HistoryEvents {
+  (e: 'close'): void
+  (e: 'item-click', item: HistoryItem): void
+  (e: 'item-title-change', newTitle: string, rawData: HistoryItem): void
+  (e: 'item-delete', item: HistoryItem): void
+}

package/src/history/index.vue

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

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

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

package/src/icon-button/index.vue

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

@@ -2,17 +2,40 @@ 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, Prompt, Prompts, Question, Sender, Welcome]
+const components = [
+  Bubble,
+  BubbleList,
+  Container,
+  Conversations,
+  Feedback,
+  History,
+  IconButton,
+  Prompt,
+  Prompts,
+  Question,
+  Sender,
+  Welcome,
+  Suggestion,
+]
 
 export default {
   install<T>(app: App<T>) {
@@ -32,6 +55,12 @@ export {
   Container as TrContainer,
   Conversations,
   Conversations as TrConversations,
+  Feedback,
+  Feedback as TrFeedback,
+  History,
+  History as TrHistory,
+  IconButton,
+  IconButton as TrIconButton,
   Prompt,
   Prompt as TrPrompt,
   Prompts,
@@ -40,5 +69,8 @@ export {
   Sender as TrSender,
   Welcome,
   Welcome as TrWelcome,
+  Suggestion,
+  Suggestion as TrSuggestion,
   Question,
+  Question as TrQuestion,
 }