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

package/dist/test-setup.d.ts

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=test-setup.d.ts.map

package/dist/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/utils/deep-merge.d.ts

@@ -0,0 +1,3 @@
+export declare function isObject(item: unknown): item is Record<string, unknown>;
+export declare function deepMerge<T extends Record<string, unknown>, U extends Record<string, unknown>>(target: T, source: U): T & U;
+//# sourceMappingURL=deep-merge.d.ts.map

package/dist/utils/deep-merge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deep-merge.d.ts","sourceRoot":"","sources":["../../src/utils/deep-merge.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAEvE;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5F,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,GACR,CAAC,GAAG,CAAC,CAkBP"}

package/dist/utils/extractors.d.ts

@@ -0,0 +1,2 @@
+export declare function extractRefs(obj: unknown): unknown[];
+//# sourceMappingURL=extractors.d.ts.map

package/dist/utils/extractors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractors.d.ts","sourceRoot":"","sources":["../../src/utils/extractors.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,EAAE,CAmBnD"}

package/dist/utils/is.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare function isEqual(a: unknown, b: unknown): boolean;
+//# sourceMappingURL=is.d.ts.map

package/dist/utils/is.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is.d.ts","sourceRoot":"","sources":["../../src/utils/is.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,CAiEvD"}

package/dist/utils/selectors.d.ts

@@ -0,0 +1,4 @@
+import { BotProviderMetadataResponse } from '../models/bot-provider';
+
+export declare const annotationSelectorFromBotProviderMetadata: (value: BotProviderMetadataResponse) => Record<string, unknown>;
+//# sourceMappingURL=selectors.d.ts.map

package/dist/utils/selectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../src/utils/selectors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAErE,eAAO,MAAM,yCAAyC,UAC7C,2BAA2B,KACjC,MAAM,CAAC,MAAM,EAAE,OAAO,CAExB,CAAC"}

package/dist/utils/uri-validation.d.ts

@@ -0,0 +1,20 @@
+/**
+ * URI validation utilities for preventing XSS attacks via malicious URIs
+ */
+/**
+ * Validates if a URI is safe to open with window.open()
+ *
+ * @param uri - The URI to validate
+ * @returns true if the URI is safe to open, false otherwise
+ */
+export declare function isValidUri(uri: string | null | undefined): boolean;
+/**
+ * Safely opens a URI after validation
+ *
+ * @param uri - The URI to open
+ * @param target - The window target (same as window.open target parameter)
+ * @param features - Window features (same as window.open features parameter)
+ * @returns The opened window reference or null if URI was blocked
+ */
+export declare function safeWindowOpen(uri: string | null | undefined, target?: string, features?: string): Window | null;
+//# sourceMappingURL=uri-validation.d.ts.map

package/dist/utils/uri-validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uri-validation.d.ts","sourceRoot":"","sources":["../../src/utils/uri-validation.ts"],"names":[],"mappings":"AAAA;;GAEG;AAuBH;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAgDlE;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC9B,MAAM,CAAC,EAAE,MAAM,EACf,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,GAAG,IAAI,CASf"}

package/eslint.config.cjs

@@ -0,0 +1,12 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../eslint.config.cjs');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.0.1",
+  "version": "0.0.38.canary-1",
   "publishConfig": {
     "access": "public"
   },
@@ -18,7 +18,8 @@
     "./style": "./dist/style.css",
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
     }
   },
   "types": "./dist/index.d.ts",
@@ -26,6 +27,41 @@
   "type": "module",
   "main": "./dist/index.js",
   "dependencies": {
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "dompurify": "^3.2.5",
+    "highlight.js": "^11.11.1",
+    "katex": "^0.16.22",
+    "react-markdown": "^10.1.0",
+    "react-vega": "^7.6.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "vega": "^6.1.2",
+    "vega-embed": "^6.0.0",
+    "vega-lite": "^6.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/dom-speech-recognition": "^0.0.4",
+    "@types/jsdom": "^21.1.6",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@vitest/ui": "^1.6.0",
+    "jsdom": "^24.0.0",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^1.6.0"
+  },
+  "peerDependencies": {
+    "@asgard-js/core": "^0.0.38.canary-1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage"
   }
 }

package/src/components/chatbot/chatbot-body/chatbot-body.module.scss

