@huyooo/ai-chat-frontend-vue 0.2.12 → 0.2.14

package/README.md

@@ -41,6 +41,7 @@ const adapter = createElectronAdapter()
   :models="modelList"
   :hide-header="false"
   :welcome-config="welcomeConfig"
+  :part-renderers="partRenderers"
   @close="handleClose"
 />
 ```
@@ -57,8 +58,7 @@ const adapter = createElectronAdapter()
 | `hideHeader` | `boolean` | `false` | 是否隐藏标题栏 |
 | `welcomeConfig` | `Partial<WelcomeConfig>` | - | 欢迎页配置 |
 | `stepsExpandedType` | `'open' \| 'close' \| 'auto'` | `'auto'` | 执行步骤展开模式 |
-| `toolRenderers` | `Record<string, Component>` | `{}` | 自定义工具结果渲染器 |
-| `blockRenderers` | `Record<string, Component>` | `{}` | 自定义内容块渲染器 |
+| `partRenderers` | `Record<string, Component>` | `{}` | 自定义 Part 类型渲染器 |
 | `autoRunConfig` | `AutoRunConfig` | - | 自动运行配置 |
 | `onClose` | `() => void` | - | 关闭回调 |
 | `onToolComplete` | `(event: ToolCompleteEvent) => void` | - | 工具执行完成回调 |
@@ -201,15 +201,34 @@ const welcomeConfig = {
 }
 ```
 
-## 自定义工具结果渲染器
+## 自定义 Part 渲染器（新架构）
 
-可以为特定工具注入自定义渲染组件，替代默认的 JSON 显示：
+新架构使用 `partRenderers` 为特定的 Part 类型注入自定义渲染组件。工具执行结果会直接生成对应类型的 Part（如 `weather`），前端根据 `part.type` 选择渲染组件。
+
+### 工作原理
+
+```
+工具执行完成
+    ↓
+后端发送 tool_call_result { id, name, result, resultType: 'weather' }
+    ↓
+前端 useChat 处理：
+  1. 更新 tool_call 状态为 done
+  2. 根据 resultType 创建 { type: 'weather', ...result } Part
+    ↓
+PartsRenderer 渲染：
+  - 检查 partRenderers['weather']
+  - 找到 → 使用自定义 WeatherCard 渲染
+  - 没找到 → 显示 JSON fallback
+```
+
+### 使用示例
 
 ```vue
 <template>
   <ChatPanel
     :adapter="adapter"
-    :tool-renderers="toolRenderers"
+    :part-renderers="partRenderers"
   />
 </template>
 
@@ -218,96 +237,76 @@ import { markRaw, type Component } from 'vue'
 import { ChatPanel } from '@huyooo/ai-chat-frontend-vue'
 import CustomWeatherCard from './components/CustomWeatherCard.vue'
 
-// 工具名称 -> 渲染组件映射
-const toolRenderers: Record<string, Component> = {
-  get_weather: markRaw(CustomWeatherCard),
-  // search_web: markRaw(CustomSearchResults),
+// Part 类型 -> 渲染组件映射
+const partRenderers: Record<string, Component> = {
+  weather: markRaw(CustomWeatherCard),  // weather 类型使用自定义卡片
+  // stock: markRaw(CustomStockCard),
 }
 </script>
 ```
 
 ### 创建自定义渲染组件
 
