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

package/README.md

@@ -0,0 +1,58 @@
+# @seer-ai/seer-vue
+
+Vue 3 chat plugin for the seer OpenAI-compatible API.
+
+## Install
+
+```bash
+npm install @seer-ai/seer-vue@beta
+```
+
+## Use the default chat component
+
+```ts
+import { createApp } from 'vue'
+import { SeerChatPlugin } from '@seer-ai/seer-vue'
+import App from './App.vue'
+
+createApp(App)
+  .use(SeerChatPlugin, {
+    endpoint: '/api/seer-chat',
+    model: 'seer',
+    stream: false,
+  })
+  .mount('#app')
+```
+
+```vue
+<script setup lang="ts">
+import { SeerChat } from '@seer-ai/seer-vue'
+</script>
+
+<template>
+  <SeerChat />
+</template>
+```
+
+## Use custom UI
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useSeerChat } from '@seer-ai/seer-vue'
+
+const input = ref('')
+const chat = useSeerChat()
+
+async function submit() {
+  const content = input.value.trim()
+  if (!content) return
+  input.value = ''
+  await chat.send(content)
+}
+</script>
+```
+
+## 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.

package/dist/client.d.ts

@@ -0,0 +1,33 @@
+export type SeerChatRole = 'system' | 'user' | 'assistant' | 'tool';
+export interface SeerChatMessage {
+    role: SeerChatRole;
+    content: string;
+    name?: string;
+}
+export interface SeerClientOptions {
+    endpoint: string;
+    model?: string;
+    fetcher?: typeof fetch;
+}
+export interface SeerChatRequest {
+    messages: SeerChatMessage[];
+    model?: string;
+    stream?: boolean;
+    conversationId?: string;
+    metadata?: Record<string, unknown>;
+}
+export interface SeerChatCallbacks {
+    signal?: AbortSignal;
+    onDelta?: (delta: string) => void;
+}
+export interface SeerChatResult {
+    content: string;
+    conversationId?: string;
+    citations: string[];
+    handoffRequested: boolean;
+    finishReason?: string;
+}
+export interface SeerClient {
+    chat(request: SeerChatRequest, callbacks?: SeerChatCallbacks): Promise<SeerChatResult>;
+}
+export declare function createSeerClient(options: SeerClientOptions): SeerClient;

package/dist/components/SeerChat.vue.d.ts

@@ -0,0 +1,17 @@
+import type { SeerClientOptions } from '../client';
+type __VLS_Props = {
+    endpoint?: string;
+    model?: string;
+    stream?: boolean;
+    fetcher?: SeerClientOptions['fetcher'];
+    title?: string;
+    placeholder?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    stream: boolean;
+    title: string;
+    placeholder: string;
+    model: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.css

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

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { createSeerClient } from './client';
+export { SeerChatPlugin } from './plugin';
+export { useSeerChat } from './useSeerChat';
+export { default as SeerChat } from './components/SeerChat.vue';
+export type { SeerChatCallbacks, SeerChatMessage, SeerChatRequest, SeerChatResult, SeerChatRole, SeerClient, SeerClientOptions, } from './client';
+export type { SeerChatPluginOptions } from './plugin';
+export type { UseSeerChatOptions } from './useSeerChat';

package/dist/index.js

@@ -0,0 +1,269 @@
+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";
+function V(n) {
+  const t = n.fetcher ?? fetch, e = n.model ?? "seer";
+  return {
+    async chat(s, i = {}) {
+      const r = s.stream ?? !1, c = await t(n.endpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        signal: i.signal,
+        body: JSON.stringify({
+          model: s.model ?? e,
+          messages: s.messages,
+          stream: r,
+          conversation_id: s.conversationId,
+          metadata: s.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);
+    }
+  };
+}
+function E(n) {
+  var e, s, i;
+  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) ?? "",
+    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;
+  if (!n.body)
+    return E({});
+  const e = n.body.getReader(), s = new TextDecoder();
+  let i = "", r = "", c, a = [], o = !1, m;
+  for (; ; ) {
+    const { done: x, value: O } = await e.read();
+    if (x)
+      break;
+    i += s.decode(O, { stream: !0 });
+    const k = i.split(`
+
+`);
+    i = k.pop() ?? "";
+    for (const I of k) {
+      const w = J(I);
+      if (!w || w === "[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;
+    }
+  }
+  return {
+    content: r,
+    conversationId: c,
+    citations: a,
+    handoffRequested: o,
+    finishReason: m
+  };
+}
+function J(n) {
+  const t = n.split(`
+`).map((e) => e.trim()).filter((e) => e.startsWith("data:")).map((e) => e.slice(5).trim());
+  return t.length === 0 ? null : t.join(`
+`);
+}
+async function L(n) {
+  let t = n.statusText || "unknown error";
+  try {
+    const e = await n.json();
+    typeof (e == null ? void 0 : e.detail) == "string" ? t = e.detail : typeof (e == null ? void 0 : e.error) == "string" && (t = e.error);
+  } catch {
+    const e = await n.text().catch(() => "");
+    e && (t = e);
+  }
+  return `seer chat request failed with status ${n.status}: ${t}`;
+}
+const $ = Symbol("seer-chat-options"), re = {
+  install(n, t) {
+    n.provide($, t);
+  }
+};
+function z(n = {}) {
+  const e = { ...q() ? A($, 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,
+    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)
+      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]);
+    try {
+      const l = await i.chat(
+        {
+          messages: r.value.filter((_) => _.content),
+          stream: e.stream ?? !1,
+          conversationId: o.value
+        },
+        {
+          signal: v.signal,
+          onDelta(_) {
+            p.content += _, r.value = [...r.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));
+    } finally {
+      c.value = !1, v = null;
+    }
+  }
+  function x() {
+    r.value = [], a.value = null, o.value = void 0, m.value = [], y.value = !1;
+  }
+  function O() {
+    v == null || v.abort();
+  }
+  return {
+    messages: r,
+    loading: c,
+    error: a,
+    conversationId: o,
+    citations: m,
+    handoffRequested: y,
+    send: C,
+    reset: x,
+    abort: O
+  };
+}
+const K = {
+  class: "seer-chat",
+  "aria-label": "多发货 AI 客服聊天"
+}, U = { class: "seer-chat__header" }, W = {
+  class: "seer-chat__messages",
+  "aria-live": "polite"
+}, G = {
+  key: 0,
+  class: "seer-chat__empty"
+}, H = { class: "seer-chat__role" }, Q = {
+  key: 0,
+  class: "seer-chat__status"
+}, X = {
+  key: 1,
+  class: "seer-chat__error",
+  role: "alert"
+}, 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({
+  __name: "SeerChat",
+  props: {
+    endpoint: {},
+    model: { default: "seer" },
+    stream: { type: Boolean, default: !1 },
+    fetcher: {},
+    title: { default: "多发货 AI 客服" },
+    placeholder: { default: "输入你的问题，例如：美国海派怎么报价？" }
+  },
+  setup(n) {
+    const t = n, e = g(""), s = z({
+      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)
+        return;
+      const c = e.value;
+      e.value = "", await s.send(c);
+    }
+    return (c, a) => (f(), h("section", K, [
+      u("header", U, [
+        u("div", null, [
+          u("h2", null, S(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())
+        }, "清空")
+      ]),
+      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("span", H, S(o.role === "user" ? "你" : "AI 客服"), 1),
+          u("p", null, S(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),
+      u("form", {
+        class: "seer-chat__form",
+        onSubmit: B(r, ["prevent"])
+      }, [
+        a[5] || (a[5] = u("label", {
+          class: "seer-chat__label",
+          for: "seer-chat-input"
+        }, "问题", -1)),
+        F(u("textarea", {
+          id: "seer-chat-input",
+          "onUpdate:modelValue": a[1] || (a[1] = (o) => e.value = o),
+          placeholder: n.placeholder,
+          disabled: d(s).loading.value,
+          rows: "3"
+        }, null, 8, ee), [
+          [P, e.value]
+        ]),
+        u("div", te, [
+          d(s).loading.value ? (f(), h("button", {
+            key: 0,
+            type: "button",
+            class: "seer-chat__ghost-button",
+            onClick: a[2] || (a[2] = (o) => d(s).abort())
+          }, " 停止 ")) : b("", !0),
+          u("button", {
+            type: "submit",
+            disabled: !i.value
+          }, "发送", 8, ne)
+        ])
+      ], 32)
+    ]));
+  }
+}), ae = (n, t) => {
+  const e = n.__vccOpts || n;
+  for (const [s, i] of t)
+    e[s] = i;
+  return e;
+}, le = /* @__PURE__ */ ae(se, [["__scopeId", "data-v-51cf8455"]]);
+export {
+  le as SeerChat,
+  re as SeerChatPlugin,
+  V as createSeerClient,
+  z as useSeerChat
+};

package/dist/plugin.d.ts

@@ -0,0 +1,9 @@
+import type { App, InjectionKey } from 'vue';
+import type { SeerClientOptions } from './client';
+export interface SeerChatPluginOptions extends SeerClientOptions {
+    stream?: boolean;
+}
+export declare const seerChatOptionsKey: InjectionKey<SeerChatPluginOptions>;
+export declare const SeerChatPlugin: {
+    install(app: App, options: SeerChatPluginOptions): void;
+};

package/dist/useSeerChat.d.ts

@@ -0,0 +1,24 @@
+import { type SeerChatMessage } from './client';
+import { type SeerChatPluginOptions } from './plugin';
+export interface UseSeerChatOptions extends Partial<SeerChatPluginOptions> {
+    endpoint?: string;
+}
+export declare function useSeerChat(localOptions?: UseSeerChatOptions): {
+    messages: import("vue").Ref<{
+        role: import("./client").SeerChatRole;
+        content: string;
+        name?: string | undefined;
+    }[], SeerChatMessage[] | {
+        role: import("./client").SeerChatRole;
+        content: string;
+        name?: string | undefined;
+    }[]>;
+    loading: import("vue").Ref<boolean, boolean>;
+    error: import("vue").Ref<string | null, string | null>;
+    conversationId: import("vue").Ref<string | undefined, string | undefined>;
+    citations: import("vue").Ref<string[], string[]>;
+    handoffRequested: import("vue").Ref<boolean, boolean>;
+    send: (content: string) => Promise<void>;
+    reset: () => void;
+    abort: () => void;
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@seer-ai/seer-vue",
+  "version": "0.1.0-beta.1",
+  "description": "Vue chat plugin for the seer OpenAI-compatible API",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "typecheck": "vue-tsc --noEmit",
+    "build": "vite build && vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/test-utils": "^2.4.10",
+    "happy-dom": "^20.9.0",
+    "typescript": "^6.0.3",
+    "vite": "^6.4.2",
+    "vitest": "^4.1.7",
+    "vue": "^3.5.35",
+    "vue-tsc": "^3.3.2"
+  }
+}