@@ -0,0 +1,13 @@
+.chatbot_body {
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  .chatbot_body__content {
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    gap: 16px;
+    max-width: 1200px;
+  }
+}

package/src/components/chatbot/chatbot-body/chatbot-body.tsx

@@ -0,0 +1,45 @@
+import { ReactNode, useEffect, useMemo } from 'react';
+import { useAsgardContext } from '../../../context/asgard-service-context';
+import styles from './chatbot-body.module.scss';
+import { ConversationMessageRenderer } from './conversation-message-renderer';
+import { BotTypingPlaceholder } from '../../templates';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
+import clsx from 'clsx';
+
+export function ChatbotBody(): ReactNode {
+  const { chatbot } = useAsgardThemeContext();
+
+  const { messages, messageBoxBottomRef, botTypingPlaceholder } =
+    useAsgardContext();
+
+  useEffect(() => {
+    messageBoxBottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, messageBoxBottomRef]);
+
+  const contentStyles = useMemo(
+    () => ({
+      maxWidth: chatbot?.contentMaxWidth ?? '1200px',
+    }),
+    [chatbot]
+  );
+
+  return (
+    <div
+      className={clsx('asgard-chatbot-body', styles.chatbot_body)}
+      style={chatbot?.body?.style}
+    >
+      <div className={styles.chatbot_body__content} style={contentStyles}>
+        {Array.from(messages?.values() ?? []).map((message) => (
+          <ConversationMessageRenderer
+            key={message.messageId}
+            message={message}
+          />
+        ))}
+        <BotTypingPlaceholder
+          placeholder={botTypingPlaceholder ?? '正在輸入訊息'}
+        />
+        <div ref={messageBoxBottomRef} />
+      </div>
+    </div>
+  );
+}

package/src/components/chatbot/chatbot-body/conversation-message-renderer.tsx

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+import { ConversationMessage, MessageTemplateType } from '@asgard-js/core';
+import {
+  BotTypingBox,
+  ButtonTemplate,
+  CarouselTemplate,
+  HintTemplate,
+  TextTemplate,
+  ChartTemplate,
+  ImageTemplate,
+} from '../../templates';
+
+interface ConversationMessageRendererProps {
+  message: ConversationMessage;
+}
+
+export function ConversationMessageRenderer(
+  props: ConversationMessageRendererProps
+): ReactNode {
+  const { message } = props;
+
+  if (message.type === 'user') {
+    return <TextTemplate message={message} />;
+  }
+
+  if (message.type === 'error') {
+    return <HintTemplate message={message} />;
+  }
+
+  if (message.isTyping) {
+    return (
+      <BotTypingBox
+        isTyping={message.isTyping}
+        typingText={message.typingText}
+      />
+    );
+  }
+
+  switch (message.message.template?.type) {
+    case MessageTemplateType.TEXT:
+      return <TextTemplate message={message} />;
+    case MessageTemplateType.HINT:
+      return <HintTemplate message={message} />;
+    case MessageTemplateType.BUTTON:
+      return <ButtonTemplate message={message} />;
+    case MessageTemplateType.CAROUSEL:
+      return <CarouselTemplate message={message} />;
+    case MessageTemplateType.CHART:
+      return <ChartTemplate message={message} />;
+    case MessageTemplateType.IMAGE:
+      return <ImageTemplate message={message} />;
+    default:
+      return <div />;
+  }
+}

package/src/components/chatbot/chatbot-body/index.ts

@@ -0,0 +1 @@
+export * from './chatbot-body';

package/src/components/chatbot/chatbot-container/chatbot-container.module.scss

@@ -0,0 +1,41 @@
+@use '../../../styles';
+
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap');
+
+.chatbot_root {
+  @include styles.generate();
+
+  font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif;
+
+  * {
+    line-height: 1.5;
+    box-sizing: border-box;
+  }
+}
+
+.full_screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(var(--vh, 1vh) * 100);
+  background-color: var(--asg-color-bg);
+
+  .chatbot_container {
+    height: 100%;
+    transition: all 0.1s;
+    padding: env(safe-area-inset-top) env(safe-area-inset-right)
+      env(safe-area-inset-bottom) env(safe-area-inset-left);
+
+    &.screen_keyboard_open {
+      padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
+        env(safe-area-inset-left);
+    }
+  }
+}
+
+.chatbot_container {
+  display: grid;
+  grid-template-rows: max-content auto max-content;
+  background-color: var(--asg-color-bg);
+}

