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

package/dist/packages/components/src/bubble/bubble.vue2.js

@@ -1,118 +0,0 @@
-import { defineComponent as f, useCssVars as B, useSlots as M, computed as l, createElementBlock as s, openBlock as o, normalizeClass as y, createCommentVNode as c, createElementVNode as a, createBlock as v, resolveDynamicComponent as h, renderSlot as d, toDisplayString as S, unref as x, Fragment as D, renderList as L, withDirectives as V, vShow as $ } from "vue";
-import E from "../../../../node_modules/.pnpm/markdown-it@14.1.0/node_modules/markdown-it/lib/index.js";
-import H from "./components/actions/copy.vue.js";
-import I from "./components/actions/refresh.vue.js";
-const N = {
-  key: 0,
-  class: "tr-bubble__avatar"
-}, T = { class: "tr-bubble__content-wrapper" }, W = {
-  key: 1,
-  class: /* @__PURE__ */ y(["tr-bubble__content"])
-}, z = { class: "tr-bubbule__body" }, F = ["innerHTML"], R = { key: 1 }, j = {
-  key: 2,
-  class: "tr-bubbule__aborted"
-}, q = {
-  key: 0,
-  class: "tr-bubbule__footer"
-}, G = { class: "tr-bubbule__footer-left" }, J = { class: "tr-bubbule__footer-actions" }, U = /* @__PURE__ */ f({
-  __name: "bubble",
-  props: {
-    content: { default: "" },
-    id: {},
-    placement: { default: "start" },
-    avatar: {},
-    role: {},
-    type: { default: "text" },
-    loading: { type: Boolean },
-    aborted: { type: Boolean },
-    mdConfig: {},
-    actions: {},
-    maxWidth: { default: "80%" }
-  },
-  emits: ["copy", "refresh", "action"],
-  setup(k, { emit: C }) {
-    B((r) => ({
-      "088abd95": e.maxWidth
-    }));
-    const e = k, u = C, w = M(), p = l(() => e.type === "markdown" ? E(e.mdConfig || {}).render(e.content) : e.content), b = l(() => e.placement === "start"), m = l(() => e.avatar ? f(() => () => e.avatar) : null), i = /* @__PURE__ */ new Map([
-      [
-        "copy",
-        {
-          name: "copy",
-          vnode: H,
-          show: !0
-        }
-      ],
-      [
-        "refresh",
-        {
-          name: "refresh",
-          vnode: I,
-          show: !0
-        }
-      ]
-    ]), _ = l(() => (e.actions || []).map((t) => typeof t == "string" ? i.get(t) : i.has(t.name) ? {
-      ...i.get(t.name),
-      ...t
-    } : t).filter((t) => !!t)), g = (r, ...t) => {
-      if (r === "copy") {
-        u("copy", t[0]);
-        return;
-      }
-      if (r === "refresh") {
-        u("refresh");
-        return;
-      }
-      u("action", r, ...t);
-    };
-    return (r, t) => (o(), s("div", {
-      class: y([
-        "tr-bubble",
-        {
-          "placement-start": b.value,
-          "placement-end": !b.value
-        }
-      ])
-    }, [
-      m.value ? (o(), s("div", N, [
-        (o(), v(h(m.value)))
-      ])) : c("", !0),
-      a("div", T, [
-        e.loading ? d(r.$slots, "loading", { key: 0 }, () => [
-          t[0] || (t[0] = a("div", { class: "tr-bubble__loading" }, [
-            a("span"),
-            a("span"),
-            a("span")
-          ], -1))
-        ], !0) : (o(), s("div", W, [
-          a("div", z, [
-            d(r.$slots, "default", {}, () => [
-              e.type === "markdown" ? (o(), s("span", {
-                key: 0,
-                innerHTML: p.value
-              }, null, 8, F)) : (o(), s("span", R, S(p.value), 1)),
-              e.aborted ? (o(), s("span", j, "（用户停止）")) : c("", !0)
-            ], !0)
-          ]),
-          x(w).footer || _.value.length > 0 ? (o(), s("div", q, [
-            a("div", G, [
-              d(r.$slots, "footer", {}, void 0, !0)
-            ]),
-            a("div", J, [
-              (o(!0), s(D, null, L(_.value, (n) => V((o(), v(h(n.vnode), {
-                key: n == null ? void 0 : n.name,
-                bubbleItem: e,
-                onClick: (A) => g(n.name, A)
-              }, null, 8, ["onClick"])), [
-                [$, typeof n.show == "function" ? n.show(e) : n.show]
-              ])), 128))
-            ])
-          ])) : c("", !0)
-        ]))
-      ])
-    ], 2));
-  }
-});
-export {
-  U as default
-};

