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

package/src/bubble/index.type.ts

@@ -1,49 +0,0 @@
-import { Options as MarkdownItOptions } from 'markdown-it'
-import { CSSProperties, VNode } from 'vue'
-
-export type BubblePalcement = 'start' | 'end'
-
-export interface BubbleProps {
-  /**
-   * 气泡内容
-   */
-  content?: string
-  id?: string | number | symbol
-  /**
-   * 气泡位置
-   */
-  placement?: BubblePalcement
-  avatar?: VNode
-  role?: string
-  /**
-   * 内容类型
-   */
-  type?: 'text' | 'markdown'
-  loading?: boolean
-  aborted?: boolean
-  /**
-   * type 为 'markdown' 时，markdown 的配置项
-   */
-  mdConfig?: MarkdownItOptions
-  // 样式相关
-  maxWidth?: CSSProperties['maxWidth']
-}
-
-export interface BubbleSlots {
-  default?: (slotProps: { bubbleProps: BubbleProps }) => unknown
-  footer?: (slotProps: { bubbleProps: BubbleProps }) => unknown
-  loading?: (slotProps: { bubbleProps: BubbleProps }) => unknown
-}
-
-export type BubbleRoleConfig = Pick<BubbleProps, 'placement' | 'avatar' | 'type' | 'mdConfig' | 'maxWidth'> & {
-  slots?: BubbleSlots
-}
-
-export interface BubbleListProps {
-  items: (BubbleProps & { slots?: BubbleSlots })[]
-  /**
-   * 每个角色的默认配置项
-   */
-  roles?: Record<string, BubbleRoleConfig>
-  autoScroll?: boolean
-}

package/src/container/index.ts

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

package/src/container/index.type.ts

@@ -1,17 +0,0 @@
-export interface ContainerProps {
-  /**
-   * model:show
-   */
-  show: boolean
-  /**
-   * model:fullscreen
-   */
-  fullscreen?: boolean
-}
-
-export interface ContainerSlots {
-  default: () => unknown
-  title: () => unknown
-  operations: () => unknown
-  footer: () => unknown
-}

package/src/container/index.vue

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import { IconCancelFullScreen, IconClose, IconFullScreen } from '@opentiny/tiny-robot-svgs'
-import { computed } from 'vue'
-import IconButton from '../icon-button'
-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>
-        <icon-button
-          size="28"
-          svg-size="20"
-          :icon="IconFullScreenSwitcher"
-          @click="$emit('update:fullscreen', !fullscreen)"
-        ></icon-button>
-        <icon-button size="28" svg-size="20" :icon="IconClose" @click="$emit('update:show', false)"></icon-button>
-      </div>
-    </div>
-    <slot></slot>
-    <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;
-  }
-
-  .tr-container__header + :slotted(*) {
-    flex: 1;
-    overflow-y: auto;
-  }
-
-  .tr-container__footer {
-    flex-shrink: 0;
-  }
-}
-</style>

package/src/conversations/index.ts

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

package/src/conversations/index.vue

@@ -1,3 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>conversations</template>

package/src/feedback/components/SourceList.vue

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { IconArrowUp } from '@opentiny/tiny-robot-svgs'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    sources: { label: string; link: string }[]
-    linesLimit?: number
-  }>(),
-  {
-    linesLimit: Number.MAX_SAFE_INTEGER,
-  },
-)
-
-const showAll = ref(false)
-const pillRefs = ref<(HTMLElement | null)[]>([])
-const morePillIndex = ref<number | null>(null)
-
-const updateMoreIndex = () => {
-  nextTick(() => {
-    const tops = pillRefs.value.map((el) => el?.offsetTop || 0)
-    const uniqueTops = Array.from(new Set(tops))
-
-    if (uniqueTops.length > props.linesLimit) {
-      // 超过 linesLimit 行，找到第 linesLimit 行最后一个的index
-      const lastLineTop = uniqueTops[props.linesLimit - 1]
-      const lastIndex = tops.lastIndexOf(lastLineTop)
-      morePillIndex.value = lastIndex
-    } else {
-      morePillIndex.value = null
-    }
-  })
-}
-
-const leftPillCount = computed(() => {
-  return props.sources.length - (morePillIndex.value || 0)
-})
-
-onMounted(updateMoreIndex)
-
-watch(() => props.sources, updateMoreIndex)
-
-const setPillRef = (el: HTMLElement | null, idx: number) => {
-  if (el) {
-    pillRefs.value[idx] = el
-  }
-}
-</script>
-
-<template>
-  <div class="tr-feedback__source-list">
-    <template v-for="(source, index) in props.sources" :key="index">
-      <a
-        v-if="!morePillIndex || showAll || index < morePillIndex"
-        class="pill"
-        :href="source.link"
-        target="_blank"
-        :ref="(el) => setPillRef(el as HTMLElement, index)"
-      >
-        {{ source.label }}
-      </a>
-      <span v-if="morePillIndex && !showAll && index === morePillIndex" class="pill" @click="showAll = true">
-        {{ leftPillCount }}+
-      </span>
-    </template>
-    <span v-if="showAll" class="pill collapse-pill" @click="showAll = false">
-      <IconArrowUp />
-    </span>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.tr-feedback__source-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-
-  .pill {
-    padding: 4px 12px;
-    font-size: 12px;
-    line-height: 20px;
-    border-radius: 999px;
-    border: none;
-    background-color: rgba(20, 118, 255, 0.06);
-    color: rgb(20, 118, 255);
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &.collapse {
-      font-size: 16px;
-    }
-  }
-
-  .collapse-pill {
-    padding: 0;
-    font-size: 16px;
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.3s ease;
-
-    &:hover {
-      background-color: rgba(20, 118, 255, 0.12);
-    }
-  }
-}
-</style>

