@opentiny/tiny-robot 0.1.0-alpha.0 → 0.1.0

package/src/bubble-item/bubble-item.vue

@@ -1,264 +0,0 @@
-<script setup lang="ts">
-import markdownit from 'markdown-it'
-import { computed } from 'vue'
-import { BubbleActionOptions, BubbleItemProps } from '../bubble-list/index.type'
-import { CopyAction, RefreshAction } from './components/actions'
-import { AIIcon, UserIcon } from './components/icons'
-
-const props = withDefaults(defineProps<BubbleItemProps>(), {
-  content: '',
-  type: 'text',
-  status: 'complete',
-  maxWidth: '80%',
-})
-
-const bubbleContent = computed(() => {
-  if (props.type === 'markdown') {
-    return markdownit(props.mdConfig || {}).render(props.content)
-  }
-  return props.content
-})
-
-const isUserRole = computed(() => props.role === 'user')
-
-const isAlignRight = computed(() => {
-  if (props.roleConfig?.align) {
-    return props.roleConfig.align === 'right'
-  }
-
-  return isUserRole.value
-})
-
-const avatarVNode = computed(() => {
-  const avatar = props.roleConfig?.avatar
-  if (avatar) {
-    return () => avatar
-  }
-
-  return isUserRole.value ? UserIcon : AIIcon
-})
-
-const defaultActionsMap = new Map<string, BubbleActionOptions>([
-  [
-    'copy',
-    {
-      name: 'copy',
-      vnode: CopyAction,
-      show: () => props.status === 'complete' || props.status === 'aborted',
-    },
-  ],
-  [
-    'regenerate',
-    {
-      name: 'regenerate',
-      vnode: RefreshAction,
-      show: () => props.status === 'complete' || props.status === 'aborted',
-    },
-  ],
-])
-
-const computedActions = computed(() => {
-  const getActions = () => {
-    if (Array.isArray(props.actions) && props.actions.length > 0) {
-      return props.actions
-    }
-
-    if (props.role === 'ai') {
-      return ['regenerate', 'copy']
-    }
-
-    return ['copy']
-  }
-
-  const actions = getActions().map((action) => {
-    if (typeof action === 'string') {
-      return defaultActionsMap.get(action)
-    }
-
-    return action
-  })
-
-  return actions.filter((action): action is BubbleActionOptions => Boolean(action))
-})
-
-const emit = defineEmits(['actionClick'])
-
-const handleActionClick = (name: string, ...args: unknown[]) => {
-  emit('actionClick', name, ...args)
-}
-</script>
-
-<template>
-  <div
-    :class="[
-      'tr-bubble',
-      {
-        'align-left': !isAlignRight,
-        'align-right': isAlignRight,
-      },
-    ]"
-  >
-    <div class="tr-bubble__avatar">
-      <component :is="avatarVNode"></component>
-    </div>
-    <slot v-if="props.status === 'loading'" name="loading">
-      <div class="tr-bubble__load-wrap">
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
-    </slot>
-    <div
-      v-else
-      :class="[
-        'tr-bubble__content',
-        { 'tr-bubble__content-role-ai': !isUserRole },
-        { 'tr-bubble__content-role-user': isUserRole },
-      ]"
-    >
-      <div class="tr-bubbule__body">
-        <span v-if="props.type === 'markdown'" v-html="bubbleContent"></span>
-        <span v-else>{{ bubbleContent }}</span>
-        <span v-if="props.status === 'aborted'" class="tr-bubbule__aborted">（用户停止）</span>
-      </div>
-      <div class="tr-bubbule__footer">
-        <div class="tr-bubbule__footer-left">
-          <slot name="footer"></slot>
-        </div>
-        <div v-if="props.showActions" 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>
-</template>
-
-<style lang="less" scoped>
-.tr-bubble {
-  display: flex;
-  gap: 16px;
-  max-width: v-bind('props.maxWidth');
-
-  &.align-left {
-    flex-direction: row;
-
-    .tr-bubble__content {
-      border-top-left-radius: 0;
-    }
-  }
-
-  &.align-right {
-    flex-direction: row-reverse;
-    margin-left: auto;
-
-    .tr-bubble__content {
-      border-top-right-radius: 0;
-    }
-  }
-}
-
-.tr-bubble__avatar {
-  width: 40px;
-  height: 40px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tr-bubble__load-wrap {
-  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 {
-  padding: 16px 24px;
-  border-radius: 24px;
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.02);
-
-  &.tr-bubble__content-role-ai {
-    background-color: white;
-  }
-
-  &.tr-bubble__content-role-user {
-    background-color: rgb(222, 236, 255);
-  }
-
-  .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-item/components/actions/copy.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { BubbleItemProps } from '../../../bubble-list/index.type'
-
-const { bubbleItem } = defineProps<{ bubbleItem: BubbleItemProps }>()
-
-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>
-  <span @click="handleClick">
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <desc>Created with Pixso.</desc>
-      <defs />
-      <path
-        id="矢量 22"
-        d="M4 4.76C2.89 4.76 2 5.66 2 6.76L2 11.99C2 13.1 2.89 13.99 4 13.99L9.23 13.99C10.33 13.99 11.23 13.1 11.23 11.99L11.23 6.76C11.23 5.66 10.33 4.76 9.23 4.76L4 4.76ZM14 8.46L14 3.84C14 2.82 13.17 2 12.15 2L7.53 2"
-        stroke="#191919"
-        stroke-opacity="1.000000"
-        stroke-width="1.000000"
-        stroke-linecap="round"
-      />
-    </svg>
-  </span>
-</template>

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

@@ -1,27 +0,0 @@
-<template>
-  <span>
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <desc>Created with Pixso.</desc>
-      <defs>
-        <clipPath id="clip521_64343">
-          <rect id="刷新-refresh" width="16.000000" height="16.000000" fill="white" fill-opacity="0" />
-        </clipPath>
-      </defs>
-      <g clip-path="url(#clip521_64343)">
-        <path
-          id="形状结合"
-          d="M11.8 2.75C14.55 4.73 15.27 8.46 13.54 11.3L15.24 10.84C15.47 10.78 15.7 10.9 15.8 11.1L15.83 11.18C15.9 11.44 15.75 11.7 15.49 11.77L12.59 12.54C12.34 12.61 12.08 12.46 12.01 12.2L11.23 9.31C11.16 9.06 11.31 8.79 11.57 8.72C11.82 8.65 12.08 8.81 12.16 9.06L12.65 10.91C14.21 8.49 13.62 5.24 11.24 3.52C8.77 1.74 5.32 2.28 3.53 4.73C1.74 7.18 2.29 10.61 4.76 12.39C6.42 13.59 8.28 13.84 10.39 13.16C10.64 13.08 10.91 13.22 10.99 13.47C11.07 13.72 10.94 13.99 10.68 14.07C8.29 14.85 6.11 14.55 4.19 13.16C1.3 11.07 0.65 7.04 2.75 4.16C4.85 1.29 8.91 0.66 11.8 2.75Z"
-          fill="#191919"
-          fill-opacity="1.000000"
-          fill-rule="nonzero"
-        />
-      </g></svg
-  ></span>
-</template>