@opentiny/genui-sdk-vue 1.2.1 → 1.3.0-alpha.3

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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"}