@matechat/core 0.0.2-alpha.1 → 1.1.0-alpha.0

package/List/index.js

@@ -0,0 +1,143 @@
+import "./index.css";
+import { ref as E, onMounted as L, computed as p, defineComponent as w, openBlock as u, createElementBlock as f, normalizeClass as g, unref as c, Fragment as b, renderList as z, renderSlot as h, createTextVNode as C, toDisplayString as T } from "vue";
+var v = /* @__PURE__ */ ((e) => (e.Horizontal = "horizontal", e.Vertical = "vertical", e))(v || {}), k = /* @__PURE__ */ ((e) => (e.Transparent = "transparent", e.Filled = "filled", e.Bordered = "bordered", e.None = "none", e))(k || {});
+const A = {
+  direction: {
+    type: String,
+    default: "vertical"
+    /* Vertical */
+  },
+  autoWrap: {
+    type: Boolean,
+    default: !0
+  },
+  variant: {
+    type: String,
+    default: "transparent"
+    /* Transparent */
+  },
+  enableLazyLoad: {
+    type: Boolean,
+    default: !1
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  enableShortKey: {
+    type: Boolean,
+    default: !1
+  },
+  inputEl: {
+    type: Object
+  },
+  selectable: {
+    type: Boolean,
+    default: !0
+  }
+}, B = 50, H = ["TEXTAREA", "INPUT"], I = "ArrowUp", _ = "ArrowDown", N = "Enter";
+function M(e, o) {
+  const n = E(e.enableShortKey ? 0 : -1), i = (t) => {
+    if (!t.disabled) {
+      if (e.selectable)
+        for (let l = 0; l < e.data.length; l++)
+          e.data[l].active = e.data[l].value === t.value;
+      o("select", { ...t });
+    }
+  }, s = (t) => {
+    if (!e.enableLazyLoad || e.direction !== v.Vertical)
+      return;
+    const l = t.target, r = l.scrollHeight, d = l.clientHeight, a = l.scrollTop;
+    r - d - a < B && o("loadMore", t);
+  }, m = (t) => {
+    t.code === I && (n.value = n.value === 0 ? e.data.length - 1 : n.value - 1), t.code === _ && (n.value = n.value === e.data.length - 1 ? 0 : n.value + 1), t.code === N && (e.selectable && (e.data[n.value].active = !0), o("select", { ...e.data[n.value] }));
+  };
+  return L(() => {
+    let t;
+    if (e.inputEl) {
+      const l = e.inputEl.$el ?? e.inputEl;
+      H.includes(l.tagName) ? t = l : t = l.querySelector("textarea") || l.querySelector("input") || document;
+    } else
+      t = document;
+    e.enableShortKey && t.addEventListener("keydown", m);
+  }), { preSelectIndex: n, onItemClick: i, onListScroll: s };
+}
+function D(e) {
+  return { listClasses: p(() => ({
+    "mc-list": !0,
+    "mc-list-horizontal": e.direction === v.Horizontal,
+    "mc-list-nowrap": e.direction === v.Horizontal && !e.autoWrap
+  })) };
+}
+const K = ["onClick"], U = /* @__PURE__ */ w({
+  __name: "List",
+  props: A,
+  emits: ["select", "loadMore"],
+  setup(e, { emit: o }) {
+    const n = e, i = o, { listClasses: s } = D(n), { preSelectIndex: m, onItemClick: t, onListScroll: l } = M(n, i);
+    return (r, d) => (u(), f(
+      "div",
+      {
+        class: g(c(s)),
+        onScroll: d[0] || (d[0] = //@ts-ignore
+        (...a) => c(l) && c(l)(...a))
+      },
+      [
+        (u(!0), f(
+          b,
+          null,
+          z(r.data, (a, y) => (u(), f(
+            b,
+            { key: y },
+            [
+              r.variant === c(k).None ? h(r.$slots, "item", {
+                key: 0,
+                item: a
+              }, void 0, !0) : (u(), f("div", {
+                key: 1,
+                class: g([
+                  "mc-list-item",
+                  {
+                    "mc-list-item-disabled": a.disabled,
+                    "mc-list-item-active": a.active,
+                    "mc-list-item-pre-selection": y === c(m)
+                  },
+                  r.variant
+                ]),
+                onClick: () => c(t)(a)
+              }, [
+                h(r.$slots, "item", { item: a }, () => [
+                  C(
+                    T(a.label),
+                    1
+                    /* TEXT */
+                  )
+                ], !0)
+              ], 10, K))
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          ))),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ],
+      34
+      /* CLASS, NEED_HYDRATION */
+    ));
+  }
+}), $ = (e, o) => {
+  const n = e.__vccOpts || e;
+  for (const [i, s] of o)
+    n[i] = s;
+  return n;
+}, S = /* @__PURE__ */ $(U, [["__scopeId", "data-v-adad50a4"]]);
+S.install = (e) => {
+  e.component("McList", S);
+};
+export {
+  v as ListDirection,
+  k as ListVariant,
+  S as McList,
+  A as listProps
+};

package/Mention/index.css

@@ -0,0 +1 @@
+.mc-mention[data-v-4ce5ce76]{position:fixed;max-height:300px;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));transform-origin:0% 100%;z-index:1000}.mc-mention-fade-enter-from[data-v-4ce5ce76],.mc-mention-fade-leave-to[data-v-4ce5ce76]{opacity:.8;transform:scaleY(.8) translateY(4px)}.mc-mention-fade-enter-to[data-v-4ce5ce76],.mc-mention-fade-leave-from[data-v-4ce5ce76]{opacity:1;transform:scaleY(.9999) translateY(0)}.mc-mention-fade-enter-active[data-v-4ce5ce76]{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.mc-mention-fade-leave-active[data-v-4ce5ce76]{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}

package/Mention/index.js

@@ -0,0 +1,172 @@
+import "./index.css";
+import { ref as T, reactive as F, watch as K, nextTick as U, onMounted as G, onBeforeUnmount as J, defineComponent as Q, openBlock as C, createElementBlock as O, Fragment as X, createVNode as P, unref as A, withCtx as $, renderSlot as R, createBlock as Y, Teleport as Z, Transition as ee, normalizeClass as te, normalizeStyle as ne, createCommentVNode as oe } from "vue";
+import { PopperTrigger as re } from "@matechat/core/PopperTrigger";
+import { computePosition as ie, offset as le } from "@floating-ui/dom";
+import { debounce as se, isObject as ae } from "lodash-es";
+const ce = {
+  modelValue: {
+    type: Boolean,
+    default: !1
+  },
+  prefix: {
+    type: Array,
+    default: () => []
+  },
+  fitHostWidth: {
+    type: Boolean,
+    default: !0
+  },
+  menuClass: {
+    type: String
+  }
+}, ue = ["update:modelValue", "searchChange", "toggleChange"], M = " ", de = "ArrowLeft", fe = "ArrowRight", me = "Escape";
+function pe(r, l) {
+  const s = T(), t = T(), a = T(), c = F({ top: "0px", left: "0px", width: "" });
+  let o, i, v, w, h = "", y, d;
+  const E = async () => {
+    if (!t.value || !a.value)
+      return;
+    const { x: e, y: n } = await ie(t.value, a.value, {
+      strategy: "fixed",
+      placement: "top-start",
+      middleware: [le(4)]
+    });
+    c.top = `${n}px`, c.left = `${e}px`;
+  }, D = () => {
+    const { width: e } = t.value.getBoundingClientRect();
+    c.width = `${e}px`, E();
+  }, W = () => {
+    r.fitHostWidth && typeof window < "u" && t.value && (d = new window.ResizeObserver(D), d.observe(t.value));
+  }, _ = () => {
+    t.value && (d == null || d.unobserve(t.value));
+  };
+  K(
+    () => r.modelValue,
+    (e, n) => {
+      e ? (U(E), W(), typeof window < "u" && window.addEventListener("scroll", x, !0)) : (_(), typeof window < "u" && window.removeEventListener("scroll", x, !0)), n !== void 0 && l("toggleChange", e);
+    },
+    { immediate: !0 }
+  );
+  const L = () => {
+    i = null, v = -1, w = -1, h = "";
+  }, f = (e) => {
+    l("update:modelValue", e);
+  }, q = () => {
+    if (!o)
+      return;
+    const e = o.value.replace(/[\r\n]/g, M) || "", n = o.selectionStart;
+    if (!e.trim() || !n) {
+      L();
+      return;
+    }
+    for (let u = 0; u < r.prefix.length; u++) {
+      const m = r.prefix[u];
+      let p = "", I = !1;
+      if (typeof m == "string")
+        p = m;
+      else if (ae(m))
+        p = m.key, I = !!m.onlyInputStart;
+      else
+        continue;
+      const g = e.lastIndexOf(p, n), N = e.lastIndexOf(M, n), S = e.substring(g, n), j = S.charAt(S.length - 1);
+      if (g < 0 || g > 0 && I || g < N || j === M)
+        L();
+      else {
+        i = p, v = g, w = n, h = S.slice(p.length);
+        return;
+      }
+    }
+  }, k = () => {
+    if (q(), !i) {
+      f(!1);
+      return;
+    }
+    l("searchChange", { value: h, trigger: i, triggerIndex: v, cursorIndex: w }), f(!0);
+  }, V = se(k, 300), b = (e) => {
+    (e.code === de || e.code === fe) && (y = setTimeout(() => {
+      k(), y && (y = void 0, clearTimeout(y));
+    })), e.code === me && f(!1);
+  }, B = (e) => {
+    var n, u;
+    r.modelValue ? (n = t.value) != null && n.contains(e.target) || f(!1) : (u = t.value) != null && u.contains(e.target) && k();
+  };
+  function x(e) {
+    const n = e.target;
+    n != null && n.contains(t.value) && E();
+  }
+  const H = () => {
+    t.value && (o = t.value.querySelector("textarea") || t.value.querySelector("input"), o && (o.addEventListener("input", V), o.addEventListener("keydown", b))), document.addEventListener("click", B);
+  };
+  return G(() => {
+    const e = s.value.triggerEl;
+    t.value = e.$el ?? e, H();
+  }), J(() => {
+    f(!1), o == null || o.removeEventListener("input", V), o == null || o.removeEventListener("keydown", b), document.removeEventListener("click", B), typeof window < "u" && window.removeEventListener("scroll", x, !0), _();
+  }), { popperTriggerEl: s, overlayEl: a, overlayStyle: c };
+}
+const ge = /* @__PURE__ */ Q({
+  __name: "Mention",
+  props: ce,
+  emits: ue,
+  setup(r, { emit: l }) {
+    const s = r, t = l, { popperTriggerEl: a, overlayEl: c, overlayStyle: o } = pe(s, t);
+    return (i, v) => (C(), O(
+      X,
+      null,
+      [
+        P(
+          A(re),
+          {
+            ref_key: "popperTriggerEl",
+            ref: a
+          },
+          {
+            default: $(() => [
+              R(i.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+            /* FORWARDED */
+          },
+          512
+          /* NEED_PATCH */
+        ),
+        (C(), Y(Z, { to: "body" }, [
+          P(ee, { name: "mc-mention-fade" }, {
+            default: $(() => [
+              i.modelValue ? (C(), O(
+                "div",
+                {
+                  key: 0,
+                  ref_key: "overlayEl",
+                  ref: c,
+                  class: te(["mc-mention", i.menuClass]),
+                  style: ne(A(o))
+                },
+                [
+                  R(i.$slots, "menu", {}, void 0, !0)
+                ],
+                6
+                /* CLASS, STYLE */
+              )) : oe("v-if", !0)
+            ]),
+            _: 3
+            /* FORWARDED */
+          })
+        ]))
+      ],
+      64
+      /* STABLE_FRAGMENT */
+    ));
+  }
+}), ve = (r, l) => {
+  const s = r.__vccOpts || r;
+  for (const [t, a] of l)
+    s[t] = a;
+  return s;
+}, z = /* @__PURE__ */ ve(ge, [["__scopeId", "data-v-4ce5ce76"]]);
+z.install = (r) => {
+  r.component("McMention", z);
+};
+export {
+  z as McMention
+};

package/PopperTrigger/index.js

@@ -0,0 +1,48 @@
+import { Comment as s, Text as a, Fragment as m, h as g, defineComponent as h, ref as v, withDirectives as C, cloneVNode as y } from "vue";
+import { isObject as x } from "@vue/shared";
+function p(e) {
+  return g("span", {}, e);
+}
+function c(e) {
+  for (const t of e) {
+    if (x(t)) {
+      if (t.type === s)
+        continue;
+      return t.type === "svg" || t.type === a ? p(t) : t.type === m ? c(t.children) : t;
+    }
+    return p(t);
+  }
+  return null;
+}
+const F = /* @__PURE__ */ h({
+  setup(e, t) {
+    const {
+      slots: r,
+      attrs: i,
+      expose: d
+    } = t, n = v();
+    return d({
+      triggerEl: n
+    }), () => {
+      var f;
+      const o = (f = r.default) == null ? void 0 : f.call(r, i);
+      if (!o)
+        return null;
+      const l = c(o);
+      return l ? C(y(l, i), [[{
+        mounted(u) {
+          n.value = u;
+        },
+        updated(u) {
+          n.value = u;
+        },
+        unmounted() {
+          n.value = null;
+        }
+      }]]) : null;
+    };
+  }
+});
+export {
+  F as PopperTrigger
+};

package/Prompt/index.css

@@ -0,0 +1 @@
+.mc-prompt-item[data-v-5f016595]{display:flex;gap:8px}.mc-prompt-item .mc-prompt-item-icon.no-description[data-v-5f016595]{display:flex;align-items:center}.mc-prompt-item .mc-prompt-item-content[data-v-5f016595]{display:flex;flex-direction:column;gap:4px}.mc-prompt-item .mc-prompt-item-content .mc-prompt-item-label[data-v-5f016595]{font-weight:700}.mc-prompt-item .mc-prompt-item-content .mc-prompt-item-description[data-v-5f016595]{color:var(--devui-aide-text, #71757f)}

package/Prompt/index.js

@@ -0,0 +1,110 @@
+import "./index.css";
+import { defineComponent as y, openBlock as r, createElementBlock as s, createElementVNode as P, normalizeClass as h, createBlock as g, unref as C, normalizeProps as b, mergeProps as I, createCommentVNode as c, toDisplayString as v, createVNode as u, withCtx as V } from "vue";
+import { ListDirection as B, ListVariant as L, McList as M } from "@matechat/core/List";
+import { Icon as N } from "vue-devui/icon";
+import "vue-devui/icon/style.css";
+const S = {
+  direction: {
+    type: String,
+    default: B.Vertical
+  },
+  list: {
+    type: Array,
+    default: () => []
+  },
+  variant: {
+    type: String,
+    default: L.Filled
+  }
+}, $ = {
+  prompt: {
+    type: Object
+  }
+}, z = { class: "mc-prompt-item" }, D = {
+  key: 0,
+  class: "mc-prompt-item-content"
+}, E = {
+  key: 0,
+  class: "mc-prompt-item-label"
+}, O = {
+  key: 1,
+  class: "mc-prompt-item-description"
+}, j = /* @__PURE__ */ y({
+  __name: "PromptItem",
+  props: $,
+  setup(o) {
+    return (t, p) => {
+      var e, i, m, n, a, l, d, _, f;
+      return r(), s("div", z, [
+        P(
+          "div",
+          {
+            class: h(["mc-prompt-item-icon", { "no-description": !((e = t.prompt) != null && e.desc) }])
+          },
+          [
+            (i = t.prompt) != null && i.iconConfig ? (r(), g(
+              C(N),
+              b(I({ key: 0 }, (m = t.prompt) == null ? void 0 : m.iconConfig)),
+              null,
+              16
+              /* FULL_PROPS */
+            )) : c("v-if", !0)
+          ],
+          2
+          /* CLASS */
+        ),
+        (n = t.prompt) != null && n.label || (a = t.prompt) != null && a.desc ? (r(), s("div", D, [
+          (l = t.prompt) != null && l.label ? (r(), s(
+            "div",
+            E,
+            v((d = t.prompt) == null ? void 0 : d.label),
+            1
+            /* TEXT */
+          )) : c("v-if", !0),
+          (_ = t.prompt) != null && _.desc ? (r(), s(
+            "div",
+            O,
+            v((f = t.prompt) == null ? void 0 : f.desc),
+            1
+            /* TEXT */
+          )) : c("v-if", !0)
+        ])) : c("v-if", !0)
+      ]);
+    };
+  }
+}), w = (o, t) => {
+  const p = o.__vccOpts || o;
+  for (const [e, i] of t)
+    p[e] = i;
+  return p;
+}, A = /* @__PURE__ */ w(j, [["__scopeId", "data-v-5f016595"]]), F = { class: "mc-prompt" }, k = /* @__PURE__ */ y({
+  __name: "Prompt",
+  props: S,
+  emits: ["itemClick"],
+  setup(o, { emit: t }) {
+    const p = t, e = o;
+    return (i, m) => (r(), s("div", F, [
+      u(C(M), {
+        data: e.list,
+        direction: e.direction,
+        variant: e.variant,
+        selectable: !1
+      }, {
+        item: V(({ item: n }) => [
+          u(A, {
+            prompt: n,
+            onClick: (a) => p("itemClick", n)
+          }, null, 8, ["prompt", "onClick"])
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["data", "direction", "variant"])
+    ]));
+  }
+});
+k.install = (o) => {
+  o.component("McPrompt", k);
+};
+export {
+  k as McPrompt
+};

package/README.md

@@ -4,7 +4,7 @@
   </a>
 </p>
 <h1 align="center">MateChat</h1>
-<p align="center">前端智能化场景解决方案UI库，轻松构建你的AI应用。已服务于内部多个应用智能化改造，并助力InsCode AI IDE智能化助手搭建。</p>
+<p align="center">前端智能化场景解决方案UI库，轻松构建你的AI应用。已服务于华为内部多个应用智能化改造，并助力CodeArts、InsCode AI IDE等智能化助手搭建。</p>
 
 ![example](https://matechat.gitcode.com/example1.png)
 
@@ -34,20 +34,17 @@ $ npm i vue-devui @matechat/core @devui-design/icons
 
 ### 2. 引入
 
-在`main.ts`文件中引入`matechat`, `vue-devui` 以及 `图标库` 样式文件
+在`main.ts`文件中引入`matechat`, `图标库` 样式文件
 
 ```ts
 import { createApp } from 'vue';
 import App from './App.vue';
 
-// matechat基于vue-devui组件
-import DevUI from 'vue-devui';
 import MateChat from '@matechat/core';
 
-import 'vue-devui/style.css';
 import '@devui-design/icons/icomoon/devui-icon.css';
 
-createApp(App).use(DevUI).use(MateChat).mount('#app');
+createApp(App).use(MateChat).mount('#app');
 ```
 
 ### 3. 使用
@@ -56,7 +53,7 @@ createApp(App).use(DevUI).use(MateChat).mount('#app');
 
 ```html
 <template>
-  <McBubble :avatarConfig="{ name: 'matechat' }">
+  <McBubble :content="'Hello, MateChat'" :avatarConfig="{ name: 'matechat' }"></McBubble>
 </template>
 ```
 
@@ -109,16 +106,13 @@ createApp(App).use(DevUI).use(MateChat).mount('#app');
         style="flex: 1"
         @itemClick="onSubmit($event.label)"
       ></McPrompt>
-      <d-button
+      <Button
         style="margin-left: auto"
         icon="add"
         shape="circle"
         title="新建对话"
         size="sm"
-        @click="
-          startPage = true;
-          messages = [];
-        "
+        @click="newConversation"
       />
     </div>
     <McLayoutSender>
@@ -134,7 +128,7 @@ createApp(App).use(DevUI).use(MateChat).mount('#app');
               <span class="input-foot-maxlength">{{ inputValue.length }}/2000</span>
             </div>
             <div class="input-foot-right">
-              <d-button icon="op-clearup" shape="round" :disabled="!inputValue" @click="inputValue = ''">清空输入</d-button>
+              <Button icon="op-clearup" shape="round" :disabled="!inputValue" @click="inputValue = ''">清空输入</Button>
             </div>
           </div>
         </template>
@@ -145,6 +139,8 @@ createApp(App).use(DevUI).use(MateChat).mount('#app');
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import Button from 'vue-devui/button';
+import 'vue-devui/button/style.css';
 
 const description = [
   'MateChat 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。',
@@ -205,7 +201,13 @@ const messages = ref<any[]>([
   },
 ]);
 
+const newConversation = () => {
+  startPage.value = true;
+  messages.value = [];
+}
+
 const onSubmit = (evt) => {
+  inputValue.value='';
   startPage.value = false;
   // 用户发送消息
   messages.value.push({
@@ -225,11 +227,13 @@ const onSubmit = (evt) => {
 <style>
 .container {
   width: 1000px;
-  margin: 0 auto;
-  height: 100vh;
+  margin: 20px auto;
+  height: calc(100vh - 40px);
   padding: 20px;
   gap: 8px;
   background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 16px;
 }
 
 .content-container {
@@ -308,7 +312,7 @@ client.value = new OpenAI({
 
 const fetchData = (ques) => {
   const completion = await client.value!.chat.completions.create({
-    model: 'my-model', //
+    model: 'my-model', // 替换为自己的model名称
     messages: [
       { role: 'user', content: ques },
     ],
@@ -325,8 +329,10 @@ const fetchData = (ques) => {
 那么参考以上步骤，【快速开始】中示例可调整下代码。
 
 将以下代码：
+
 ```ts
 const onSubmit = (evt) => {
+  inputValue.value = '';
   startPage.value = false;
   // 用户发送消息
   messages.value.push({
@@ -340,9 +346,11 @@ const onSubmit = (evt) => {
       content: evt,
     });
   }, 200);
+};
 ```
 
 修改为：
+
 ```ts
 import OpenAI from 'openai';
 
@@ -355,13 +363,15 @@ client.value = new OpenAI({
 });
 
 const onSubmit = (evt) => {
+  inputValue.value = '';
+  startPage.value = false;
   // 用户发送消息
   messages.value.push({
     from: 'user',
     content: evt,
     avatarConfig: { name: 'user' },
   });
-  
+
   fetchData(evt);
 };
 
@@ -374,7 +384,7 @@ const fetchData = async (ques) => {
     loading: true,
   });
   const completion = await client.value!.chat.completions.create({
-    model: 'my-model', //
+    model: 'my-model', // 替换为自己的model名称
     messages: [{ role: 'user', content: ques }],
     stream: true, // 为 true 则开启接口的流式返回
   });
@@ -387,7 +397,8 @@ const fetchData = async (ques) => {
   }
 };
 ```
-完成模型API地址与APIKey填充后，即拥有了一个对接大模型的简单应用。
+
+完成模型API地址与APIKey填充后，即拥有了一个对接大模型的简单应用。如果你想要参考更完整的页面示例，可参考[演示场景](https://matechat.gitcode.com/playground/playground.html)。
 
 ## 📝 提出意见&建议
 
@@ -412,6 +423,8 @@ MateChat 在不断的演进中，你可在这里了解我们的计划：[MateCha
 
 ## 谁在使用
 
+[CodeArts盘古助手](https://www.huaweicloud.com/product/codeartside/snap.html)
+
 [InsCode AI IDE](https://inscode.csdn.net/)
 
 ## License
@@ -420,4 +433,4 @@ MateChat 在不断的演进中，你可在这里了解我们的计划：[MateCha
 
 ## 联系方式
 
-欢迎加入我们的开源社区，关注DevUI微信公众号：DevUI
+欢迎加入我们的开源社区，关注DevUI微信公众号：DevUI

package/index.d.ts

@@ -2,6 +2,5 @@ import type { App } from 'vue';
   declare function install(app: App): void
   declare const _default: {
       install: typeof install;
-      version: string;
   };
   export default _default;