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

package/dist/index2.js

@@ -1,301 +1,841 @@
-import { ref as _, onMounted as ne, onBeforeUnmount as oe, defineComponent as P, createElementBlock as u, openBlock as r, createElementVNode as w, createVNode as T, unref as n, toDisplayString as B, mergeModels as W, useModel as j, computed as I, normalizeStyle as ie, Fragment as S, renderList as V, createBlock as H, resolveDynamicComponent as Y, nextTick as se, normalizeClass as U, withDirectives as q, createCommentVNode as G, renderSlot as A, withKeys as F, withModifiers as J, isRef as le, vModelText as re, vShow as ue } from "vue";
-import { IconEmptySearch as ae, IconEditPen as ce, IconDelete as de, IconCheck as me, IconClose as fe, IconMenu2 as pe } from "@opentiny/tiny-robot-svgs";
-import { _ as z } from "./_plugin-vue_export-helper.js";
-import { o as Z, u as ve, c as ge, b as ye } from "./index4.js";
-import { t as O } from "./utils.js";
-const D = _(!1);
-let b = 0, $;
-function _e() {
-  const s = window.matchMedia("(hover: none) and (pointer: coarse)"), m = () => {
-    D.value = s.matches;
-  };
-  m(), s.addEventListener("change", m);
-  const t = (c) => {
-    D.value = c.pointerType !== "mouse";
-  };
-  return window.addEventListener("pointerdown", t, !0), () => {
-    s.removeEventListener("change", m), window.removeEventListener("pointerdown", t, !0);
-  };
+import { defineComponent as C, createElementBlock as B, openBlock as f, renderSlot as R, ref as M, computed as v, watch as Q, normalizeClass as Y, createVNode as z, unref as E, watchEffect as W, Fragment as N, createElementVNode as x, createBlock as k, withDirectives as q, toDisplayString as V, vShow as Z, resolveDynamicComponent as U, normalizeProps as O, guardReactiveProps as P, createCommentVNode as se, useCssModule as Oe, renderList as J, mergeProps as D, markRaw as w, provide as L, inject as A, toValue as S, reactive as De, withCtx as $, onMounted as fe, onUnmounted as Pe, nextTick as me } from "vue";
+import { _ as T } from "./_plugin-vue_export-helper.js";
+import { IconLoading as pe, IconAtom as Fe, IconArrowDown as _e, IconPlugin as ue, IconError as Ge, IconCancelled as Ke } from "@opentiny/tiny-robot-svgs";
+import { u as Ue, a as He, w as Je, b as Ye } from "./index5.js";
+const be = Symbol("bubble-message-group"), ge = Symbol("bubble-box-renderer-matches"), he = Symbol("bubble-box-fallback-renderer"), ve = Symbol(
+  "bubble-box-prop-fallback-renderer"
+), ye = Symbol("bubble-content-renderer-matches"), xe = Symbol(
+  "bubble-content-fallback-renderer"
+), Be = Symbol(
+  "bubble-content-prop-fallback-renderer"
+), ne = Symbol("bubble-store"), Re = Symbol("bubble-state-change-fn"), G = {
+  LOADING: -1,
+  NORMAL: 0,
+  CONTENT: 10,
+  ROLE: 20
+}, ze = {
+  class: "tr-bubble__box",
+  "data-box-type": "box"
+}, We = /* @__PURE__ */ C({
+  __name: "Box",
+  props: {
+    placement: {},
+    shape: {}
+  },
+  setup(t) {
+    return (e, n) => (f(), B("div", ze, [
+      R(e.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), oe = /* @__PURE__ */ T(We, [["__scopeId", "data-v-98101726"]]), Ve = ["src", "alt"], Xe = /* @__PURE__ */ C({
+  __name: "Image",
+  props: {
+    message: {},
+    contentIndex: {}
+  },
+  setup(t) {
+    const e = t, n = M(!1), s = M(!1), a = v(() => Array.isArray(e.message.content) ? e.message.content.at(e.contentIndex ?? 0) : null), u = v(() => a.value ? typeof a.value.image_url == "string" ? a.value.image_url : a.value.image_url.url : null);
+    Q(u, () => {
+      n.value = !1, s.value = !1;
+    });
+    const o = () => {
+      n.value = !0, s.value = !1;
+    }, d = () => {
+      s.value = !0, n.value = !0;
+    };
+    return (b, y) => {
+      var p;
+      return f(), B("img", {
+        class: Y(["tr-bubble__image", { loading: !n.value }]),
+        src: u.value,
+        alt: (p = a.value) == null ? void 0 : p.text,
+        loading: "lazy",
+        onLoad: o,
+        onError: d,
+        "data-type": "image"
+      }, null, 42, Ve);
+    };
+  }
+}), Ce = /* @__PURE__ */ T(Xe, [["__scopeId", "data-v-55301aaf"]]), je = {
+  class: "tr-bubble__loading",
+  "data-type": "loading"
+}, qe = /* @__PURE__ */ C({
+  __name: "Loading",
+  props: {
+    message: {},
+    contentIndex: {}
+  },
+  setup(t) {
+    return (e, n) => (f(), B("div", je, [
+      z(E(pe))
+    ]));
+  }
+}), ke = /* @__PURE__ */ T(qe, [["__scopeId", "data-v-bc1b5ff4"]]), Ze = {
+  class: "tr-bubble__reasoning",
+  "data-type": "reasoning"
+}, Qe = { class: "title" }, et = { class: "detail" }, tt = { class: "detail" }, nt = /* @__PURE__ */ C({
+  __name: "Reasoning",
+  props: {
+    message: {},
+    contentIndex: {}
+  },
+  setup(t) {
+    const e = t, { restMessage: n, restProps: s } = Ne(e, ["reasoning_content"]), a = ae(n, e.contentIndex), u = M(!1);
+    W(() => {
+      var b;
+      u.value = ((b = e.message.state) == null ? void 0 : b.open) ?? !1;
+    });
+    const o = we(), d = () => {
+      u.value = !u.value, o("open", u.value);
+    };
+    return (b, y) => {
+      var p;
+      return f(), B(N, null, [
+        x("div", Ze, [
+          x("div", {
+            class: "header",
+            onClick: d
+          }, [
+            z(E(Fe)),
+            x("span", Qe, V((p = e.message.state) != null && p.thinking ? "正在思考" : "已思考"), 1),
+            z(E(_e), {
+              class: Y(["expand-icon", { "-rotate-90": !u.value }])
+            }, null, 8, ["class"])
+          ]),
+          q(x("div", et, [
+            y[0] || (y[0] = x("div", { class: "side-border" }, [
+              x("div", { class: "dot-wrapper" }, [
+                x("div", { class: "dot" })
+              ]),
+              x("div", { class: "border-line" })
+            ], -1)),
+            x("p", tt, V(e.message.reasoning_content), 1)
+          ], 512), [
+            [Z, u.value]
+          ])
+        ]),
+        (f(), k(U(E(a)), O(P(E(s))), null, 16))
+      ], 64);
+    };
+  }
+}), Ie = /* @__PURE__ */ T(nt, [["__scopeId", "data-v-b7c07b23"]]), st = {
+  key: 0,
+  class: "tr-bubble__text",
+  "data-type": "text"
+}, ot = /* @__PURE__ */ C({
+  __name: "Text",
+  props: {
+    message: {},
+    contentIndex: {}
+  },
+  setup(t) {
+    const e = t, n = v(() => {
+      var s, a;
+      return typeof e.message.content == "string" ? e.message.content : (a = (s = e.message.content) == null ? void 0 : s.at(e.contentIndex ?? 0)) == null ? void 0 : a.text;
+    });
+    return (s, a) => n.value ? (f(), B("p", st, V(n.value), 1)) : se("", !0);
+  }
+}), re = /* @__PURE__ */ T(ot, [["__scopeId", "data-v-b884b52a"]]), Ee = /* @__PURE__ */ C({
+  __name: "ToolRole",
+  props: {
+    message: {},
+    contentIndex: {}
+  },
+  setup(t) {
+    const e = t, n = ce();
+    return W(() => {
+      e.message.tool_call_id && (n.toolCallResults || (n.toolCallResults = {}), n.toolCallResults[e.message.tool_call_id] = e.message.content ?? "");
+    }), (s, a) => se("", !0);
+  }
+});
+let ee = null;
+const rt = () => (ee || (ee = import("./index4.js")), ee);
+let H = null;
+const at = async () => {
+  if (H)
+    return H;
+  try {
+    const [t, e] = await Promise.all([import("markdown-it"), import("dompurify")]);
+    return H = { markdown: t.default, dompurify: e.default }, H;
+  } catch {
+    return console.warn("[BubbleMarkdownRenderer] install markdown-it and dompurify to use markdown renderer"), H = null, null;
+  }
+}, lt = {
+  class: "tr-bubble__tool-call",
+  "data-type": "tool-call"
+}, ct = { class: "header" }, ut = { class: "header-left" }, it = { class: "title" }, dt = { class: "header-right" }, ft = { class: "divider" }, mt = ["innerHTML"], pt = /* @__PURE__ */ C({
+  __name: "Tool",
+  props: {
+    message: {},
+    contentIndex: {},
+    toolIndex: {}
+  },
+  setup(t) {
+    const e = ["running", "success", "failed", "cancelled"], n = t, s = v(() => {
+      var r, m;
+      return (m = (r = n.message) == null ? void 0 : r.tool_calls) == null ? void 0 : m[n.toolIndex];
+    }), a = v(() => {
+      var m, h, I;
+      const r = (m = s.value) == null ? void 0 : m.id;
+      return r ? (I = (h = n.message.state) == null ? void 0 : h.toolCall) == null ? void 0 : I[r] : null;
+    }), u = ce(), o = v(() => {
+      var m;
+      const r = (m = a.value) == null ? void 0 : m.status;
+      return r && e.includes(r) ? r : u.toolCallDefaultStatus && e.includes(u.toolCallDefaultStatus) ? u.toolCallDefaultStatus : "";
+    }), d = /* @__PURE__ */ new Map([
+      ["running", { text: "正在调用", icon: pe }],
+      ["success", { text: "已调用", icon: ue }],
+      ["failed", { text: "调用失败", icon: Ge }],
+      ["cancelled", { text: "已取消", icon: Ke }]
+    ]), b = v(() => d.get(o.value) || { text: "", icon: ue }), y = Oe(), p = (r, m = 2) => {
+      if (!r)
+        return "";
+      let h = "";
+      try {
+        typeof r == "string" ? h = JSON.stringify(JSON.parse(r), null, m) : h = JSON.stringify(r, null, m);
+      } catch {
+      }
+      return h = h.replace(
+        /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g,
+        (I) => {
+          let F = "number";
+          return /^"/.test(I) ? F = /:$/.test(I) ? "key" : "string" : /true|false/.test(I) ? F = "boolean" : /null/.test(I) && (F = "null"), `<span class="${y[F]}">${I}</span>`;
+        }
+      ), h;
+    }, _ = M(""), c = v(() => {
+      var m, h;
+      const r = (m = s.value) == null ? void 0 : m.id;
+      if (r)
+        return (h = u.toolCallResults) == null ? void 0 : h[r];
+    });
+    W(() => {
+      var h;
+      const r = (h = s.value) == null ? void 0 : h.function.arguments, m = c.value;
+      rt().then(({ jsonrepair: I }) => {
+        const F = I(typeof r == "string" ? r || "{}" : JSON.stringify(r));
+        _.value = p(
+          {
+            arguments: JSON.parse(F),
+            result: m ? JSON.parse(I(m || "{}")) : void 0
+          },
+          2
+        );
+      }).catch((I) => {
+        console.warn(I);
+      });
+    });
+    const i = M(!1);
+    W(() => {
+      var r;
+      i.value = !!(((r = a.value) == null ? void 0 : r.open) ?? u.toolCallDefaultOpen);
+    });
+    const g = we(), l = () => {
+      var m, h;
+      i.value = !i.value;
+      const r = (m = s.value) == null ? void 0 : m.id;
+      r && g("toolCall", {
+        ...(h = n.message.state) == null ? void 0 : h.toolCall,
+        [r]: { ...a.value, open: i.value }
+      });
+    };
+    return (r, m) => {
+      var h;
+      return f(), B("div", lt, [
+        x("div", ct, [
+          x("div", ut, [
+            (f(), k(U(b.value.icon), {
+              class: Y(["header-icon", `icon-${o.value}`])
+            }, null, 8, ["class"])),
+            x("span", null, [
+              x("span", null, V(b.value.text) + " ", 1),
+              x("span", it, V(((h = s.value) == null ? void 0 : h.function.name) || "Untitled"), 1)
+            ])
+          ]),
+          x("div", dt, [
+            z(E(_e), {
+              class: Y(["expand-icon", { "-rotate-90": !i.value }]),
+              onClick: l
+            }, null, 8, ["class"])
+          ])
+        ]),
+        q(x("div", ft, null, 512), [
+          [Z, i.value]
+        ]),
+        q(x("div", {
+          class: "detail",
+          innerHTML: _.value
+        }, null, 8, mt), [
+          [Z, i.value]
+        ])
+      ]);
+    };
+  }
+}), _t = "_key_1b448_2", bt = "_number_1b448_6", gt = "_string_1b448_10", ht = "_boolean_1b448_14", vt = {
+  key: _t,
+  number: bt,
+  string: gt,
+  boolean: ht,
+  null: "_null_1b448_18"
+}, yt = {
+  $style: vt
+}, Se = /* @__PURE__ */ T(pt, [["__cssModules", yt], ["__scopeId", "data-v-545ab64d"]]), $e = /* @__PURE__ */ C({
+  __name: "Tools",
+  props: {
+    message: {},
+    contentIndex: {}
+  },
+  setup(t) {
+    const e = t, { restMessage: n, restProps: s } = Ne(e, ["tool_calls"]), a = ae(n, e.contentIndex);
+    return (u, o) => (f(), B(N, null, [
+      (f(), k(U(E(a)), O(P(E(s))), null, 16)),
+      (f(!0), B(N, null, J(e.message.tool_calls, (d, b) => (f(), k(Se, D({
+        key: d.id
+      }, { ref_for: !0 }, e, { "tool-index": b }), null, 16, ["tool-index"]))), 128))
+    ], 64));
+  }
+}), Ae = [
+  {
+    find: (t, e) => t.length === 1 && Array.isArray(t[0].content) && typeof e == "number" && t[0].content[e].type === "image_url",
+    renderer: w(oe),
+    priority: G.NORMAL,
+    attributes: { "data-box-type": "image" }
+  }
+], Me = [
+  {
+    find: (t) => !!t.loading,
+    renderer: w(ke),
+    priority: G.LOADING
+  },
+  {
+    find: (t) => typeof t.reasoning_content == "string",
+    renderer: w(Ie),
+    priority: G.NORMAL
+  },
+  {
+    find: (t) => Array.isArray(t.tool_calls) && t.tool_calls.length > 0,
+    renderer: w($e),
+    priority: G.NORMAL
+  },
+  {
+    find: (t, e) => Array.isArray(t.content) && typeof e == "number" && t.content[e].type === "image_url",
+    renderer: w(Ce),
+    priority: G.CONTENT
+  },
+  {
+    find: (t) => t.role === "tool",
+    renderer: w(Ee),
+    priority: G.ROLE
+  }
+], Le = w(oe), Te = w(re);
+function xt(t) {
+  const { boxRendererMatches: e, fallbackBoxRenderer: n } = t;
+  e && L(ge, e), n && L(he, n);
 }
-function he() {
-  $ == null || $(), $ = void 0;
+function Bt(t) {
+  const { fallbackBoxRenderer: e } = t;
+  e && L(ve, e);
 }
-function Ce() {
-  return typeof window > "u" ? {
-    isTouchDevice: D
-  } : (ne(() => {
-    b++, b === 1 && ($ = _e());
-  }), oe(() => {
-    b = Math.max(0, b - 1), b === 0 && he();
-  }), {
-    isTouchDevice: D
+function Rt(t, e) {
+  const n = A(ge, Ae), s = A(he, void 0), a = A(ve, void 0);
+  return v(() => {
+    const u = S(t), o = S(n).find((d) => d.find(u, e));
+    return o ? {
+      renderer: o.renderer,
+      attributes: o.attributes
+    } : {
+      renderer: S(a) || S(s) || Le
+    };
   });
 }
-const ke = { class: "tr-history__empty" }, Le = { class: "tr-history__empty-icon" }, Ee = { class: "tr-history__empty-text" }, we = /* @__PURE__ */ P({
-  __name: "Empty",
+function Ct(t) {
+  const { contentRendererMatches: e, fallbackContentRenderer: n } = t;
+  e && L(ye, e), n && L(xe, n);
+}
+function kt(t) {
+  const { fallbackContentRenderer: e } = t;
+  e && L(Be, e);
+}
+function ae(t, e) {
+  const n = A(ye, Me), s = A(xe, void 0), a = A(Be, void 0);
+  return v(() => {
+    const u = S(t), o = S(n).find((d) => d.find(u, e));
+    return o ? o.renderer : S(a) || S(s) || Te;
+  });
+}
+function It(t) {
+  L(Re, t);
+}
+function we() {
+  return A(Re, (t, e) => {
+    console.warn(`[Bubble] State change function not found for key: ${t}`);
+  });
+}
+function le(t) {
+  const e = A(ne, void 0);
+  if (e)
+    return e;
+  const n = De(t || {});
+  return L(ne, n), n;
+}
+function ce() {
+  return A(ne, {});
+}
+function Et(t) {
+  L(be, t);
+}
+function St() {
+  return A(be, void 0);
+}
+function Ne(t, e) {
+  const n = v(() => {
+    const a = Object.entries(t.message).filter(([u]) => !e.includes(u));
+    return Object.fromEntries(a);
+  }), s = v(() => ({
+    ...t,
+    message: n.value
+  }));
+  return {
+    restMessage: n,
+    restProps: s
+  };
+}
+const ie = /* @__PURE__ */ C({
+  __name: "BubbleBoxWrapper",
   props: {
-    text: { default: "暂无内容" }
+    role: {},
+    placement: {},
+    shape: {},
+    messages: {},
+    contentIndex: {}
   },
-  setup(s) {
-    const m = s;
-    return (t, c) => (r(), u("div", ke, [
-      w("span", Le, [
-        T(n(ae))
+  setup(t) {
+    const e = t, n = Rt(() => e.messages, e.contentIndex);
+    return (s, a) => (f(), k(U(E(n).renderer), D({
+      "data-role": e.role,
+      "data-placement": e.placement,
+      "data-shape": e.shape
+    }, E(n).attributes), {
+      default: $(() => [
+        R(s.$slots, "default")
       ]),
-      w("span", Ee, B(m.text), 1)
-    ]));
+      _: 3
+    }, 16, ["data-role", "data-placement", "data-shape"]));
   }
-}), Re = /* @__PURE__ */ z(we, [["__scopeId", "data-v-d0340c39"]]), Ie = ["onClick"], Q = 4, xe = /* @__PURE__ */ P({
-  __name: "MenuList",
-  props: /* @__PURE__ */ W({
-    items: {},
-    menuListGap: { default: 8 }
-  }, {
-    trigger: { default: null },
-    triggerModifiers: {},
-    data: { default: null },
-    dataModifiers: {}
-  }),
-  emits: /* @__PURE__ */ W(["item-click"], ["update:trigger", "update:data"]),
-  setup(s, { emit: m }) {
-    const t = j(s, "trigger"), c = j(s, "data"), h = s, C = m, E = _(null);
-    Z(
-      E,
-      () => {
-        t.value = null, c.value = null;
-      },
-      {
-        ignore: [t]
-      }
-    );
-    const { top: p, bottom: x, left: y } = ve(t), { width: M, height: k } = ge(E, void 0, { box: "border-box" }), { height: R } = ye(), o = I(() => {
-      const L = {
-        left: `min(${O(y.value)}, calc(100% - ${O(M.value + Q)}))`
-      }, g = x.value + h.menuListGap;
-      return g + k.value + Q > R.value ? L.bottom = `calc(100% - ${O(p.value - h.menuListGap)})` : L.top = O(g), L;
-    }), v = (L) => {
-      C("item-click", L), t.value = null, c.value = null;
-    };
-    return (L, g) => (r(), u("ul", {
-      class: "tr-history__menu-list",
-      ref_key: "menuRef",
-      ref: E,
-      style: ie(o.value)
-    }, [
-      (r(!0), u(S, null, V(h.items, (a) => (r(), u("li", {
-        class: "tr-history__menu-list__item",
-        key: a.id,
-        onClick: (K) => v(a)
-      }, [
-        (r(), H(Y(a.icon))),
-        w("span", null, B(a.text), 1)
-      ], 8, Ie))), 128))
-    ], 4));
+}), te = /* @__PURE__ */ C({
+  __name: "BubbleContentWrapper",
+  props: {
+    message: {},
+    contentIndex: {}
+  },
+  emits: ["state-change"],
+  setup(t, { emit: e }) {
+    const n = t, s = ae(() => n.message, n.contentIndex), a = e;
+    return It((o, d) => {
+      a("state-change", {
+        key: o,
+        value: d,
+        contentIndex: n.contentIndex
+      });
+    }), (o, d) => (f(), k(U(E(s)), O(P(n)), null, 16));
   }
-}), Me = /* @__PURE__ */ z(xe, [["__scopeId", "data-v-89fdb41c"]]), be = ({
-  renameControlOnClickOutside: s,
-  onItemTitleChange: m
-}) => {
-  const t = _(void 0), c = _(null), h = I(() => {
-    var o;
-    return (o = c.value) == null ? void 0 : o.at(0);
-  }), C = _(null), E = I(() => {
-    var o;
-    return (o = C.value) == null ? void 0 : o.at(0);
-  }), p = _(null), x = I(() => {
-    var o;
-    return (o = p.value) == null ? void 0 : o.at(0);
-  }), y = _(""), M = (o) => {
-    t.value = o, y.value = o.title, se(() => {
-      const v = h.value;
-      v && (v.focus(), v.select());
+}), $t = ["data-role", "data-placement"], At = { class: "tr-bubble__body" }, Mt = { class: "tr-bubble__content" }, Lt = { class: "tr-bubble__after" }, Tt = /* @__PURE__ */ C({
+  __name: "Bubble",
+  props: {
+    content: {},
+    reasoning_content: {},
+    tool_calls: {},
+    tool_call_id: {},
+    name: {},
+    role: {},
+    id: {},
+    loading: { type: Boolean },
+    state: {},
+    hidden: { type: Boolean },
+    avatar: {},
+    placement: { default: "start" },
+    shape: { default: "corner" },
+    contentRenderMode: { default: "single" },
+    fallbackBoxRenderer: {},
+    fallbackContentRenderer: {}
+  },
+  emits: ["state-change"],
+  setup(t, { emit: e }) {
+    const n = t, s = e;
+    le();
+    const a = St(), u = v(() => S(a)), o = v(() => {
+      var h;
+      if ((h = u.value) != null && h.messages.length)
+        return u.value.messages;
+      const { role: y, content: p, reasoning_content: _, tool_calls: c, tool_call_id: i, name: g, id: l, loading: r, state: m } = n;
+      return [{ role: y, content: p, reasoning_content: _, tool_calls: c, tool_call_id: i, name: g, id: l, loading: r, state: m }];
     });
-  }, k = () => {
-    t.value = void 0, y.value = "";
-  }, R = () => {
-    t.value && m(y.value, t.value), t.value = void 0, y.value = "";
+    Bt({ fallbackBoxRenderer: () => n.fallbackBoxRenderer }), kt({ fallbackContentRenderer: () => n.fallbackContentRenderer });
+    const d = v(() => o.value.length === 0 ? !0 : n.hidden), b = v(() => n.contentRenderMode === "split" && o.value.length === 1 && Array.isArray(o.value[0].content));
+    return (y, p) => q((f(), B("div", {
+      class: "tr-bubble",
+      "data-role": n.role,
+      "data-placement": n.placement
+    }, [
+      R(y.$slots, "prefix", {
+        messages: o.value,
+        role: t.role
+      }, void 0, !0),
+      x("div", At, [
+        n.avatar ? (f(), k(U(n.avatar), {
+          key: 0,
+          class: Y(["tr-bubble__avatar", y.$style["tr-bubble__avatar"]])
+        }, null, 8, ["class"])) : se("", !0),
+        x("div", Mt, [
+          b.value ? (f(!0), B(N, { key: 0 }, J(o.value[0].content, (_, c) => (f(), k(ie, {
+            key: c,
+            class: "tr-bubble__box",
+            role: n.role,
+            placement: n.placement,
+            shape: n.shape,
+            messages: o.value,
+            "content-index": c
+          }, {
+            default: $(() => [
+              z(te, {
+                message: o.value[0],
+                "content-index": c,
+                onStateChange: p[0] || (p[0] = (i) => s("state-change", { ...i, messageIndex: 0 }))
+              }, null, 8, ["message", "content-index"]),
+              R(y.$slots, "content-footer", {
+                messages: o.value,
+                role: n.role,
+                contentIndex: c
+              }, void 0, !0)
+            ]),
+            _: 2
+          }, 1032, ["role", "placement", "shape", "messages", "content-index"]))), 128)) : (f(), k(ie, {
+            key: 1,
+            role: n.role,
+            placement: n.placement,
+            shape: n.shape,
+            messages: o.value
+          }, {
+            default: $(() => [
+              (f(!0), B(N, null, J(o.value, (_, c) => (f(), B(N, {
+                key: `message-${c}`
+              }, [
+                Array.isArray(_.content) ? (f(!0), B(N, { key: 0 }, J(_.content, (i, g) => (f(), k(te, {
+                  key: `content-${g}`,
+                  message: _,
+                  "content-index": g,
+                  onStateChange: (l) => s("state-change", { ...l, messageIndex: c })
+                }, null, 8, ["message", "content-index", "onStateChange"]))), 128)) : (f(), k(te, {
+                  key: 1,
+                  message: _,
+                  onStateChange: (i) => s("state-change", { ...i, messageIndex: c })
+                }, null, 8, ["message", "onStateChange"]))
+              ], 64))), 128)),
+              R(y.$slots, "content-footer", {
+                messages: o.value,
+                role: n.role
+              }, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["role", "placement", "shape", "messages"]))
+        ]),
+        x("div", Lt, [
+          R(y.$slots, "after", {
+            messages: o.value,
+            role: t.role
+          }, void 0, !0)
+        ])
+      ]),
+      R(y.$slots, "suffix", {
+        messages: o.value,
+        role: t.role
+      }, void 0, !0)
+    ], 8, $t)), [
+      [Z, !d.value]
+    ]);
+  }
+}), wt = {
+  "tr-bubble__avatar": "_tr-bubble__avatar_1r87c_2"
+}, Nt = {
+  $style: wt
+}, K = /* @__PURE__ */ T(Tt, [["__cssModules", Nt], ["__scopeId", "data-v-576e318d"]]);
+function de(t, e) {
+  const n = Q(t, (s, a) => {
+    a === !0 && s === !1 && (e(), n());
+  });
+  return n;
+}
+function Ot(t, e, n) {
+  const { scrollOnMount: s = !0, bottomThreshold: a = 20, scrollThrottle: u = 0 } = n ?? {}, o = M(!0);
+  let d = !1;
+  const b = /* @__PURE__ */ new Set(), y = () => He(t), { y: p, isScrolling: _ } = Ue(y, { throttle: u }), c = (l) => l.scrollHeight - l.scrollTop - l.clientHeight <= a, i = async (l = "auto") => {
+    const r = S(y);
+    if (r && (await me(), r.scrollTo({ top: r.scrollHeight, behavior: l }), l === "smooth" && !c(r))) {
+      const m = de(_, () => {
+        r.scrollTo({ top: r.scrollHeight, behavior: "auto" }), b.delete(m);
+      });
+      b.add(m);
+    }
+  }, g = () => {
+    d || !o.value || (d = !0, requestAnimationFrame(async () => {
+      d = !1, await i("auto");
+    }));
   };
-  return (s === "confirm" || s === "cancel") && Z(
-    h,
+  return Q(
+    p,
     () => {
-      s === "confirm" ? R() : k();
+      const l = S(y);
+      l && (o.value = c(l));
     },
-    { ignore: [E, x] }
-  ), {
-    editingItem: t,
-    editorRefList: c,
-    editorConfirmRefList: C,
-    editorCancelRefList: p,
-    editorValue: y,
-    handleEdit: M,
-    handleEditCancel: k,
-    handleEditConfirm: R
+    { flush: "post" }
+  ), Je(
+    e,
+    () => {
+      g();
+    },
+    { flush: "post", throttle: 100 }
+  ), fe(() => {
+    s && i("smooth");
+  }), Pe(() => {
+    b.forEach((l) => {
+      l();
+    }), b.clear();
+  }), Ye("keydown", (l) => {
+    if (l.key === "End" && !o.value) {
+      const r = de(_, () => {
+        i("auto"), b.delete(r);
+      });
+      b.add(r);
+    }
+  }), {
+    scrollToBottom: i
   };
-}, X = Symbol("NO_GROUP"), Te = {
-  key: 0,
-  class: "tr-history__group-title"
-}, $e = { class: "tr-history__group-items" }, Ge = ["onClick"], Oe = ["title"], Se = ["onClick"], Be = /* @__PURE__ */ P({
-  __name: "index",
+}
+const Dt = /* @__PURE__ */ C({
+  __name: "BubbleItem",
   props: {
-    data: {},
-    selected: {},
-    showRenameControls: { type: Boolean, default: !1 },
-    renameControlOnClickOutside: { default: "confirm" },
-    menuItems: { default: () => [
-      { id: "rename", text: "重命名", icon: ce },
-      { id: "delete", text: "删除", icon: de }
-    ] },
-    menuListGap: { default: 8 }
+    messageGroup: {},
+    roleConfig: {},
+    contentRenderMode: {}
   },
-  emits: ["item-click", "item-title-change", "item-action"],
-  setup(s, { emit: m }) {
-    const t = s, c = m, h = (i) => {
-      var f;
-      const e = typeof ((f = i[0]) == null ? void 0 : f.group);
-      return e === "string" || e === "symbol";
-    }, C = I(() => {
-      const i = t.data;
-      return h(i) ? i : [{ group: X, items: i }];
-    }), E = I(() => C.value.length === 0 || C.value.every((i) => i.items.length === 0)), {
-      editingItem: p,
-      editorRefList: x,
-      editorConfirmRefList: y,
-      editorCancelRefList: M,
-      editorValue: k,
-      handleEdit: R,
-      handleEditCancel: o,
-      handleEditConfirm: v
-    } = be({
-      renameControlOnClickOutside: t.renameControlOnClickOutside,
-      onItemTitleChange: (i, e) => {
-        c("item-title-change", i, e);
-      }
-    }), { isTouchDevice: L } = Ce(), g = _(null), a = _(null), K = (i, e) => {
-      if (i.currentTarget instanceof HTMLButtonElement) {
-        if (a.value === e) {
-          g.value = null, a.value = null;
-          return;
-        }
-        g.value = i.currentTarget, a.value = e;
-      } else
-        g.value = null, a.value = null;
-    }, ee = (i) => {
-      const e = a.value;
-      e && (i.id === "rename" && R(e), c("item-action", i, e));
+  emits: ["state-change"],
+  setup(t, { emit: e }) {
+    const n = t, s = e;
+    return Et(() => n.messageGroup), (a, u) => (f(), k(K, D(t.roleConfig, {
+      role: t.messageGroup.role,
+      "content-render-mode": t.contentRenderMode,
+      onStateChange: u[0] || (u[0] = (o) => s("state-change", o))
+    }), {
+      prefix: $((o) => [
+        R(a.$slots, "prefix", O(P(o)))
+      ]),
+      suffix: $((o) => [
+        R(a.$slots, "suffix", O(P(o)))
+      ]),
+      "content-footer": $((o) => [
+        R(a.$slots, "content-footer", O(P(o)))
+      ]),
+      after: $((o) => [
+        R(a.$slots, "after", O(P(o)))
+      ]),
+      _: 3
+    }, 16, ["role", "content-render-mode"]));
+  }
+}), Pt = /* @__PURE__ */ C({
+  __name: "BubbleList",
+  props: {
+    messages: {},
+    groupStrategy: { type: [String, Function], default: "divider" },
+    dividerRole: { default: "user" },
+    fallbackRole: { default: "assistant" },
+    roleConfigs: {},
+    contentRenderMode: {},
+    autoScroll: { type: Boolean }
+  },
+  emits: ["state-change"],
+  setup(t, { expose: e, emit: n }) {
+    const s = t, a = n;
+    le();
+    const u = M(null);
+    let o = async () => {
     };
-    return (i, e) => (r(), u("div", {
-      class: U(["tr-history", { "touch-device": n(L) }])
+    if (s.autoScroll) {
+      const p = v(() => s.messages.at(-1)), { scrollToBottom: _ } = Ot(u, () => {
+        var c, i;
+        return [
+          s.messages.length,
+          (c = p.value) == null ? void 0 : c.content,
+          (i = p.value) == null ? void 0 : i.reasoning_content
+        ];
+      });
+      o = _, Q(
+        () => {
+          var c;
+          return (c = p.value) == null ? void 0 : c.role;
+        },
+        async (c) => {
+          c === "user" && (await me(), _("smooth"));
+        }
+      );
+    }
+    const d = (p) => {
+      const _ = [];
+      let c = !1;
+      for (const [i, g] of p.entries()) {
+        const l = _[_.length - 1];
+        Array.isArray(g.content) ? (_.push({
+          role: g.role || "",
+          messages: [g],
+          messageIndexes: [i],
+          startIndex: i
+        }), c = !0) : l && l.role === g.role && !c ? (l.messages.push(g), l.messageIndexes.push(i)) : (_.push({
+          role: g.role || "",
+          messages: [g],
+          messageIndexes: [i],
+          startIndex: i
+        }), c = !1);
+      }
+      return _;
+    }, b = (p, _) => {
+      const c = [];
+      let i = !1;
+      for (const [g, l] of p.entries()) {
+        const r = c[c.length - 1], m = l.role === _;
+        Array.isArray(l.content) ? (c.push({
+          role: l.role || "",
+          messages: [l],
+          messageIndexes: [g],
+          startIndex: g
+        }), i = !0) : r && r.role === _ === m && !i ? (r.messages.push(l), r.messageIndexes.push(g)) : (c.push({
+          role: m ? _ : l.role || "",
+          messages: [l],
+          messageIndexes: [g],
+          startIndex: g
+        }), i = !1);
+      }
+      return c;
+    }, y = v(() => s.messages.length === 0 ? [] : typeof s.groupStrategy == "function" ? s.groupStrategy(s.messages, s.dividerRole) : s.groupStrategy === "consecutive" ? d(s.messages) : b(s.messages, s.dividerRole));
+    return e({
+      scrollToBottom: o
+    }), (p, _) => (f(), B("div", {
+      class: "tr-bubble-list",
+      ref_key: "listRef",
+      ref: u
     }, [
-      E.value ? (r(), H(Re, { key: 1 })) : (r(), u(S, { key: 0 }, [
-        (r(!0), u(S, null, V(C.value, (f) => (r(), u("div", {
-          class: "tr-history__group",
-          key: f.group
-        }, [
-          f.group !== n(X) ? (r(), u("div", Te, B(f.group), 1)) : G("", !0),
-          w("div", $e, [
-            (r(!0), u(S, null, V(f.items, (l, te) => (r(), u("div", {
-              class: U(["tr-history__item", {
-                selected: l.id && l.id === t.selected,
-                editing: n(p) === l,
-                active: a.value === l
-              }]),
-              key: l.id || te,
-              onClick: (d) => c("item-click", l)
-            }, [
-              A(i.$slots, "item-prefix", { item: l }, void 0, !0),
-              l.icon ? (r(), H(Y(l.icon), { key: 0 })) : G("", !0),
-              n(p) === l ? q((r(), u("input", {
-                key: 1,
-                class: "tr-history__item-editor",
-                type: "text",
-                onClick: e[0] || (e[0] = J(() => {
-                }, ["stop"])),
-                ref_for: !0,
-                ref_key: "editorRefList",
-                ref: x,
-                "onUpdate:modelValue": e[1] || (e[1] = (d) => le(k) ? k.value = d : null),
-                onKeydown: [
-                  e[2] || (e[2] = F(
-                    //@ts-ignore
-                    (...d) => n(v) && n(v)(...d),
-                    ["enter"]
-                  )),
-                  e[3] || (e[3] = F(
-                    //@ts-ignore
-                    (...d) => n(o) && n(o)(...d),
-                    ["escape"]
-                  ))
-                ]
-              }, null, 544)), [
-                [re, n(k)]
-              ]) : A(i.$slots, "item-title", {
-                key: 2,
-                item: l
-              }, () => [
-                w("span", {
-                  class: "text",
-                  title: l.title
-                }, B(l.title), 9, Oe)
-              ], !0),
-              w("span", {
-                class: "tr-history__item-actions",
-                onClick: e[6] || (e[6] = J(() => {
-                }, ["stop"]))
-              }, [
-                t.showRenameControls && n(p) === l ? (r(), u("button", {
-                  key: 0,
-                  class: "editor-confirm",
-                  ref_for: !0,
-                  ref_key: "editorConfirmRefList",
-                  ref: y,
-                  onClick: e[4] || (e[4] = //@ts-ignore
-                  (...d) => n(v) && n(v)(...d))
-                }, [
-                  T(n(me))
-                ], 512)) : G("", !0),
-                t.showRenameControls && n(p) === l ? (r(), u("button", {
-                  key: 1,
-                  class: "editor-cancel",
-                  ref_for: !0,
-                  ref_key: "editorCancelRefList",
-                  ref: M,
-                  onClick: e[5] || (e[5] = //@ts-ignore
-                  (...d) => n(o) && n(o)(...d))
-                }, [
-                  T(n(fe))
-                ], 512)) : G("", !0),
-                w("button", {
-                  class: U(["menu", { hidden: n(p) === l }]),
-                  onClick: (d) => K(d, l)
-                }, [
-                  T(n(pe))
-                ], 10, Se)
-              ])
-            ], 10, Ge))), 128))
-          ])
-        ]))), 128)),
-        q(T(Me, {
-          trigger: g.value,
-          "onUpdate:trigger": e[7] || (e[7] = (f) => g.value = f),
-          data: a.value,
-          "onUpdate:data": e[8] || (e[8] = (f) => a.value = f),
-          items: t.menuItems,
-          "menu-list-gap": t.menuListGap,
-          onItemClick: ee
-        }, null, 8, ["trigger", "data", "items", "menu-list-gap"]), [
-          [ue, g.value]
-        ])
-      ], 64))
-    ], 2));
+      (f(!0), B(N, null, J(y.value, (c, i) => {
+        var g;
+        return f(), k(Dt, {
+          key: i,
+          role: c.role || s.fallbackRole,
+          "role-config": (g = s.roleConfigs) == null ? void 0 : g[c.role || s.fallbackRole],
+          "message-group": c,
+          "content-render-mode": s.contentRenderMode,
+          onStateChange: (l) => a("state-change", { ...l, messageIndex: c.startIndex + l.messageIndex })
+        }, {
+          prefix: $((l) => [
+            R(p.$slots, "prefix", D({ ref_for: !0 }, l, {
+              messageIndexes: c.messageIndexes
+            }), void 0, !0)
+          ]),
+          suffix: $((l) => [
+            R(p.$slots, "suffix", D({ ref_for: !0 }, l, {
+              messageIndexes: c.messageIndexes
+            }), void 0, !0)
+          ]),
+          "content-footer": $((l) => [
+            R(p.$slots, "content-footer", D({ ref_for: !0 }, l, {
+              messageIndexes: c.messageIndexes
+            }), void 0, !0)
+          ]),
+          after: $((l) => [
+            R(p.$slots, "after", D({ ref_for: !0 }, l, {
+              messageIndexes: c.messageIndexes
+            }), void 0, !0)
+          ]),
+          _: 2
+        }, 1032, ["role", "role-config", "message-group", "content-render-mode", "onStateChange"]);
+      }), 128))
+    ], 512));
+  }
+}), X = /* @__PURE__ */ T(Pt, [["__scopeId", "data-v-12e98779"]]), j = /* @__PURE__ */ C({
+  __name: "BubbleProvider",
+  props: {
+    boxRendererMatches: {},
+    contentRendererMatches: {},
+    fallbackBoxRenderer: { type: [Object, Function] },
+    fallbackContentRenderer: { type: [Object, Function] },
+    initialStore: {}
+  },
+  setup(t) {
+    const e = t;
+    le(e.initialStore);
+    const n = v(() => (e.boxRendererMatches || []).concat(Ae).sort((o, d) => (o.priority ?? 0) - (d.priority ?? 0))), s = v(() => (e.contentRendererMatches || []).concat(Me).sort((o, d) => (o.priority ?? 0) - (d.priority ?? 0))), a = v(() => e.fallbackBoxRenderer || Le), u = v(() => e.fallbackContentRenderer || Te);
+    return xt({ boxRendererMatches: n, fallbackBoxRenderer: a }), Ct({ contentRendererMatches: s, fallbackContentRenderer: u }), (o, d) => R(o.$slots, "default");
+  }
+}), Ft = ["innerHTML"], Gt = /* @__PURE__ */ C({
+  __name: "Markdown",
+  props: {
+    message: {},
+    contentIndex: {}
+  },
+  setup(t) {
+    const e = t, n = v(() => {
+      var d, b;
+      return typeof e.message.content == "string" ? e.message.content : (b = (d = e.message.content) == null ? void 0 : d.at(e.contentIndex ?? 0)) == null ? void 0 : b.text;
+    }), s = M(null);
+    fe(async () => {
+      s.value = await at();
+    });
+    const { mdConfig: a, dompurifyConfig: u } = ce(), o = M("");
+    return W(() => {
+      if (s.value) {
+        const { markdown: d, dompurify: b } = s.value;
+        o.value = d(a || {}).render(String(n.value)), b.sanitize(o.value, u);
+      }
+    }), (d, b) => o.value ? (f(), B("div", {
+      key: 0,
+      class: "tr-bubble__markdown markdown-body",
+      "data-type": "markdown",
+      innerHTML: o.value
+    }, null, 8, Ft)) : (f(), k(re, O(D({ key: 1 }, e)), null, 16));
   }
-}), N = /* @__PURE__ */ z(Be, [["__scopeId", "data-v-97a7e8a2"]]), De = function(s) {
-  s.component(N.name, N);
+}), Kt = /* @__PURE__ */ T(Gt, [["__scopeId", "data-v-e88c202a"]]), Xt = {
+  Box: oe,
+  Image: Ce,
+  Loading: ke,
+  Markdown: Kt,
+  Reasoning: Ie,
+  Text: re,
+  Tool: Se,
+  ToolRole: Ee,
+  Tools: $e
 };
-Object.assign(N, {
-  name: "TrHistory",
-  install: De
-});
+K.name = "TrBubble";
+const Ut = function(t) {
+  t.component(K.name, K);
+};
+K.install = Ut;
+const jt = K;
+X.name = "TrBubbleList";
+const Ht = function(t) {
+  t.component(X.name, X);
+};
+X.install = Ht;
+const qt = X;
+j.name = "TrBubbleProvider";
+const Jt = function(t) {
+  t.component(j.name, j);
+};
+j.install = Jt;
+const Zt = j;
 export {
-  N as H,
-  Ce as u
+  jt as B,
+  qt as a,
+  Zt as b,
+  G as c,
+  Xt as d,
+  ae as e,
+  we as f,
+  Ne as g,
+  Ot as h,
+  Rt as u
 };