package/src/components/chatbot/chatbot-container/chatbot-container.tsx

@@ -0,0 +1,49 @@
+import { PropsWithChildren, ReactNode, useRef, CSSProperties } from 'react';
+import { useUpdateVh } from '../../../hooks';
+import { ChatbotFullScreenContainer } from './chatbot-full-screen-container';
+import classes from './chatbot-container.module.scss';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
+import clsx from 'clsx';
+
+interface ChatbotContainerProps extends PropsWithChildren {
+  className?: string;
+  style?: CSSProperties;
+  fullScreen?: boolean;
+}
+
+export function ChatbotContainer(props: ChatbotContainerProps): ReactNode {
+  const { fullScreen, children, className, style = {} } = props;
+
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useUpdateVh(rootRef);
+
+  const {
+    chatbot: {
+      style: rootStyle,
+      header,
+      body,
+      footer,
+      ...chatbotInnerContainerStyle
+    },
+  } = useAsgardThemeContext();
+
+  return (
+    <div
+      ref={rootRef}
+      className={clsx(classes.chatbot_root, className)}
+      style={Object.assign({}, rootStyle, style)}
+    >
+      {fullScreen ? (
+        <ChatbotFullScreenContainer>{children}</ChatbotFullScreenContainer>
+      ) : (
+        <div
+          className={classes.chatbot_container}
+          style={chatbotInnerContainerStyle}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/chatbot/chatbot-container/chatbot-full-screen-container.tsx

@@ -0,0 +1,54 @@
+import { PropsWithChildren, ReactNode, useMemo, useRef } from 'react';
+import clsx from 'clsx';
+import {
+  useIsOnScreenKeyboardOpen,
+  useOnScreenKeyboardScrollFix,
+  usePreventOverScrolling,
+  useViewportSize,
+} from '../../../hooks';
+import classes from './chatbot-container.module.scss';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
+
+export function ChatbotFullScreenContainer(
+  props: PropsWithChildren
+): ReactNode {
+  const { children } = props;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const theme = useAsgardThemeContext();
+
+  usePreventOverScrolling(containerRef);
+
+  useOnScreenKeyboardScrollFix();
+
+  const [, height] = useViewportSize() ?? [];
+
+  const isOnScreenKeyboardOpen = useIsOnScreenKeyboardOpen();
+
+  const styles = useMemo(() => {
+    return Object.assign(
+      theme?.chatbot?.backgroundColor
+        ? {
+            backgroundColor: theme.chatbot?.backgroundColor,
+          }
+        : {},
+      isOnScreenKeyboardOpen ? { height } : {}
+    );
+  }, [height, isOnScreenKeyboardOpen, theme]);
+
+  return (
+    <div className={classes.full_screen}>
+      <div
+        ref={containerRef}
+        className={clsx(
+          classes.chatbot_container,
+          isOnScreenKeyboardOpen && classes.screen_keyboard_open
+        )}
+        style={styles}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/chatbot/chatbot-footer/chatbot-footer.module.scss

@@ -0,0 +1,67 @@
+.chatbot_footer {
+  border-top: 1px solid #434343;
+
+  .chatbot_footer__content {
+    display: grid;
+    align-items: flex-end;
+    grid-template-columns: auto 24px;
+    margin: 0 auto;
+    max-width: 1200px;
+    padding: var(--asg-spacing-3) var(--asg-spacing-4);
+    gap: var(--asg-spacing-2);
+  }
+}
+
+.chatbot_textarea {
+  font: inherit;
+  font-size: 16px;
+  height: 36px;
+  max-height: 240px;
+  padding: 8px;
+  padding-left: 12px;
+  background: rgba(31, 31, 31, 1);
+  border: 1px solid rgba(67, 67, 67, 1);
+  border-radius: 2px;
+  color: rgba(140, 140, 140, 1);
+  resize: none;
+  overflow: hidden;
+
+  &::placeholder {
+    color: var(--asg-color-text-placeholder);
+  }
+}
+
+.chatbot_submit_button {
+  font: inherit;
+  width: 24px;
+  height: 100%;
+  max-height: 38px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  border: none;
+  background: transparent;
+  border-radius: 50%;
+  color: white;
+  cursor: pointer;
+
+  > svg {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+    width: auto;
+    min-width: 16px;
+    height: 60%;
+    max-height: 38px;
+    min-height: 16px;
+  }
+
+  &.chatbot_submit_button__disabled {
+    > svg {
+      > path {
+        fill: rgba(140, 140, 140, 1);
+      }
+    }
+  }
+}

package/src/components/chatbot/chatbot-footer/chatbot-footer.tsx

@@ -0,0 +1,140 @@
+import {
+  ChangeEventHandler,
+  KeyboardEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useAsgardContext } from '../../../context/asgard-service-context';
+import styles from './chatbot-footer.module.scss';
+import SendSvg from '../../../icons/send.svg?react';
+import { SpeechInputButton } from './speech-input-button';
+import clsx from 'clsx';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
+
+export function ChatbotFooter(): ReactNode {
+  const { sendMessage, isConnecting, inputPlaceholder } = useAsgardContext();
+
+  const { chatbot } = useAsgardThemeContext();
+
+  const [value, setValue] = useState('');
+  const [isComposing, setIsComposing] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const disabled = useMemo(
+    () => isConnecting || !value.trim(),
+    [isConnecting, value]
+  );
+
+  const contentStyles = useMemo(
+    () => ({
+      maxWidth: chatbot?.contentMaxWidth ?? '1200px',
+      borderTopColor: chatbot?.borderColor,
+    }),
+    [chatbot]
+  );
+
+  const onChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
+    (event) => {
+      const element = event.target as HTMLTextAreaElement;
+      const value = element.value;
+
+      element.style.height = '36px';
+
+      if (value) {
+        element.style.height = `${element.scrollHeight}px`;
+      }
+
+      setValue(event.target.value);
+    },
+    []
+  );
+
+  const onSubmit = useCallback(() => {
+    if (!isComposing && !isConnecting) {
+      sendMessage?.({ text: value });
+      setValue('');
+
+      if (textareaRef.current) {
+        textareaRef.current.style.height = '36px';
+      }
+    }
+  }, [isComposing, isConnecting, sendMessage, value]);
+
+  const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
+    (event) => {
+      if (
+        event.key === 'Enter' &&
+        !isComposing &&
+        !isConnecting &&
+        value.trim()
+      ) {
+        sendMessage?.({ text: value });
+        setValue('');
+
+        const element = event.target as HTMLTextAreaElement;
+
+        element.style.height = '36px';
+      }
+    },
+    [isComposing, isConnecting, sendMessage, value]
+  );
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.setProperty(
+        '--asg-color-text-placeholder',
+        chatbot.footer?.textArea?.['::placeholder']?.color ??
+          'var(--asg-color-text-placeholder)'
+      );
+    }
+  }, [chatbot.footer?.textArea]);
+
+  return (
+    <div
+      className={clsx('asgard-chatbot-footer', styles.chatbot_footer)}
+      style={chatbot.footer?.style}
+    >
+      <div className={styles.chatbot_footer__content} style={contentStyles}>
+        <textarea
+          ref={textareaRef}
+          className={styles.chatbot_textarea}
+          style={chatbot.footer?.textArea?.style}
+          disabled={isConnecting}
+          cols={40}
+          value={value}
+          placeholder={inputPlaceholder || "Enter message"}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          onCompositionStart={() => setIsComposing(true)}
+          onCompositionEnd={() => setIsComposing(false)}
+        />
+        {value ? (
+          <button
+            className={clsx(
+              styles.chatbot_submit_button,
+              disabled && styles.chatbot_submit_button__disabled
+            )}
+            style={chatbot.footer?.submitButton?.style}
+            disabled={disabled}
+            onClick={onSubmit}
+          >
+            <SendSvg />
+          </button>
+        ) : (
+          <SpeechInputButton
+            setValue={setValue}
+            className={clsx(
+              styles.chatbot_submit_button,
+              isConnecting && styles.chatbot_submit_button__disabled
+            )}
+            style={chatbot.footer?.speechInputButton?.style}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/chatbot/chatbot-footer/index.ts

@@ -0,0 +1 @@
+export * from './chatbot-footer';