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

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,7 @@
+import { Component, VNode } from 'vue'
+
+export interface IconButtonProps {
+  icon: VNode | Component
+  size?: string | number
+  svgSize?: string | number
+}

package/src/icon-button/index.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { IconButtonProps } from './index.type'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<IconButtonProps>(), {
+  size: '24px',
+  svgSize: '16px',
+})
+
+const formatSize = (size: string | number) => {
+  if (!isNaN(Number(size))) {
+    return `${size}px`
+  }
+
+  return size as string
+}
+
+const size = computed(() => formatSize(props.size))
+const svgSize = computed(() => formatSize(props.svgSize))
+</script>
+
+<template>
+  <button 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('size');
+  height: v-bind('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('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,
 }

package/src/prompts/prompt.vue

@@ -1,39 +1,25 @@
 <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>
+      <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' }]">
-      <component :is="badgeComp"></component>
+      <template v-if="typeof props.badge === 'string'">
+        {{ props.badge }}
+      </template>
+      <template v-else>
+        <component :is="props.badge"></component>
+      </template>
     </div>
   </div>
 </template>

package/src/question/components/HotQuestions.vue

@@ -91,7 +91,7 @@ const modalRef = ref<HTMLElement | null>(null)
   <div v-if="visible" class="tr-question-modal-backdrop" @mousedown="handleClickOutside">
     <div ref="modalRef" class="tr-question-panel" :style="{ width: modalWidth }" @mousedown.stop>
       <div class="tr-question-header">
-        <div style="display: flex; align-items: center; gap: 12px">
+        <div style="display: flex; align-items: center; gap: 12px; font-size: 36px">
           <div><IconHotQuestion /></div>
           <div class="tr-question-header-title">热门问题</div>
         </div>

package/src/question/index.less

@@ -53,8 +53,7 @@ body.tr-modal-open {
 
   /* 按钮图标 */
   & > svg {
-    width: 28px;
-    height: 28px;
+    font-size: 28px;
     border-radius: 50%;
     fill: #ffffff;
   }
@@ -343,9 +342,8 @@ body.tr-modal-open {
     box-shadow: var(--tr-question-common-item-shadow);
     transition: var(--tr-question-hover-transition);
 
-    & > svg {
-      width: 16px;
-      height: 16px;
+    & svg {
+      font-size: 16px;
     }
 
     /* 悬停效果 */
@@ -394,15 +392,16 @@ body.tr-modal-open {
 
   /* 按钮图标 */
   & > svg {
-    width: 1em;
-    height: 1em;
-    font-size: 32px;
+    font-size: 20px;
+    background-color: #fff;
+    color: rgb(89, 89, 89);
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
     border-radius: 50%;
-    fill: #ffffff;
+    transition: background-color 0.3s ease;
   }
 
   & > svg:hover {
-    fill: #f5f5f5;
+    background-color: #f5f5f5;
   }
 }