@opentiny/tiny-robot 0.1.0-alpha.0

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

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

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

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

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

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