+自定义组件直接接收 Part 的所有字段作为 props：
+
 ```vue
 <!-- CustomWeatherCard.vue -->
 <template>
   <div class="weather-card">
-    <div class="city">{{ weather.city }}</div>
-    <div class="temp">{{ weather.temperature }}°C</div>
-    <div class="condition">{{ weather.condition }}</div>
+    <div class="city">{{ city }}</div>
+    <div class="temp">{{ temperature }}°C</div>
+    <div class="condition">{{ condition }}</div>
     <div class="details">
-      <span>湿度 {{ weather.humidity }}%</span>
-      <span>{{ weather.wind }}</span>
+      <span v-if="humidity">湿度 {{ humidity }}%</span>
+      <span v-if="wind">{{ wind }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { ToolRendererProps, WeatherData } from '@huyooo/ai-chat-shared'
-
-const props = defineProps<ToolRendererProps>()
-
-const weather = computed<WeatherData>(() => {
-  if (typeof props.toolResult === 'object' && props.toolResult !== null) {
-    return props.toolResult as WeatherData
-  }
-  return { city: '未知', temperature: 0, condition: '未知' }
-})
-</script>
-```
-
-### ToolRendererProps 接口
-
-```typescript
-interface ToolRendererProps {
-  toolName: string      // 工具名称
-  toolArgs: object      // 工具调用参数
-  toolResult: unknown   // 工具返回结果
-  status: 'running' | 'done' | 'error'  // 执行状态
-}
-```
-
-### 内置数据类型
-
-```typescript
-// 天气数据
-interface WeatherData {
+// Props 直接是 WeatherPart 的字段
+defineProps<{
+  type: 'weather'    // Part 类型
   city: string
   temperature: number
   condition: string
   humidity?: number
   wind?: string
-}
-
-// 搜索结果
-interface SearchResultItem {
-  title: string
-  url: string
-  snippet: string
-}
+  reportTime?: string
+  province?: string
+}>()
+</script>
 ```
 
-## 自定义内容块渲染器
+### 内置 Part 类型
 
-可以为特定内容类型注入自定义渲染组件：
+| Part 类型 | 说明 | 内置渲染器 |
+|-----------|------|-----------|
+| `text` | 文本内容 | TextPart（支持 Markdown） |
+| `thinking` | 思考过程 | ThinkingPart（可折叠卡片） |
+| `search` | 搜索结果 | SearchPart |
+| `tool_call` | 工具执行状态 | ToolCallPart（仅显示状态） |
+| `image` | 图片 | ImagePart |
+| `error` | 错误信息 | ErrorPart |
 
-```vue
-<template>
-  <ChatPanel
-    :adapter="adapter"
-    :block-renderers="blockRenderers"
-  />
-</template>
+### 扩展 Part 类型
 
-<script setup lang="ts">
-import { markRaw, type Component } from 'vue'
-import CustomMathBlock from './components/CustomMathBlock.vue'
+可以通过工具的 `resultType` 定义新的 Part 类型：
 
-const blockRenderers: Record<string, Component> = {
-  math: markRaw(CustomMathBlock),
+```typescript
+// 后端工具定义
+export function getWeatherTool(): ToolPlugin {
+  return tool({
+    name: 'get_weather',
+    description: '获取城市天气',
+    parameters: { city: { type: 'string' } },
+    resultType: 'weather',  // ← 指定结果 Part 类型
+    execute: async (args, context) => {
+      // 返回值会自动转换为 { type: 'weather', ...result }
+      return { city: args.city, temperature: 25, condition: '晴' }
+    }
+  })
 }
