@matechat/core 1.0.0 → 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 :conent="'Hello, MateChat'" :avatarConfig="{ name: 'matechat' }"></McBubble>
+  <McBubble :content="'Hello, MateChat'" :avatarConfig="{ name: 'matechat' }"></McBubble>
 </template>
 ```
 
@@ -109,7 +106,7 @@ 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"
@@ -131,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>
@@ -142,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 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。',
@@ -228,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 {
@@ -422,6 +423,8 @@ MateChat 在不断的演进中，你可在这里了解我们的计划：[MateCha
 
 ## 谁在使用
 
+[CodeArts盘古助手](https://www.huaweicloud.com/product/codeartside/snap.html)
+
 [InsCode AI IDE](https://inscode.csdn.net/)
 
 ## License

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;