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

package/src/bubble/bubble.vue

@@ -1,237 +0,0 @@
-<script setup lang="ts">
-import markdownit from 'markdown-it'
-import { computed, useSlots } from 'vue'
-import { CopyAction, RefreshAction } from './components/actions'
-import { BubbleActionOptions, BubbleEvents, BubbleProps, BubbleSlots } from './index.type'
-
-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 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="props.avatar" class="tr-bubble__avatar">
-      <component :is="props.avatar"></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

@@ -1,54 +0,0 @@
-<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/index.ts

@@ -1,2 +0,0 @@
-export { default as CopyAction } from './copy.vue'
-export { default as RefreshAction } from './refresh.vue'

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

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

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

@@ -1,63 +0,0 @@
-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 | number | symbol
-  /**
-   * 气泡位置
-   */
-  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

@@ -1,14 +0,0 @@
-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/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,134 +0,0 @@
-<script setup lang="ts">
-import { IconCancelFullScreen, IconClose, IconFullScreen } from '@opentiny/tiny-robot-svgs'
-import { computed } from 'vue'
-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>
-        <button class="icon-btn" @click="$emit('update:fullscreen', !fullscreen)">
-          <IconFullScreenSwitcher />
-        </button>
-        <button class="icon-btn" @click="$emit('update:show', false)">
-          <IconClose />
-        </button>
-      </div>
-    </div>
-    <div class="tr-container__body">
-      <slot></slot>
-    </div>
-    <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;
-
-    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;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.04);
-      }
-
-      &:active {
-        background-color: rgba(0, 0, 0, 0.15);
-      }
-
-      svg {
-        font-size: 20px;
-      }
-    }
-  }
-
-  .tr-container__body {
-    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>