@opentiny/genui-sdk-vue 1.3.0-alpha.1 → 1.3.0-alpha.4

package/README.md

@@ -11,13 +11,20 @@ A Vue 3 component library for enhanced LLM display and interaction. Stream AI-ge
 
 ## Usage
 
+Install together with core and the Vue materials package (the renderer is bundled in the vue package):
+
+```bash
+pnpm add @opentiny/genui-sdk-vue @opentiny/genui-sdk-core @opentiny/genui-sdk-materials-vue-opentiny-vue
+```
+
 ```vue
 <script setup>
 import { GenuiChat, GenuiConfigProvider } from '@opentiny/genui-sdk-vue';
+import { materials } from '@opentiny/genui-sdk-materials-vue-opentiny-vue/materials';
 </script>
 
 <template>
-  <GenuiConfigProvider theme="dark">
+  <GenuiConfigProvider theme="dark" :materials="materials">
     <GenuiChat
       url="/api/chat"
       model="deepseek-chat"
@@ -25,6 +32,7 @@ import { GenuiChat, GenuiConfigProvider } from '@opentiny/genui-sdk-vue';
   </GenuiConfigProvider>
 </template>
 ```
+
 ## Documentation
 
 * [quick-start](https://docs.opentiny.design/genui-sdk/guide/quick-start)
@@ -34,4 +42,4 @@ import { GenuiChat, GenuiConfigProvider } from '@opentiny/genui-sdk-vue';
 
 * [GenuiRender](https://docs.opentiny.design/genui-sdk/components/renderer)
 * [GenuiChat](https://docs.opentiny.design/genui-sdk/components/chat)
-* [GenuiConfigProvider](https://docs.opentiny.design/genui-sdk/components/config-provider)
+* [GenuiConfigProvider](https://docs.opentiny.design/genui-sdk/components/config-provider)

package/dist/ConfigProvider-BzxW9L3f.js

@@ -0,0 +1,95 @@
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".tg-config-provider[data-v-da2763bd]{--tr-sender-bg-color: var(--tr-container-bg-default);--tr-sender-text-color: var(--tr-text-primary);--tr-sender-action-buttons-icon-color: var(--tr-text-secondary);--tr-sender-action-buttons-send-bg-color: var(--tr-color-primary);height:100%}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { ref as v, readonly as y, defineComponent as P, provide as n, computed as s, watch as d, onMounted as I, createBlock as N, openBlock as E, unref as f, withCtx as p, createVNode as G, normalizeProps as b, guardReactiveProps as A, renderSlot as L } from "vue";
+import { TinyConfigProvider as R } from "@opentiny/vue";
+import { ThemeProvider as $ } from "@opentiny/tiny-robot";
+import x, { tinyOldTheme as O, tinyDarkTheme as U } from "@opentiny/vue-theme/theme-tool";
+import { G as z, u as B, a as Q, b as S, _ as j } from "./injection-tokens-CuDQs1ne.js";
+const g = () => typeof window < "u" && window.matchMedia, T = () => g() && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", _ = v(T());
+let c = null;
+const D = () => {
+  _.value = T();
+}, F = () => {
+  g() && !c && (c = window.matchMedia("(prefers-color-scheme: dark)"), c.addEventListener("change", D));
+}, V = () => (F(), {
+  theme: y(_)
+}), W = /* @__PURE__ */ P({
+  __name: "ConfigProvider",
+  props: {
+    theme: {},
+    id: { default: "tiny-genui-config-provider" },
+    locale: { default: "zh_CN" },
+    i18n: {},
+    materials: {}
+  },
+  setup(M) {
+    const e = M, a = B();
+    n(z, a);
+    const l = (t) => {
+      const r = structuredClone(t);
+      return r.css = r.css.replaceAll(":host", `#${e.id}`).replaceAll(":root", `#${e.id}`), r;
+    }, m = {
+      dark: l(U),
+      lite: l(O),
+      light: { css: " " }
+    }, w = new x(), { theme: C } = V(), i = s(() => e.theme === "auto" ? C.value : e.theme), o = s(() => ({
+      theme: i.value,
+      id: e.id
+    }));
+    n(Q, o);
+    const u = {};
+    d(() => e.materials, (t) => {
+      Object.assign(u, t);
+    }, { immediate: !0 }), n(
+      S,
+      u
+    ), d(
+      () => [e.locale, e.i18n],
+      () => {
+        e.locale && e.locale !== a.locale.value && a.setLocale(e.locale), e.i18n && a.mergeMessages(e.i18n);
+      },
+      { immediate: !0 }
+    ), d(
+      () => i.value,
+      (t) => {
+        const r = m[t] || m.light;
+        w.changeTheme(r);
+      },
+      {
+        immediate: !0
+      }
+    );
+    const h = v();
+    I(() => {
+      var t;
+      (t = h.value) == null || t.$el.classList.remove("tiny-config-provider");
+    });
+    const k = s(() => {
+      var r;
+      const t = {
+        colorMode: i.value === "dark" ? "dark" : "light"
+      };
+      return (r = o == null ? void 0 : o.value) != null && r.id && (t.targetElement = "#" + o.value.id), t;
+    });
+    return (t, r) => (E(), N(f(R), {
+      ref_key: "providerRef",
+      ref: h,
+      class: "tg-config-provider",
+      id: e.id
+    }, {
+      default: p(() => [
+        G(f($), b(A(k.value)), {
+          default: p(() => [
+            L(t.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 16)
+      ]),
+      _: 3
+    }, 8, ["id"]));
+  }
+}), Y = /* @__PURE__ */ j(W, [["__scopeId", "data-v-da2763bd"]]);
+export {
+  Y as C,
+  V as u
+};
+//# sourceMappingURL=ConfigProvider-BzxW9L3f.js.map

package/dist/ConfigProvider-BzxW9L3f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigProvider-BzxW9L3f.js","sources":["../src/config-provider/use-media-theme.ts","../src/config-provider/ConfigProvider.vue"],"sourcesContent":["import { ref, readonly } from 'vue';\n\nconst hasMediaQuery = () => typeof window !== 'undefined' && window.matchMedia;\n\nconst getMediaTheme = (): 'light' | 'dark' => {\n  if (hasMediaQuery()) {\n    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n  }\n  return 'light';\n};\n\nconst theme = ref<'light' | 'dark'>(getMediaTheme());\nlet mediaQuery: MediaQueryList | null = null;\n\nconst handleThemeChange = () => {\n  theme.value = getMediaTheme();\n};\n\nconst startWatchMediaTheme = () => {\n  if (hasMediaQuery() && !mediaQuery) {\n    mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    mediaQuery.addEventListener('change', handleThemeChange);\n  }\n};\n\nexport const useMediaTheme = () => {\n  startWatchMediaTheme();\n  return {\n    theme: readonly(theme),\n  }\n}\n","<script setup lang=\"ts\">\nimport { TinyConfigProvider } from '@opentiny/vue';\nimport { ThemeProvider } from '@opentiny/tiny-robot';\nimport ThemeTool, { tinyDarkTheme, tinyOldTheme } from '@opentiny/vue-theme/theme-tool';\nimport { watch, provide, computed, onMounted, ref } from 'vue';\nimport type { IMaterials } from '@opentiny/genui-sdk-core';\nimport { I18nMessages, useI18n } from '../chat/i18n';\nimport { GENUI_I18N, GENUI_CONFIG, GENUI_MATERIALS } from './injection-tokens';\nimport { useMediaTheme } from './use-media-theme';\n\nexport interface ConfigProviderProps {\n  theme?: 'light' | 'dark' | 'lite' | 'auto';\n  id?: string;\n  locale?: string;\n  i18n?: I18nMessages;\n  materials?: IMaterials;\n}\n\ninterface IRobotProviderProps {\n  colorMode: 'dark' | 'light';\n  targetElement?: string;\n}\n\nconst props = withDefaults(defineProps<ConfigProviderProps>(), {\n  id: 'tiny-genui-config-provider',\n  locale: 'zh_CN',\n});\n\nconst i18n = useI18n();\nprovide(GENUI_I18N, i18n);\n\nconst transformTheme = (themeConfig: any) => {\n  const newThemeConfig = structuredClone(themeConfig);\n  newThemeConfig.css = newThemeConfig.css.replaceAll(':host', `#${props.id}`).replaceAll(':root', `#${props.id}`);\n  return newThemeConfig;\n};\n\nconst themeMap: Record<string, any> = {\n  dark: transformTheme(tinyDarkTheme),\n  lite: transformTheme(tinyOldTheme),\n  light: { css: ' ' },\n};\n\nconst themeTool = new ThemeTool();\n\nconst { theme: mediaTheme } = useMediaTheme();\n\nconst actualTheme = computed(() => {\n  if (props.theme === 'auto') {\n    return mediaTheme.value;\n  }\n  return props.theme;\n});\n\nconst genuiConfig = computed(() => {\n  return {\n    theme: actualTheme.value,\n    id: props.id,\n  };\n});\n\nprovide(GENUI_CONFIG, genuiConfig);\n\nconst internalMaterials = {};\nwatch(() => props.materials, (newVal) => {\n  Object.assign(internalMaterials, newVal);\n}, { immediate: true });\n\nprovide(\n  GENUI_MATERIALS,\n  internalMaterials,\n);\n\nwatch(\n  () => [props.locale, props.i18n] as const,\n  () => {\n    if (props.locale && props.locale !== i18n.locale.value) {\n      i18n.setLocale(props.locale);\n    }\n    props.i18n && i18n.mergeMessages(props.i18n);\n  },\n  { immediate: true },\n);\n\nwatch(\n  () => actualTheme.value,\n  (newVal) => {\n    const themeConfig = themeMap[newVal] || themeMap.light;\n    themeTool.changeTheme(themeConfig);\n  },\n  {\n    immediate: true,\n  },\n);\n\nconst providerRef = ref();\nonMounted(() => {\n  providerRef.value?.$el.classList.remove('tiny-config-provider');\n});\n\nconst robotProviderProps = computed(() => {\n  const providerProps: IRobotProviderProps = {\n    colorMode: actualTheme.value === 'dark' ? 'dark' : 'light',\n  };\n  if (genuiConfig?.value?.id) {\n    providerProps.targetElement = '#' + genuiConfig.value.id;\n  }\n  return providerProps;\n});\n</script>\n\n<template>\n  <TinyConfigProvider ref=\"providerRef\" class=\"tg-config-provider\" :id=\"props.id\">\n    <ThemeProvider v-bind=\"robotProviderProps\">\n      <slot />\n    </ThemeProvider>\n  </TinyConfigProvider>\n</template>\n\n<style scoped>\n.tg-config-provider {\n  --tr-sender-bg-color: var(--tr-container-bg-default);\n  --tr-sender-text-color: var(--tr-text-primary);\n  --tr-sender-action-buttons-icon-color: var(--tr-text-secondary);\n  --tr-sender-action-buttons-send-bg-color: var(--tr-color-primary);\n  height: 100%;\n}\n</style>\n"],"names":["hasMediaQuery","getMediaTheme","theme","ref","mediaQuery","handleThemeChange","startWatchMediaTheme","useMediaTheme","readonly","props","__props","i18n","useI18n","provide","GENUI_I18N","transformTheme","themeConfig","newThemeConfig","themeMap","tinyDarkTheme","tinyOldTheme","themeTool","ThemeTool","mediaTheme","actualTheme","computed","genuiConfig","GENUI_CONFIG","internalMaterials","watch","newVal","GENUI_MATERIALS","providerRef","onMounted","_a","robotProviderProps","providerProps","_createBlock","_unref","TinyConfigProvider","_createVNode","_renderSlot","_ctx"],"mappings":"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"}

package/dist/GenuiChatWithMaterials.vue_vue_type_script_setup_true_lang-KMItLlt0.js

@@ -0,0 +1,49 @@
+import { defineComponent as a, ref as i, provide as m, createBlock as c, openBlock as u, mergeProps as l, createSlots as f, renderList as _, withCtx as d, renderSlot as h, normalizeProps as C, guardReactiveProps as g } from "vue";
+import { materials as S } from "@opentiny/genui-sdk-materials-vue-opentiny-vue/materials";
+import { b as y } from "./injection-tokens-CuDQs1ne.js";
+import { G as k } from "./chat.types-BDffahIK.js";
+const b = /* @__PURE__ */ a({
+  __name: "GenuiChatWithMaterials",
+  props: {
+    url: {},
+    model: {},
+    temperature: {},
+    messages: {},
+    chatConfig: {},
+    requiredCompleteFieldSelectors: {},
+    customComponents: {},
+    customSnippets: {},
+    customExamples: {},
+    customActions: {},
+    rendererSlots: {},
+    thinkComponent: { type: [Object, Function] },
+    roles: {},
+    features: {},
+    customFetch: { type: Function }
+  },
+  setup(v, { expose: n }) {
+    const r = i();
+    return m(y, S), n(
+      new Proxy({}, {
+        get(o, s) {
+          const t = r.value, e = t == null ? void 0 : t[s];
+          return typeof e == "function" ? e.bind(t) : e;
+        }
+      })
+    ), (o, s) => (u(), c(k, l({
+      ref_key: "chatRef",
+      ref: r
+    }, o.$props), f({ _: 2 }, [
+      _(o.$slots, (t, e) => ({
+        name: e,
+        fn: d((p) => [
+          h(o.$slots, e, C(g(p || {})))
+        ])
+      }))
+    ]), 1040));
+  }
+});
+export {
+  b as _
+};
+//# sourceMappingURL=GenuiChatWithMaterials.vue_vue_type_script_setup_true_lang-KMItLlt0.js.map

package/dist/GenuiChatWithMaterials.vue_vue_type_script_setup_true_lang-KMItLlt0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenuiChatWithMaterials.vue_vue_type_script_setup_true_lang-KMItLlt0.js","sources":["../src/legacy-chat/GenuiChatWithMaterials.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { provide, ref } from 'vue';\nimport { materials as defaultMaterials } from '@opentiny/genui-sdk-materials-vue-opentiny-vue/materials';\nimport { GENUI_MATERIALS } from '../config-provider/injection-tokens';\nimport GenuiChat from '../chat/GenuiChat.vue';\nimport type { IChatProps } from '../chat/chat.types';\n\ndefineProps<IChatProps>();\n\nconst chatRef = ref<InstanceType<typeof GenuiChat>>();\n\nprovide(GENUI_MATERIALS, defaultMaterials);\n\ndefineExpose(\n  new Proxy({} as InstanceType<typeof GenuiChat>, {\n    get(_target, prop) {\n      const instance = chatRef.value;\n      const value = instance?.[prop as keyof typeof instance];\n      return typeof value === 'function' ? value.bind(instance) : value;\n    },\n  }),\n);\n</script>\n\n<template>\n  <GenuiChat ref=\"chatRef\" v-bind=\"$props\">\n    <template v-for=\"(_, name) in $slots\" #[name]=\"slotProps\">\n      <slot :name=\"name\" v-bind=\"slotProps || {}\" />\n    </template>\n  </GenuiChat>\n</template>\n"],"names":["chatRef","ref","provide","GENUI_MATERIALS","defaultMaterials","__expose","_target","prop","instance","value","_openBlock","_createBlock","GenuiChat","_mergeProps","$props","_createSlots","$slots","_","name","_withCtx","slotProps","_renderSlot","_ctx","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AASA,UAAMA,IAAUC,EAAA;AAEhB,WAAAC,EAAQC,GAAiBC,CAAgB,GAEzCC;AAAA,MACE,IAAI,MAAM,CAAA,GAAsC;AAAA,QAC9C,IAAIC,GAASC,GAAM;AACjB,gBAAMC,IAAWR,EAAQ,OACnBS,IAAQD,KAAA,gBAAAA,EAAWD;AACzB,iBAAO,OAAOE,KAAU,aAAaA,EAAM,KAAKD,CAAQ,IAAIC;AAAA,QAC9D;AAAA,MAAA,CACD;AAAA,IAAA,cAKDC,EAAA,GAAAC,EAIYC,GAJZC,EAIY;AAAA,eAJG;AAAA,MAAJ,KAAIb;AAAA,IAAA,GAAkBc,EAAAA,MAAM,GAAAC,EAAA,EAAA,GAAA,KAAA;AAAA,QACPC,EAAAA,QAAM,CAAlBC,GAAGC;;QACnB,IAAAC,EAAA,CAD6CC,MAAS;AAAA,UACtDC,EAA8CC,EAAA,QAAjCJ,GAAIK,EAAAC,EAAUJ,KAAS,CAAA,CAAA,CAAA,CAAA;AAAA,QAAA;;;;;"}