@asgard-js/react 0.0.1 → 0.0.3-8.canary-1

package/src/models/bot-provider.ts

@@ -0,0 +1,108 @@
+import { ClientConfig } from '@asgard-js/core';
+import { annotationSelectorFromBotProviderMetadata } from '../utils/selectors';
+
+export type BotProviderMetadataResponse = {
+  name: string;
+  namespace: string;
+  uid: string;
+  resourceVersion: string;
+  generation: number;
+  creationTimestamp: string;
+  labels: Record<string, string>;
+  annotations: Record<string, string>;
+  managedFields: Array<{
+    manager: string;
+    operation: string;
+    apiVersion: string;
+    time: string;
+    fieldsType: string;
+    fieldsV1: Record<string, unknown>;
+    subresource: string;
+  }>;
+};
+
+const stubGetAsgardBotProviderMetadata =
+  async (): Promise<BotProviderMetadataResponse> => {
+    return {
+      name: '',
+      namespace: '',
+      uid: '',
+      resourceVersion: '0',
+      generation: 0,
+      creationTimestamp: new Date().toISOString(),
+      labels: {},
+      annotations: {
+        'asgard-ai.com/additional-annotation': JSON.stringify({
+          embedConfig: {
+            theme: {
+              chatbot: {},
+              botMessage: {},
+              userMessage: {},
+            },
+          },
+        }),
+      },
+      managedFields: [],
+    };
+  };
+
+const stubGetAnnotations = async (): Promise<Record<string, unknown>> => {
+  const metadata = await stubGetAsgardBotProviderMetadata();
+
+  return annotationSelectorFromBotProviderMetadata(metadata);
+};
+
+export const getBotProviderModels = (
+  config: ClientConfig
+): {
+  getAsgardBotProviderMetadata: () => Promise<BotProviderMetadataResponse>;
+  getAnnotations: () => Promise<Record<string, unknown>>;
+} => {
+  if (!config.botProviderEndpoint) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      '[getBotProviderModels] botProviderEndpoint is not defined in config. ' +
+        'Bot provider features will be disabled. Consider providing botProviderEndpoint for full functionality.'
+    );
+
+    return {
+      getAsgardBotProviderMetadata: stubGetAsgardBotProviderMetadata,
+      getAnnotations: stubGetAnnotations,
+    };
+  }
+
+  const headers: Record<string, string> = {};
+
+  if (config.apiKey) {
+    headers['x-api-key'] = config.apiKey;
+  }
+
+  async function getAsgardBotProviderMetadata(): Promise<BotProviderMetadataResponse> {
+    const response = await fetch(`${config.botProviderEndpoint}/metadata`, {
+      method: 'GET',
+      headers: {
+        ...headers,
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch metadata: ${response.statusText}`);
+    }
+
+    const json: { data: BotProviderMetadataResponse } = await response.json();
+
+    return json.data;
+  }
+
+  async function getAnnotations(): Promise<Record<string, unknown>> {
+    const metadata = await getAsgardBotProviderMetadata();
+
+    return annotationSelectorFromBotProviderMetadata(metadata);
+  }
+
+  return {
+    getAsgardBotProviderMetadata,
+    getAnnotations,
+  };
+};

package/src/styles/_index.scss

@@ -0,0 +1 @@
+@forward './styles';

package/src/styles/_styles.scss

@@ -0,0 +1,11 @@
+@use './colors';
+@use './palette';
+@use './radius';
+@use './spacing';
+
+@mixin generate() {
+  @include colors.generate();
+  @include palette.generate();
+  @include radius.generate();
+  @include spacing.generate();
+}

package/src/styles/colors/_colors.scss

@@ -0,0 +1,10 @@
+@use './variables';
+@use '../utils';
+
+$prefix: asg-color;
+
+@mixin generate($map: variables.$colors-map) {
+  @each $color, $list in $map {
+    @include utils.generate-vars($prefix + '-' + $color, $list);
+  }
+}

package/src/styles/colors/_index.scss

@@ -0,0 +1 @@
+@forward './colors';

package/src/styles/colors/_variables.scss

@@ -0,0 +1,72 @@
+$blue-colors: (
+  #edf0fd,
+  #d3dbfa,
+  #b0bef6,
+  #6882ef,
+  #8b9ff2,
+  #4767eb,
+  #3c58c8,
+  #3249a7,
+  #283b86,
+  #202e6a
+);
+
+$orange-colors: (
+  #ffeded,
+  #ffd4d5,
+  #ffb2b3,
+  #ff8f90,
+  #ff6d6f,
+  #ff4d4f,
+  #d94143,
+  #b53738,
+  #912c2d,
+  #732324
+);
+
+$green-colors: (
+  #eef9e8,
+  #d5f1c8,
+  #b5e69d,
+  #92da6f,
+  #71cf43,
+  #52c41a,
+  #46a716,
+  #3a8b12,
+  #2f700f,
+  #25580c,
+);
+
+$yellow-colors: (
+  #fef7eb,
+  #fdebcf,
+  #fcdba9,
+  #facb82,
+  #f8bb5c,
+  #f7ac38,
+  #d29230,
+  #af7a28,
+  #8d6220,
+  #6f4d19,
+);
+
+$grey-colors: (
+  #f3f3f3,
+  #e2e2e2,
+  #cbcbcb,
+  #b2b2b2,
+  #9b9b9b,
+  #585858,
+  #717171,
+  #5e5e5e,
+  #4c4c4c,
+  #3c3c3c
+);
+
+$colors-map: (
+  blue: $blue-colors,
+  orange: $orange-colors,
+  green: $green-colors,
+  yellow: $yellow-colors,
+  grey: $grey-colors
+);

package/src/styles/palette/_index.scss

@@ -0,0 +1 @@
+@forward './palette';

package/src/styles/palette/_palette.scss

@@ -0,0 +1,42 @@
+@use 'sass:map';
+@use './variables';
+
+$prefix: asg-color;
+
+@mixin generate-state-colors($map: variables.$state-colors-map) {
+  @each $state, $colors-map in $map {
+    
+    $main-color: map.get($colors-map, main);
+    $light-color: map.get($colors-map, light);
+    $dark-color: map.get($colors-map, dark);
+    
+    --#{$prefix}-#{$state}: #{$main-color};
+    --#{$prefix}-#{$state}-light: #{$light-color};
+    --#{$prefix}-#{$state}-dark: #{$dark-color};
+    --#{$prefix}-#{$state}-on-#{$state}: #ffffff;
+    --#{$prefix}-#{$state}-hover-bg: #{rgba($light-color, 0.15)};
+    --#{$prefix}-#{$state}-selected-bg: #{rgba($main-color, 0.20)};
+  }
+}
+
+@mixin generate() {
+  @include generate-state-colors();
+
+  --#{$prefix}-action-active: #ffffff;
+  --#{$prefix}-action-inactive: #8c8c8c;
+  --#{$prefix}-action-disabled: #595959;
+  --#{$prefix}-action-disabled-bg: #393939;
+
+  --#{$prefix}-text-primary: #ffffff;
+  --#{$prefix}-text-secondary: #8c8c8c;
+  --#{$prefix}-text-disabled: #595959;
+  --#{$prefix}-text-placeholder: #8c8c8c;
+
+  --#{$prefix}-bg: #141414;
+  --#{$prefix}-surface: #1f1f1f;
+  --#{$prefix}-divider: #333333;
+  --#{$prefix}-border: #434343;
+
+  --#{$prefix}-overlay-dark: #{rgba(#000000, 0.5)};
+  --#{$prefix}-overlay-light: #{rgba(#1f1f1f, 0.9)};
+}

package/src/styles/palette/_variables.scss

@@ -0,0 +1,40 @@
+@use 'sass:list';
+@use '../colors/variables';
+
+$primary-colors: (
+  main: list.nth(variables.$blue-colors, 6),
+  light: list.nth(variables.$blue-colors, 5),
+  dark: list.nth(variables.$blue-colors, 8),
+);
+
+$secondary-colors: (
+  main: list.nth(variables.$grey-colors, 6),
+  light: list.nth(variables.$grey-colors, 4),
+  dark: list.nth(variables.$grey-colors, 9),
+);
+
+$error-colors: (
+  main: list.nth(variables.$orange-colors, 6),
+  light: list.nth(variables.$orange-colors, 5),
+  dark: list.nth(variables.$orange-colors, 7),
+);
+
+$warning-colors: (
+  main: list.nth(variables.$yellow-colors, 6),
+  light: list.nth(variables.$yellow-colors, 5),
+  dark: list.nth(variables.$yellow-colors, 8),
+);
+
+$success-colors: (
+  main: list.nth(variables.$green-colors, 6),
+  light: list.nth(variables.$green-colors, 5),
+  dark: list.nth(variables.$green-colors, 8),
+);
+
+$state-colors-map: (
+  primary: $primary-colors,
+  secondary: $secondary-colors,
+  error: $error-colors,
+  warning: $warning-colors,
+  success: $success-colors,
+);

package/src/styles/radius/_index.scss

@@ -0,0 +1 @@
+@forward './radius';

package/src/styles/radius/_radius.scss

@@ -0,0 +1,8 @@
+@use './variables';
+@use '../utils';
+
+$prefix: asg-radius;
+
+@mixin generate($map: variables.$radius-map) {
+  @include utils.generate-vars($prefix, $map);
+}

package/src/styles/radius/_variables.scss

@@ -0,0 +1,12 @@
+$radius-map: (
+  none: 0px,
+  xxs: 2px,
+  xs: 4px,
+  s: 6px,
+  md: 8px,
+  lg: 10px,
+  xl: 12px,
+  2xl: 16px,
+  3xl: 20px,
+  4xl: 24px
+);

package/src/styles/spacing/_index.scss

@@ -0,0 +1 @@
+@forward './spacing';

package/src/styles/spacing/_spacing.scss

@@ -0,0 +1,8 @@
+@use './variables';
+@use '../utils';
+
+$prefix: asg-spacing;
+
+@mixin generate($list: variables.$spacing-list) {
+  @include utils.generate-vars($prefix, $list);
+}

package/src/styles/spacing/_variables.scss

@@ -0,0 +1,13 @@
+$spacing-list: (
+  4px,
+  8px,
+  12px,
+  16px,
+  24px,
+  32px,
+  40px,
+  48px,
+  64px,
+  96px,
+  160px
+);

package/src/styles/utils/_index.scss

@@ -0,0 +1 @@
+@forward './map';

package/src/styles/utils/_map.scss

@@ -0,0 +1,22 @@
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:map';
+
+@mixin generate-vars($prefix, $data) {
+  $map: null;
+
+  @if meta.type-of($data) == "list" {
+    $map: ();
+    @for $i from 1 through list.length($data) {
+      $map: map.merge($map, ($i: list.nth($data, $i)));
+    }
+  } @else if meta.type-of($data) == "map" {
+    $map: $data;
+  } @else {
+    @warn "generate-vars: The provided data is neither a list nor a map. (type: #{meta.type-of($data)})";
+  }
+
+  @each $index, $item in $map {
+    --#{$prefix}-#{$index}: #{$item};
+  }
+}

package/src/test-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/src/utils/deep-merge.ts

@@ -0,0 +1,26 @@
+export function isObject(item: unknown): item is Record<string, unknown> {
+  return item !== null && typeof item === 'object' && !Array.isArray(item);
+}
+
+export function deepMerge<T extends Record<string, unknown>, U extends Record<string, unknown>>(
+  target: T,
+  source: U
+): T & U {
+  const output = { ...target } as T & U;
+
+  if (!source) return output;
+
+  for (const [key, value] of Object.entries(source)) {
+    if (!isObject(value)) {
+      (output as Record<string, unknown>)[key] = value;
+      continue;
+    }
+
+    (output as Record<string, unknown>)[key] = deepMerge(
+      isObject((output as Record<string, unknown>)[key]) ? (output as Record<string, unknown>)[key] as Record<string, unknown> : {}, 
+      value as Record<string, unknown>
+    );
+  }
+
+  return output;
+}

package/src/utils/extractors.ts

@@ -0,0 +1,20 @@
+export function extractRefs(obj: unknown): unknown[] {
+  const refs: unknown[] = [];
+
+  function traverse(o: unknown): void {
+    if (o && typeof o === 'object') {
+      if (Array.isArray(o)) {
+        for (const item of o) traverse(item);
+      } else {
+        for (const key of Object.keys(o))
+          traverse((o as Record<string, unknown>)[key]);
+      }
+    } else {
+      refs.push(o);
+    }
+  }
+
+  traverse(obj);
+
+  return refs;
+}

package/src/utils/format-time.ts

@@ -0,0 +1,8 @@
+export function formatTime(time: Date): string {
+  return time.toLocaleTimeString('zh-TW', {
+    timeZone: 'Asia/Taipei',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './format-time';

package/src/utils/is.ts

@@ -0,0 +1,72 @@
+/**
+ * Performs a deep equality check between two values (primitive, array, plain object).
+ * - Functions are compared by reference.
+ * - No circular reference support.
+ * - Returns true if deeply equal, false otherwise.
+ */
+export function isEqual(a: unknown, b: unknown): boolean {
+  // Check for strict equality first (handles primitives and reference equality)
+  if (a === b) {
+    return true;
+  }
+
+  // Handle null cases
+  if (a === null || b === null) {
+    return a === b;
+  }
+
+  // Compare types
+  if (typeof a !== typeof b) {
+    return false;
+  }
+
+  // Handle arrays
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) {
+      return false;
+    }
+
+    for (let i = 0; i < a.length; i++) {
+      if (!isEqual(a[i], b[i])) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  // If one is array and the other is not
+  if (Array.isArray(a) || Array.isArray(b)) {
+    return false;
+  }
+
+  // Handle objects (but not functions)
+  if (typeof a === 'object' && typeof b === 'object') {
+    const aKeys = Object.keys(a as object);
+    const bKeys = Object.keys(b as object);
+    if (aKeys.length !== bKeys.length) {
+      return false;
+    }
+
+    for (const key of aKeys) {
+      // Use Object.prototype.hasOwnProperty.call to be safe
+      if (!Object.prototype.hasOwnProperty.call(b, key)) {
+        return false;
+      }
+
+      if (
+        !isEqual(
+          (a as Record<string, unknown>)[key],
+          (b as Record<string, unknown>)[key]
+        )
+      ) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  // Fallback for functions, symbols, etc. (compare by reference)
+  return a === b;
+}

package/src/utils/selectors.ts

@@ -0,0 +1,7 @@
+import { BotProviderMetadataResponse } from '../models/bot-provider';
+
+export const annotationSelectorFromBotProviderMetadata = (
+  value: BotProviderMetadataResponse
+): Record<string, unknown> => {
+  return JSON.parse(value.annotations['asgard-ai.com/additional-annotation']);
+};