@seer-ai/seer-vue 0.1.0-beta.1 → 0.1.0-beta.3

package/README.md

@@ -17,7 +17,8 @@ import App from './App.vue'
 
 createApp(App)
   .use(SeerChatPlugin, {
-    endpoint: '/api/seer-chat',
+    sessionEndpoint: 'https://seer.example.com/v1/browser/session',
+    endpoint: 'https://seer.example.com/v1/browser/chat/completions',
     model: 'seer',
     stream: false,
   })
@@ -55,4 +56,4 @@ async function submit() {
 
 ## Security
 
-Do not put long-lived seer API keys in browser code or `VITE_*` variables. Browser code should call an application-owned proxy such as `/api/seer-chat`; that server-side proxy forwards to seer `/v1/chat/completions` and injects the Bearer token.
+Do not put long-lived seer API keys in browser code or `VITE_*` variables. Browser code should call seer's browser session endpoint, receive a short-lived token, and use that token for `/v1/browser/chat/completions`.

package/dist/client.d.ts

@@ -6,6 +6,7 @@ export interface SeerChatMessage {
 }
 export interface SeerClientOptions {
     endpoint: string;
+    sessionEndpoint?: string;
     model?: string;
     fetcher?: typeof fetch;
 }

package/dist/index.css

@@ -1 +1 @@
-.seer-chat[data-v-51cf8455]{display:grid;gap:16px;max-width:720px;padding:20px;color:#172033;background:#fff;border:1px solid #d9e2ef;border-radius:16px}.seer-chat__header[data-v-51cf8455]{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.seer-chat__header h2[data-v-51cf8455]{margin:0;font-size:20px}.seer-chat__header p[data-v-51cf8455],.seer-chat__empty[data-v-51cf8455],.seer-chat__status[data-v-51cf8455],.seer-chat__citations[data-v-51cf8455]{margin:4px 0 0;color:#5f6f89;font-size:14px}.seer-chat__messages[data-v-51cf8455]{display:grid;gap:12px;min-height:180px}.seer-chat__message[data-v-51cf8455]{display:grid;gap:4px;max-width:86%;padding:12px 14px;border-radius:14px;background:#f3f6fb}.seer-chat__message--user[data-v-51cf8455]{justify-self:end;color:#fff;background:#1f5eff}.seer-chat__role[data-v-51cf8455]{font-size:12px;font-weight:700;opacity:.75}.seer-chat__message p[data-v-51cf8455]{margin:0;white-space:pre-wrap}.seer-chat__error[data-v-51cf8455],.seer-chat__handoff[data-v-51cf8455]{margin:0;padding:10px 12px;border-radius:10px}.seer-chat__error[data-v-51cf8455]{color:#8a1f11;background:#fff0ed}.seer-chat__handoff[data-v-51cf8455]{color:#704600;background:#fff7db}.seer-chat__citations ul[data-v-51cf8455]{margin:6px 0 0;padding-left:18px}.seer-chat__form[data-v-51cf8455]{display:grid;gap:10px}.seer-chat__label[data-v-51cf8455]{font-size:13px;font-weight:700}.seer-chat textarea[data-v-51cf8455]{width:100%;box-sizing:border-box;padding:12px;color:inherit;border:1px solid #c8d3e2;border-radius:12px;resize:vertical}.seer-chat button[data-v-51cf8455]{padding:9px 14px;color:#fff;background:#172033;border:0;border-radius:999px;cursor:pointer}.seer-chat button[data-v-51cf8455]:disabled{cursor:not-allowed;opacity:.5}.seer-chat button[data-v-51cf8455]:focus-visible,.seer-chat textarea[data-v-51cf8455]:focus-visible{outline:3px solid #8fb4ff;outline-offset:2px}.seer-chat__ghost-button[data-v-51cf8455]{color:#172033!important;background:#eef3fa!important}.seer-chat__actions[data-v-51cf8455]{display:flex;gap:8px;justify-content:flex-end}
+.seer-chat[data-v-163bc07c]{display:grid;gap:16px;max-width:720px;padding:20px;color:#172033;background:#fff;border:1px solid #d9e2ef;border-radius:16px}.seer-chat__header[data-v-163bc07c]{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.seer-chat__header h2[data-v-163bc07c]{margin:0;font-size:20px}.seer-chat__header p[data-v-163bc07c],.seer-chat__empty[data-v-163bc07c],.seer-chat__status[data-v-163bc07c]{margin:4px 0 0;color:#5f6f89;font-size:14px}.seer-chat__messages[data-v-163bc07c]{display:grid;gap:12px;min-height:180px}.seer-chat__message[data-v-163bc07c]{display:grid;gap:4px;max-width:86%;padding:12px 14px;border-radius:14px;background:#f3f6fb}.seer-chat__message--user[data-v-163bc07c]{justify-self:end;color:#fff;background:#1f5eff}.seer-chat__role[data-v-163bc07c]{font-size:12px;font-weight:700;opacity:.75}.seer-chat__message p[data-v-163bc07c]{margin:0;white-space:pre-wrap}.seer-chat__error[data-v-163bc07c],.seer-chat__handoff[data-v-163bc07c]{margin:0;padding:10px 12px;border-radius:10px}.seer-chat__error[data-v-163bc07c]{color:#8a1f11;background:#fff0ed}.seer-chat__handoff[data-v-163bc07c]{color:#704600;background:#fff7db}.seer-chat__form[data-v-163bc07c]{display:grid;gap:10px}.seer-chat__label[data-v-163bc07c]{font-size:13px;font-weight:700}.seer-chat textarea[data-v-163bc07c]{width:100%;box-sizing:border-box;padding:12px;color:inherit;border:1px solid #c8d3e2;border-radius:12px;resize:vertical}.seer-chat button[data-v-163bc07c]{padding:9px 14px;color:#fff;background:#172033;border:0;border-radius:999px;cursor:pointer}.seer-chat button[data-v-163bc07c]:disabled{cursor:not-allowed;opacity:.5}.seer-chat button[data-v-163bc07c]:focus-visible,.seer-chat textarea[data-v-163bc07c]:focus-visible{outline:3px solid #8fb4ff;outline-offset:2px}.seer-chat__ghost-button[data-v-163bc07c]{color:#172033!important;background:#eef3fa!important}.seer-chat__actions[data-v-163bc07c]{display:flex;gap:8px;justify-content:flex-end}

package/dist/index.js

@@ -1,71 +1,88 @@
-import { hasInjectionContext as q, inject as A, ref as g, defineComponent as N, computed as T, openBlock as f, createElementBlock as h, createElementVNode as u, toDisplayString as S, unref as d, createCommentVNode as b, Fragment as R, renderList as j, normalizeClass as M, withModifiers as B, withDirectives as F, vModelText as P } from "vue";
+import { hasInjectionContext as T, inject as $, ref as w, defineComponent as A, computed as q, openBlock as v, createElementBlock as p, createElementVNode as u, toDisplayString as E, unref as h, createCommentVNode as k, Fragment as M, renderList as N, normalizeClass as B, withModifiers as D, withDirectives as F, vModelText as P } from "vue";
 function V(n) {
   const t = n.fetcher ?? fetch, e = n.model ?? "seer";
+  let s, c = 0;
   return {
-    async chat(s, i = {}) {
-      const r = s.stream ?? !1, c = await t(n.endpoint, {
+    async chat(r, a = {}) {
+      const o = r.stream ?? !1, f = await l(), m = {
+        "Content-Type": "application/json"
+      };
+      f && (m.Authorization = `Bearer ${f}`);
+      const d = await t(n.endpoint, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        signal: i.signal,
+        headers: m,
+        signal: a.signal,
         body: JSON.stringify({
-          model: s.model ?? e,
-          messages: s.messages,
-          stream: r,
-          conversation_id: s.conversationId,
-          metadata: s.metadata
+          model: r.model ?? e,
+          messages: r.messages,
+          stream: o,
+          conversation_id: r.conversationId,
+          metadata: r.metadata
         })
       });
-      if (!c.ok)
-        throw new Error(await L(c));
-      if (r)
-        return D(c, i.onDelta);
-      const a = await c.json();
-      return E(a);
+      if (!d.ok)
+        throw new Error(await j(d));
+      if (o)
+        return z(d, a.onDelta);
+      const y = await d.json();
+      return O(y);
     }
   };
+  async function l() {
+    if (!n.sessionEndpoint)
+      return;
+    const r = Math.floor(Date.now() / 1e3);
+    if (s && c - 30 > r)
+      return s;
+    const a = await t(n.sessionEndpoint, {
+      method: "GET"
+    });
+    if (!a.ok)
+      throw new Error(await j(a));
+    const o = await a.json();
+    return s = o.token, c = o.expires_at, s;
+  }
 }
-function E(n) {
-  var e, s, i;
+function O(n) {
+  var e, s, c;
   const t = (e = n.choices) == null ? void 0 : e[0];
   return {
-    content: ((s = t == null ? void 0 : t.message) == null ? void 0 : s.content) ?? ((i = t == null ? void 0 : t.delta) == null ? void 0 : i.content) ?? "",
+    content: ((s = t == null ? void 0 : t.message) == null ? void 0 : s.content) ?? ((c = t == null ? void 0 : t.delta) == null ? void 0 : c.content) ?? "",
     conversationId: n.conversation_id,
     citations: n.citations ?? [],
     handoffRequested: n.handoff_requested ?? !1,
     finishReason: t == null ? void 0 : t.finish_reason
   };
 }
-async function D(n, t) {
-  var y, v, C;
+async function z(n, t) {
+  var m, d, y;
   if (!n.body)
-    return E({});
+    return O({});
   const e = n.body.getReader(), s = new TextDecoder();
-  let i = "", r = "", c, a = [], o = !1, m;
+  let c = "", l = "", r, a = [], o = !1, f;
   for (; ; ) {
-    const { done: x, value: O } = await e.read();
+    const { done: x, value: I } = await e.read();
     if (x)
       break;
-    i += s.decode(O, { stream: !0 });
-    const k = i.split(`
+    c += s.decode(I, { stream: !0 });
+    const S = c.split(`
 
 `);
-    i = k.pop() ?? "";
-    for (const I of k) {
-      const w = J(I);
-      if (!w || w === "[DONE]")
+    c = S.pop() ?? "";
+    for (const C of S) {
+      const b = J(C);
+      if (!b || b === "[DONE]")
         continue;
-      const p = JSON.parse(w), l = (y = p.choices) == null ? void 0 : y[0], _ = ((v = l == null ? void 0 : l.delta) == null ? void 0 : v.content) ?? ((C = l == null ? void 0 : l.message) == null ? void 0 : C.content) ?? "";
-      _ && (r += _, t == null || t(_)), c = p.conversation_id ?? c, a = p.citations ?? a, o = p.handoff_requested ?? o, m = (l == null ? void 0 : l.finish_reason) ?? m;
+      const _ = JSON.parse(b), i = (m = _.choices) == null ? void 0 : m[0], g = ((d = i == null ? void 0 : i.delta) == null ? void 0 : d.content) ?? ((y = i == null ? void 0 : i.message) == null ? void 0 : y.content) ?? "";
+      g && (l += g, t == null || t(g)), r = _.conversation_id ?? r, a = _.citations ?? a, o = _.handoff_requested ?? o, f = (i == null ? void 0 : i.finish_reason) ?? f;
     }
   }
   return {
-    content: r,
-    conversationId: c,
+    content: l,
+    conversationId: r,
     citations: a,
     handoffRequested: o,
-    finishReason: m
+    finishReason: f
   };
 }
 function J(n) {
@@ -74,7 +91,7 @@ function J(n) {
   return t.length === 0 ? null : t.join(`
 `);
 }
-async function L(n) {
+async function j(n) {
   let t = n.statusText || "unknown error";
   try {
     const e = await n.json();
@@ -85,75 +102,76 @@ async function L(n) {
   }
   return `seer chat request failed with status ${n.status}: ${t}`;
 }
-const $ = Symbol("seer-chat-options"), re = {
+const R = Symbol("seer-chat-options"), oe = {
   install(n, t) {
-    n.provide($, t);
+    n.provide(R, t);
   }
 };
-function z(n = {}) {
-  const e = { ...q() ? A($, void 0) : void 0, ...n };
+function L(n = {}) {
+  const e = { ...T() ? $(R, void 0) : void 0, ...n };
   if (!e.endpoint)
     throw new Error("Seer chat endpoint is required. Pass it to app.use() or useSeerChat().");
   const s = {
     endpoint: e.endpoint,
+    sessionEndpoint: e.sessionEndpoint,
     model: e.model,
     fetcher: e.fetcher
-  }, i = V(s), r = g([]), c = g(!1), a = g(null), o = g(), m = g([]), y = g(!1);
-  let v = null;
-  async function C(k) {
-    const I = k.trim();
-    if (!I || c.value)
+  }, c = V(s), l = w([]), r = w(!1), a = w(null), o = w(), f = w([]), m = w(!1);
+  let d = null;
+  async function y(S) {
+    const C = S.trim();
+    if (!C || r.value)
       return;
-    const w = { role: "user", content: I };
-    r.value = [...r.value, w], c.value = !0, a.value = null, v = new AbortController();
-    const p = { role: "assistant", content: "" };
-    e.stream && (r.value = [...r.value, p]);
+    const b = { role: "user", content: C };
+    l.value = [...l.value, b], r.value = !0, a.value = null, d = new AbortController();
+    const _ = { role: "assistant", content: "" };
+    e.stream && (l.value = [...l.value, _]);
     try {
-      const l = await i.chat(
+      const i = await c.chat(
         {
-          messages: r.value.filter((_) => _.content),
+          messages: l.value.filter((g) => g.content),
           stream: e.stream ?? !1,
           conversationId: o.value
         },
         {
-          signal: v.signal,
-          onDelta(_) {
-            p.content += _, r.value = [...r.value];
+          signal: d.signal,
+          onDelta(g) {
+            _.content += g, l.value = [...l.value];
           }
         }
       );
-      e.stream || (r.value = [...r.value, { role: "assistant", content: l.content }]), o.value = l.conversationId, m.value = l.citations, y.value = l.handoffRequested;
-    } catch (l) {
-      l.name !== "AbortError" && (a.value = l instanceof Error ? l.message : String(l));
+      e.stream || (l.value = [...l.value, { role: "assistant", content: i.content }]), o.value = i.conversationId, f.value = i.citations, m.value = i.handoffRequested;
+    } catch (i) {
+      i.name !== "AbortError" && (a.value = i instanceof Error ? i.message : String(i));
     } finally {
-      c.value = !1, v = null;
+      r.value = !1, d = null;
     }
   }
   function x() {
-    r.value = [], a.value = null, o.value = void 0, m.value = [], y.value = !1;
+    l.value = [], a.value = null, o.value = void 0, f.value = [], m.value = !1;
   }
-  function O() {
-    v == null || v.abort();
+  function I() {
+    d == null || d.abort();
   }
   return {
-    messages: r,
-    loading: c,
+    messages: l,
+    loading: r,
     error: a,
     conversationId: o,
-    citations: m,
-    handoffRequested: y,
-    send: C,
+    citations: f,
+    handoffRequested: m,
+    send: y,
     reset: x,
-    abort: O
+    abort: I
   };
 }
-const K = {
+const G = {
   class: "seer-chat",
   "aria-label": "多发货 AI 客服聊天"
-}, U = { class: "seer-chat__header" }, W = {
+}, K = { class: "seer-chat__header" }, U = {
   class: "seer-chat__messages",
   "aria-live": "polite"
-}, G = {
+}, W = {
   key: 0,
   class: "seer-chat__empty"
 }, H = { class: "seer-chat__role" }, Q = {
@@ -166,10 +184,7 @@ const K = {
 }, Y = {
   key: 2,
   class: "seer-chat__handoff"
-}, Z = {
-  key: 3,
-  class: "seer-chat__citations"
-}, ee = ["placeholder", "disabled"], te = { class: "seer-chat__actions" }, ne = ["disabled"], se = /* @__PURE__ */ N({
+}, Z = ["placeholder", "disabled"], ee = { class: "seer-chat__actions" }, te = ["disabled"], ne = /* @__PURE__ */ A({
   __name: "SeerChat",
   props: {
     endpoint: {},
@@ -180,54 +195,48 @@ const K = {
     placeholder: { default: "输入你的问题，例如：美国海派怎么报价？" }
   },
   setup(n) {
-    const t = n, e = g(""), s = z({
+    const t = n, e = w(""), s = L({
       endpoint: t.endpoint,
       model: t.model,
       stream: t.stream,
       fetcher: t.fetcher
-    }), i = T(() => e.value.trim().length > 0 && !s.loading.value);
-    async function r() {
-      if (!i.value)
+    }), c = q(() => e.value.trim().length > 0 && !s.loading.value);
+    async function l() {
+      if (!c.value)
         return;
-      const c = e.value;
-      e.value = "", await s.send(c);
+      const r = e.value;
+      e.value = "", await s.send(r);
     }
-    return (c, a) => (f(), h("section", K, [
-      u("header", U, [
+    return (r, a) => (v(), p("section", G, [
+      u("header", K, [
         u("div", null, [
-          u("h2", null, S(n.title), 1),
+          u("h2", null, E(n.title), 1),
           a[3] || (a[3] = u("p", null, "可咨询渠道报价、时效、下单资料、入仓和售后问题。", -1))
         ]),
         u("button", {
           type: "button",
           class: "seer-chat__ghost-button",
-          onClick: a[0] || (a[0] = (o) => d(s).reset())
+          onClick: a[0] || (a[0] = (o) => h(s).reset())
         }, "清空")
       ]),
-      u("div", W, [
-        d(s).messages.value.length === 0 ? (f(), h("p", G, " 直接输入问题即可，复杂查单或赔付问题会提示转人工。 ")) : b("", !0),
-        (f(!0), h(R, null, j(d(s).messages.value, (o, m) => (f(), h("article", {
-          key: `${o.role}-${m}`,
-          class: M(["seer-chat__message", `seer-chat__message--${o.role}`])
+      u("div", U, [
+        h(s).messages.value.length === 0 ? (v(), p("p", W, " 直接输入问题即可，复杂查单或赔付问题会提示转人工。 ")) : k("", !0),
+        (v(!0), p(M, null, N(h(s).messages.value, (o, f) => (v(), p("article", {
+          key: `${o.role}-${f}`,
+          class: B(["seer-chat__message", `seer-chat__message--${o.role}`])
         }, [
-          u("span", H, S(o.role === "user" ? "你" : "AI 客服"), 1),
-          u("p", null, S(o.content), 1)
+          u("span", H, E(o.role === "user" ? "你" : "AI 客服"), 1),
+          u("p", null, E(o.content), 1)
         ], 2))), 128))
       ]),
-      d(s).loading.value ? (f(), h("p", Q, "正在回复...")) : b("", !0),
-      d(s).error.value ? (f(), h("p", X, S(d(s).error.value), 1)) : b("", !0),
-      d(s).handoffRequested.value ? (f(), h("p", Y, " 建议转人工：请留下联系方式或等待客服接入。 ")) : b("", !0),
-      d(s).citations.value.length > 0 ? (f(), h("footer", Z, [
-        a[4] || (a[4] = u("span", null, "参考资料", -1)),
-        u("ul", null, [
-          (f(!0), h(R, null, j(d(s).citations.value, (o) => (f(), h("li", { key: o }, S(o), 1))), 128))
-        ])
-      ])) : b("", !0),
+      h(s).loading.value ? (v(), p("p", Q, "正在回复...")) : k("", !0),
+      h(s).error.value ? (v(), p("p", X, E(h(s).error.value), 1)) : k("", !0),
+      h(s).handoffRequested.value ? (v(), p("p", Y, " 建议转人工：请留下联系方式或等待客服接入。 ")) : k("", !0),
       u("form", {
         class: "seer-chat__form",
-        onSubmit: B(r, ["prevent"])
+        onSubmit: D(l, ["prevent"])
       }, [
-        a[5] || (a[5] = u("label", {
+        a[4] || (a[4] = u("label", {
           class: "seer-chat__label",
           for: "seer-chat-input"
         }, "问题", -1)),
@@ -235,35 +244,35 @@ const K = {
           id: "seer-chat-input",
           "onUpdate:modelValue": a[1] || (a[1] = (o) => e.value = o),
           placeholder: n.placeholder,
-          disabled: d(s).loading.value,
+          disabled: h(s).loading.value,
           rows: "3"
-        }, null, 8, ee), [
+        }, null, 8, Z), [
           [P, e.value]
         ]),
-        u("div", te, [
-          d(s).loading.value ? (f(), h("button", {
+        u("div", ee, [
+          h(s).loading.value ? (v(), p("button", {
             key: 0,
             type: "button",
             class: "seer-chat__ghost-button",
-            onClick: a[2] || (a[2] = (o) => d(s).abort())
-          }, " 停止 ")) : b("", !0),
+            onClick: a[2] || (a[2] = (o) => h(s).abort())
+          }, " 停止 ")) : k("", !0),
           u("button", {
             type: "submit",
-            disabled: !i.value
-          }, "发送", 8, ne)
+            disabled: !c.value
+          }, "发送", 8, te)
         ])
       ], 32)
     ]));
   }
-}), ae = (n, t) => {
+}), se = (n, t) => {
   const e = n.__vccOpts || n;
-  for (const [s, i] of t)
-    e[s] = i;
+  for (const [s, c] of t)
+    e[s] = c;
   return e;
-}, le = /* @__PURE__ */ ae(se, [["__scopeId", "data-v-51cf8455"]]);
+}, re = /* @__PURE__ */ se(ne, [["__scopeId", "data-v-163bc07c"]]);
 export {
-  le as SeerChat,
-  re as SeerChatPlugin,
+  re as SeerChat,
+  oe as SeerChatPlugin,
   V as createSeerClient,
-  z as useSeerChat
+  L as useSeerChat
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seer-ai/seer-vue",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.3",
   "description": "Vue chat plugin for the seer OpenAI-compatible API",
   "type": "module",
   "main": "./dist/index.js",