-</script>
 ```
 
 ## useChat
@@ -333,26 +332,35 @@ const {
 // 主组件
 export { ChatPanel, WelcomeMessage, ChatInput, ChatHeader, MessageBubble }
 
-// 内容渲染组件
-export { ContentRenderer, TextBlock, CodeBlock }
-
-// 工具结果渲染组件
-export { ToolResultRenderer, DefaultToolResult, WeatherCard, SearchResults }
+// Part 渲染组件
+export { PartsRenderer }
+export {
+  TextPartComponent,
+  ThinkingPartComponent,
+  SearchPartComponent,
+  ToolCallPartComponent,
+  ImagePartComponent,
+  ErrorPartComponent,
+}
 
 // Composable
 export { useChat }
 
-// 类型 (来自 @huyooo/ai-chat-shared)
+// 类型
 export type {
   WelcomeConfig,
   WelcomeFeature,
   WelcomeTask,
-  ToolRendererProps,
+  ContentPart,
+  TextPart,
+  ThinkingPart,
+  SearchPart,
+  ToolCallPart,
+  ImagePart,
+  ErrorPart,
+  WeatherPart,
   WeatherData,
   SearchResultItem,
-  ContentBlock,
-  TextBlock,
-  CodeBlock
 }
 
 // 工具函数 (来自 @huyooo/ai-chat-shared)

package/dist/_baseUniq-Berj5otS.js

@@ -0,0 +1,477 @@
+import { aV as L, br as ln, aE as A, aT as P, bs as gn, bt as dn, aD as W, bu as hn, bv as z, bw as pn, bm as An, bx as m, aW as N, a$ as U, b2 as T, by as _n, aZ as on, bz as wn, bp as On, aF as V, bn as vn, bA as I } from "./index-Cr3tTH72.js";
+var Pn = "[object Symbol]";
+function x(n) {
+  return typeof n == "symbol" || L(n) && ln(n) == Pn;
+}
+function yn(n, r) {
+  for (var e = -1, i = n == null ? 0 : n.length, f = Array(i); ++e < i; )
+    f[e] = r(n[e], e, n);
+  return f;
+}
+var B = P ? P.prototype : void 0, K = B ? B.toString : void 0;
+function k(n) {
+  if (typeof n == "string")
+    return n;
+  if (A(n))
+    return yn(n, k) + "";
+  if (x(n))
+    return K ? K.call(n) : "";
+  var r = n + "";
+  return r == "0" && 1 / n == -1 / 0 ? "-0" : r;
+}
+function En() {
+}
+function bn(n, r) {
+  for (var e = -1, i = n == null ? 0 : n.length; ++e < i && r(n[e], e, n) !== !1; )
+    ;
+  return n;
+}
+function cn(n, r, e, i) {
+  for (var f = n.length, t = e + -1; ++t < f; )
+    if (r(n[t], t, n))
+      return t;
+  return -1;
+}
+function Tn(n) {
+  return n !== n;
+}
+function Rn(n, r, e) {
+  for (var i = e - 1, f = n.length; ++i < f; )
+    if (n[i] === r)
+      return i;
+  return -1;
+}
+function In(n, r, e) {
+  return r === r ? Rn(n, r, e) : cn(n, Tn, e);
+}
+function Sn(n, r) {
+  var e = n == null ? 0 : n.length;
+  return !!e && In(n, r, 0) > -1;
+}
+function M(n) {
+  return W(n) ? gn(n) : dn(n);
+}
+var Ln = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/, xn = /^\w*$/;
+function $(n, r) {
+  if (A(n))
+    return !1;
+  var e = typeof n;
+  return e == "number" || e == "symbol" || e == "boolean" || n == null || x(n) ? !0 : xn.test(n) || !Ln.test(n) || r != null && n in Object(r);
+}
+var Mn = 500;
+function $n(n) {
+  var r = hn(n, function(i) {
+    return e.size === Mn && e.clear(), i;
+  }), e = r.cache;
+  return r;
+}
+var Cn = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g, Dn = /\\(\\)?/g, Fn = $n(function(n) {
+  var r = [];
+  return n.charCodeAt(0) === 46 && r.push(""), n.replace(Cn, function(e, i, f, t) {
+    r.push(f ? t.replace(Dn, "$1") : i || e);
+  }), r;
+});
+function Gn(n) {
+  return n == null ? "" : k(n);
+}
+function j(n, r) {
+  return A(n) ? n : $(n, r) ? [n] : Fn(Gn(n));
+}
+function R(n) {
+  if (typeof n == "string" || x(n))
+    return n;
+  var r = n + "";
+  return r == "0" && 1 / n == -1 / 0 ? "-0" : r;
+}
+function nn(n, r) {
+  r = j(r, n);
+  for (var e = 0, i = r.length; n != null && e < i; )
+    n = n[R(r[e++])];
+  return e && e == i ? n : void 0;
+}
+function mn(n, r, e) {
+  var i = n == null ? void 0 : nn(n, r);
+  return i === void 0 ? e : i;
+}
+function rn(n, r) {
+  for (var e = -1, i = r.length, f = n.length; ++e < i; )
+    n[f + e] = r[e];
+  return n;
+}
+var H = P ? P.isConcatSpreadable : void 0;
+function Nn(n) {
+  return A(n) || z(n) || !!(H && n && n[H]);
+}
+function Hr(n, r, e, i, f) {
+  var t = -1, s = n.length;
+  for (e || (e = Nn), f || (f = []); ++t < s; ) {
+    var u = n[t];
+    e(u) ? rn(f, u) : i || (f[f.length] = u);
+  }
+  return f;
+}
+function Un(n, r, e, i) {
+  var f = -1, t = n == null ? 0 : n.length;
+  for (i && t && (e = n[++f]); ++f < t; )
+    e = r(e, n[f], f, n);
+  return e;
+}
+function en(n, r) {
+  for (var e = -1, i = n == null ? 0 : n.length, f = 0, t = []; ++e < i; ) {
+    var s = n[e];
+    r(s, e, n) && (t[f++] = s);
+  }
+  return t;
+}
+function Bn() {
+  return [];
+}
+var Kn = Object.prototype, Hn = Kn.propertyIsEnumerable, Z = Object.getOwnPropertySymbols, Zn = Z ? function(n) {
+  return n == null ? [] : (n = Object(n), en(Z(n), function(r) {
+    return Hn.call(n, r);
+  }));
+} : Bn;
+function qn(n, r, e) {
+  var i = r(n);
+  return A(n) ? i : rn(i, e(n));
+}
+function q(n) {
+  return qn(n, M, Zn);
+}
+var Yn = "__lodash_hash_undefined__";
+function Xn(n) {
+  return this.__data__.set(n, Yn), this;
+}
+function Jn(n) {
+  return this.__data__.has(n);
+}
+function y(n) {
+  var r = -1, e = n == null ? 0 : n.length;
+  for (this.__data__ = new pn(); ++r < e; )
+    this.add(n[r]);
+}
+y.prototype.add = y.prototype.push = Xn;
+y.prototype.has = Jn;
+function Qn(n, r) {
+  for (var e = -1, i = n == null ? 0 : n.length; ++e < i; )
+    if (r(n[e], e, n))
+      return !0;
+  return !1;
+}
+function tn(n, r) {
+  return n.has(r);
+}
+var Wn = 1, zn = 2;
+function fn(n, r, e, i, f, t) {
+  var s = e & Wn, u = n.length, a = r.length;
+  if (u != a && !(s && a > u))
+    return !1;
+  var h = t.get(n), g = t.get(r);
+  if (h && g)
+    return h == r && g == n;
+  var l = -1, d = !0, o = e & zn ? new y() : void 0;
+  for (t.set(n, r), t.set(r, n); ++l < u; ) {
+    var p = n[l], _ = r[l];
+    if (i)
+      var w = s ? i(_, p, l, r, n, t) : i(p, _, l, n, r, t);
+    if (w !== void 0) {
+      if (w)
+        continue;
+      d = !1;
+      break;
+    }
+    if (o) {
+      if (!Qn(r, function(O, v) {
+        if (!tn(o, v) && (p === O || f(p, O, e, i, t)))
+          return o.push(v);
+      })) {
+        d = !1;
+        break;
+      }
+    } else if (!(p === _ || f(p, _, e, i, t))) {
+      d = !1;
+      break;
+    }
+  }
+  return t.delete(n), t.delete(r), d;
+}
+function Vn(n) {
+  var r = -1, e = Array(n.size);
+  return n.forEach(function(i, f) {
+    e[++r] = [f, i];
+  }), e;
+}
+function C(n) {
+  var r = -1, e = Array(n.size);
+  return n.forEach(function(i) {
+    e[++r] = i;
+  }), e;
+}
+var kn = 1, jn = 2, nr = "[object Boolean]", rr = "[object Date]", er = "[object Error]", ir = "[object Map]", tr = "[object Number]", fr = "[object RegExp]", sr = "[object Set]", ur = "[object String]", ar = "[object Symbol]", lr = "[object ArrayBuffer]", gr = "[object DataView]", Y = P ? P.prototype : void 0, S = Y ? Y.valueOf : void 0;
+function dr(n, r, e, i, f, t, s) {
+  switch (e) {
+    case gr:
+      if (n.byteLength != r.byteLength || n.byteOffset != r.byteOffset)
+        return !1;
+      n = n.buffer, r = r.buffer;
+    case lr:
+      return !(n.byteLength != r.byteLength || !t(new m(n), new m(r)));
+    case nr:
+    case rr:
+    case tr:
+      return An(+n, +r);
+    case er:
+      return n.name == r.name && n.message == r.message;
+    case fr:
+    case ur:
+      return n == r + "";
+    case ir:
+      var u = Vn;
+    case sr:
+      var a = i & kn;
+      if (u || (u = C), n.size != r.size && !a)
+        return !1;
+      var h = s.get(n);
+      if (h)
+        return h == r;
+      i |= jn, s.set(n, r);
+      var g = fn(u(n), u(r), i, f, t, s);
+      return s.delete(n), g;
+    case ar:
+      if (S)
+        return S.call(n) == S.call(r);
+  }
+  return !1;
+}
+var hr = 1, pr = Object.prototype, Ar = pr.hasOwnProperty;
+function _r(n, r, e, i, f, t) {
+  var s = e & hr, u = q(n), a = u.length, h = q(r), g = h.length;
+  if (a != g && !s)
+    return !1;
+  for (var l = a; l--; ) {
+    var d = u[l];
+    if (!(s ? d in r : Ar.call(r, d)))
+      return !1;
+  }
+  var o = t.get(n), p = t.get(r);
+  if (o && p)
+    return o == r && p == n;
+  var _ = !0;
+  t.set(n, r), t.set(r, n);
+  for (var w = s; ++l < a; ) {
+    d = u[l];
+    var O = n[d], v = r[d];
+    if (i)
+      var G = s ? i(v, O, d, r, n, t) : i(O, v, d, n, r, t);
+    if (!(G === void 0 ? O === v || f(O, v, e, i, t) : G)) {
+      _ = !1;
+      break;
+    }
+    w || (w = d == "constructor");
+  }
+  if (_ && !w) {
+    var E = n.constructor, b = r.constructor;
+    E != b && "constructor" in n && "constructor" in r && !(typeof E == "function" && E instanceof E && typeof b == "function" && b instanceof b) && (_ = !1);
+  }
+  return t.delete(n), t.delete(r), _;
+}
+var or = 1, X = "[object Arguments]", J = "[object Array]", c = "[object Object]", wr = Object.prototype, Q = wr.hasOwnProperty;
+function Or(n, r, e, i, f, t) {
+  var s = A(n), u = A(r), a = s ? J : N(n), h = u ? J : N(r);
+  a = a == X ? c : a, h = h == X ? c : h;
+  var g = a == c, l = h == c, d = a == h;
+  if (d && U(n)) {
+    if (!U(r))
+      return !1;
+    s = !0, g = !1;
+  }
+  if (d && !g)
+    return t || (t = new T()), s || _n(n) ? fn(n, r, e, i, f, t) : dr(n, r, a, e, i, f, t);
+  if (!(e & or)) {
+    var o = g && Q.call(n, "__wrapped__"), p = l && Q.call(r, "__wrapped__");
+    if (o || p) {
+      var _ = o ? n.value() : n, w = p ? r.value() : r;
+      return t || (t = new T()), f(_, w, e, i, t);
+    }
+  }
+  return d ? (t || (t = new T()), _r(n, r, e, i, f, t)) : !1;
+}
+function D(n, r, e, i, f) {
+  return n === r ? !0 : n == null || r == null || !L(n) && !L(r) ? n !== n && r !== r : Or(n, r, e, i, D, f);
+}
+var vr = 1, Pr = 2;
+function yr(n, r, e, i) {
+  var f = e.length, t = f;
+  if (n == null)
+    return !t;
+  for (n = Object(n); f--; ) {
+    var s = e[f];
+    if (s[2] ? s[1] !== n[s[0]] : !(s[0] in n))
+      return !1;
+  }
+  for (; ++f < t; ) {
+    s = e[f];
+    var u = s[0], a = n[u], h = s[1];
+    if (s[2]) {
+      if (a === void 0 && !(u in n))
+        return !1;
+    } else {
+      var g = new T(), l;
+      if (!(l === void 0 ? D(h, a, vr | Pr, i, g) : l))
+        return !1;
+    }
+  }
+  return !0;
+}
+function sn(n) {
+  return n === n && !on(n);
+}
+function Er(n) {
+  for (var r = M(n), e = r.length; e--; ) {
+    var i = r[e], f = n[i];
+    r[e] = [i, f, sn(f)];
+  }
+  return r;
+}
+function un(n, r) {
+  return function(e) {
+    return e == null ? !1 : e[n] === r && (r !== void 0 || n in Object(e));
+  };
+}
+function br(n) {
+  var r = Er(n);
+  return r.length == 1 && r[0][2] ? un(r[0][0], r[0][1]) : function(e) {
+    return e === n || yr(e, n, r);
+  };
+}
+function cr(n, r) {
+  return n != null && r in Object(n);
+}
+function Tr(n, r, e) {
+  r = j(r, n);
+  for (var i = -1, f = r.length, t = !1; ++i < f; ) {
+    var s = R(r[i]);
+    if (!(t = n != null && e(n, s)))
+      break;
+    n = n[s];
+  }
+  return t || ++i != f ? t : (f = n == null ? 0 : n.length, !!f && wn(f) && On(s, f) && (A(n) || z(n)));
+}
+function Rr(n, r) {
+  return n != null && Tr(n, r, cr);
+}
+var Ir = 1, Sr = 2;
+function Lr(n, r) {
+  return $(n) && sn(r) ? un(R(n), r) : function(e) {
+    var i = mn(e, n);
+    return i === void 0 && i === r ? Rr(e, n) : D(r, i, Ir | Sr);
+  };
+}
+function xr(n) {
+  return function(r) {
+    return r == null ? void 0 : r[n];
+  };
+}
+function Mr(n) {
+  return function(r) {
+    return nn(r, n);
+  };
+}
+function $r(n) {
+  return $(n) ? xr(R(n)) : Mr(n);
+}
+function an(n) {
+  return typeof n == "function" ? n : n == null ? V : typeof n == "object" ? A(n) ? Lr(n[0], n[1]) : br(n) : $r(n);
+}
+function Cr(n, r) {
+  return n && vn(n, r, M);
+}
+function Dr(n, r) {
+  return function(e, i) {
+    if (e == null)
+      return e;
+    if (!W(e))
+      return n(e, i);
+    for (var f = e.length, t = -1, s = Object(e); ++t < f && i(s[t], t, s) !== !1; )
+      ;
+    return e;
+  };
+}
+var F = Dr(Cr);
+function Fr(n) {
+  return typeof n == "function" ? n : V;
+}
+function Zr(n, r) {
+  var e = A(n) ? bn : F;
+  return e(n, Fr(r));
+}
+function Gr(n, r) {
+  var e = [];
+  return F(n, function(i, f, t) {
+    r(i, f, t) && e.push(i);
+  }), e;
+}
+function qr(n, r) {
+  var e = A(n) ? en : Gr;
+  return e(n, an(r));
+}
+function mr(n, r, e, i, f) {
+  return f(n, function(t, s, u) {
+    e = i ? (i = !1, t) : r(e, t, s, u);
+  }), e;
+}
+function Yr(n, r, e) {
+  var i = A(n) ? Un : mr, f = arguments.length < 3;
+  return i(n, an(r), e, f, F);
+}
+var Nr = 1 / 0, Ur = I && 1 / C(new I([, -0]))[1] == Nr ? function(n) {
+  return new I(n);
+} : En, Br = 200;
+function Xr(n, r, e) {
+  var i = -1, f = Sn, t = n.length, s = !0, u = [], a = u;
+  if (t >= Br) {
+    var h = r ? null : Ur(n);
+    if (h)
+      return C(h);
+    s = !1, f = tn, a = new y();
+  } else
+    a = r ? [] : u;
+  n:
+    for (; ++i < t; ) {
+      var g = n[i], l = r ? r(g) : g;
+      if (g = g !== 0 ? g : 0, s && l === l) {
+        for (var d = a.length; d--; )
+          if (a[d] === l)
+            continue n;
+        r && a.push(l), u.push(g);
+      } else f(a, l, e) || (a !== u && a.push(l), u.push(g));
+    }
+  return u;
+}
+export {
+  F as a,
+  Hr as b,
+  yn as c,
+  an as d,
+  rn as e,
+  qn as f,
+  Zn as g,
+  q as h,
+  x as i,
+  bn as j,
+  M as k,
+  Xr as l,
+  qr as m,
+  Zr as n,
+  cn as o,
+  Fr as p,
+  Cr as q,
+  Yr as r,
+  Bn as s,
+  Tr as t,
+  j as u,
+  R as v,
+  nn as w,
+  Rr as x,
+  Gn as y
+};