package/dist/packages/components/src/bubble/components/actions/copy.vue.js

@@ -1,7 +0,0 @@
-import o from "./copy.vue2.js";
-/* empty css          */
-import t from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-c674248f"]]);
-export {
-  f as default
-};

package/dist/packages/components/src/bubble/components/actions/copy.vue2.js

@@ -1,35 +0,0 @@
-import { defineComponent as i, createElementBlock as l, openBlock as s, createVNode as m, unref as u } from "vue";
-import { IconCopy as b } from "../../../../../svgs/dist/tiny-robot-svgs.js";
-const d = /* @__PURE__ */ i({
-  __name: "copy",
-  props: {
-    bubbleItem: {}
-  },
-  emits: ["click"],
-  setup(e, { emit: c }) {
-    const n = c;
-    async function o(t) {
-      try {
-        return await navigator.clipboard.writeText(t), !0;
-      } catch {
-        return !1;
-      }
-    }
-    const r = async () => {
-      const t = e.bubbleItem.content ? await o(e.bubbleItem.content) : !1;
-      n("click", t);
-    };
-    return (t, a) => (s(), l("button", {
-      class: "icon-btn",
-      onClick: r
-    }, [
-      m(u(b), {
-        width: "16px",
-        height: "16px"
-      })
-    ]));
-  }
-});
-export {
-  d as default
-};

package/dist/packages/components/src/bubble/components/actions/refresh.vue.js

@@ -1,7 +0,0 @@
-import o from "./refresh.vue2.js";
-/* empty css             */
-import t from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9f9f9745"]]);
-export {
-  m as default
-};

package/dist/packages/components/src/bubble/components/actions/refresh.vue2.js

@@ -1,16 +0,0 @@
-import { defineComponent as e, createElementBlock as t, openBlock as o, createVNode as n, unref as r } from "vue";
-import { IconRefresh as c } from "../../../../../svgs/dist/tiny-robot-svgs.js";
-const s = { class: "icon-btn" }, m = /* @__PURE__ */ e({
-  __name: "refresh",
-  setup(p) {
-    return (_, a) => (o(), t("button", s, [
-      n(r(c), {
-        width: "16px",
-        height: "16px"
-      })
-    ]));
-  }
-});
-export {
-  m as default
-};

package/dist/packages/components/src/bubble/useScroll.js

@@ -1,13 +0,0 @@
-import { nextTick as l } from "vue";
-const s = (o) => ({ scrollToBottom: () => {
-  l(() => {
-    var t;
-    (t = o.value) == null || t.scrollTo({
-      top: o.value.scrollHeight,
-      behavior: "smooth"
-    });
-  });
-} });
-export {
-  s as useElementScroll
-};

package/src/bubble/bubble-list.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import Bubble from './bubble.vue'
-import { BubbleListProps, BubbleProps } from './index.type'
-import { useElementScroll } from './useScroll'
-
-const props = withDefaults(defineProps<BubbleListProps>(), {})
-
-const scrollContainer = ref<HTMLDivElement>()
-const { scrollToBottom } = useElementScroll(scrollContainer)
-
-const lastBubble = computed(() => props.items.at(-1))
-
-watch([() => props.items.length, () => lastBubble.value?.content], () => {
-  if (!props.autoScroll) {
-    return
-  }
-
-  scrollToBottom()
-})
-
-const getItemProps = (item: BubbleProps): BubbleProps => {
-  const defaultConfig = item.role ? props.roles?.[item.role] || {} : {}
-  return { ...defaultConfig, ...item }
-}
-</script>
-
-<template>
-  <div class="tr-bubble-list" ref="scrollContainer">
-    <Bubble v-for="(item, index) in props.items" :key="item.id || index" v-bind="getItemProps(item)"></Bubble>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.tr-bubble-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  overflow-y: auto;
-  padding: 16px;
-}
-</style>

package/src/bubble/bubble.vue

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