package/src/feedback/components/index.ts

@@ -1 +0,0 @@
-export { default as SourceList } from './SourceList.vue'

package/src/feedback/index.ts

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

package/src/feedback/index.type.ts

@@ -1,27 +0,0 @@
-import { Component, VNode } from 'vue'
-
-export interface FeedbackProps {
-  operations?: {
-    name: string
-    label: string
-    onClick?: () => void
-  }[]
-  operationsLimit?: number
-  actions?: {
-    name: string
-    label: string
-    icon?: 'copy' | 'refresh' | 'like' | 'dislike' | VNode | Component
-    onClick?: () => void
-  }[]
-  actionsLimit?: number
-  sources?: {
-    label: string
-    link: string
-  }[]
-  sourcesLinesLimit?: number
-}
-
-export interface FeedbackEvents {
-  (e: 'operation', name: string): void
-  (e: 'action', name: string): void
-}

package/src/feedback/index.vue

@@ -1,166 +0,0 @@
-<script lang="ts" setup>
-import { IconArrowDown, IconArrowUp, IconCopy, IconDislike, IconLike, IconRefresh } from '@opentiny/tiny-robot-svgs'
-import TinyButton from '@opentiny/vue-button'
-import { ref } from 'vue'
-import ActionGroup, { ActionGroupItem } from '../action-group'
-import IconButton from '../icon-button'
-import { SourceList } from './components'
-import type { FeedbackEvents, FeedbackProps } from './index.type'
-
-const props = withDefaults(defineProps<FeedbackProps>(), {
-  operationsLimit: Number.MAX_SAFE_INTEGER,
-  actionsLimit: Number.MAX_SAFE_INTEGER,
-  sourcesLinesLimit: Number.MAX_SAFE_INTEGER,
-})
-
-const iconMap = {
-  copy: IconCopy,
-  refresh: IconRefresh,
-  like: IconLike,
-  dislike: IconDislike,
-}
-
-const emit = defineEmits<FeedbackEvents>()
-
-const handleOperation = (name: string) => {
-  props.operations?.find((operation) => operation.name === name)?.onClick?.()
-  emit('operation', name)
-}
-
-const handleAction = (name: string) => {
-  props.actions?.find((action) => action.name === name)?.onClick?.()
-  emit('action', name)
-}
-
-const showSourceList = ref(false)
-
-const handleSourceList = () => {
-  showSourceList.value = !showSourceList.value
-}
-</script>
-
-<template>
-  <div class="tr-feedback">
-    <div class="tr-feedback__operations">
-      <div class="tr-feedback__operations-left">
-        <action-group
-          v-if="props.operations?.length"
-          :max-num="props.operationsLimit"
-          :drop-down-show-label-only="true"
-          @item-click="handleOperation"
-          class="tr-feedback__operations-left-action-group"
-        >
-          <action-group-item
-            v-for="operation in props.operations"
-            :key="operation.name"
-            :name="operation.name"
-            :label="operation.label"
-          >
-            <tiny-button round :reset-time="0" size="mini">
-              {{ operation.label }}
-            </tiny-button>
-          </action-group-item>
-          <template #moreBtn>
-            <tiny-button round size="mini" :reset-time="0" class="tr-feedback__operations-more-btn">
-              <span>更多</span>
-              <icon-arrow-down />
-            </tiny-button>
-          </template>
-        </action-group>
-        <div v-else-if="props.sources?.length">
-          <span class="tr-feedback__source" @click="handleSourceList">
-            <span>{{ props.sources?.length }}条来源</span>
-            <component :is="showSourceList ? IconArrowUp : IconArrowDown" />
-          </span>
-        </div>
-      </div>
-      <div class="tr-feedback__operations-right">
-        <action-group :max-num="props.actionsLimit" :show-tooltip="true" @item-click="handleAction">
-          <action-group-item
-            v-for="action in props.actions"
-            :key="action.name"
-            :name="action.name"
-            :label="action.label"
-          >
-            <icon-button v-if="typeof action.icon === 'string'" :icon="iconMap[action.icon]"></icon-button>
-            <component v-else :is="action.icon"></component>
-          </action-group-item>
-        </action-group>
-      </div>
-    </div>
-    <div
-      v-if="(props.operations?.length && props.sources?.length) || (showSourceList && props.sources)"
-      class="tr-feedback__footer"
-    >
-      <div v-if="props.operations?.length && props.sources?.length">
-        <span class="tr-feedback__source" @click="handleSourceList">
-          <span>{{ props.sources?.length }}条来源</span>
-          <component :is="showSourceList ? IconArrowUp : IconArrowDown" />
-        </span>
-      </div>
-      <source-list
-        v-if="showSourceList && props.sources"
-        :sources="props.sources"
-        :lines-limit="props.sourcesLinesLimit"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.tr-feedback {
-  .tr-feedback__operations {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 8px;
-
-    .tr-feedback__operations-left {
-      .tr-feedback__operations-left-action-group {
-        gap: 8px;
-      }
-
-      .tr-feedback__operations-more-btn {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-
-        svg {
-          font-size: 12px;
-        }
-      }
-    }
-
-    .tr-feedback__operations-right {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-  }
-  .tr-feedback__footer {
-    margin-top: 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .tr-feedback__source {
-    height: 24px;
-    display: inline-flex;
-    align-items: center;
-    font-size: 12px;
-    line-height: 20px;
-    color: rgb(128, 128, 128);
-    cursor: pointer;
-    gap: 2px;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    svg {
-      font-size: 16px;
-    }
-  }
-}
-</style>

package/src/history/components/index.ts

@@ -1,2 +0,0 @@
-export { default as ItemTag } from './item-tag.vue'
-export { default as SearchEmpty } from './search-empty.vue'

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

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

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

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