@asgard-js/react 0.0.31 → 0.0.32-canary.0

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.31",
+  "version": "0.0.32-canary.0",
   "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",
@@ -35,7 +36,10 @@
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
-    "remark-math": "^6.0.0"
+    "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",
@@ -50,11 +54,9 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "@asgard-js/core": "^0.0.31",
+    "@asgard-js/core": "^0.0.32-canary.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "vega": "^6.1.2",
-    "vega-lite": "^6.1.0"
+    "react-dom": "^18.0.0"
   },
   "scripts": {
     "test": "vitest run",

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 'src/context/asgard-service-context';
+import styles from './chatbot-body.module.scss';
+import { ConversationMessageRenderer } from './conversation-message-renderer';
+import { BotTypingPlaceholder } from '../../templates';
+import { useAsgardThemeContext } from 'src/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 'src/hooks';
+import { ChatbotFullScreenContainer } from './chatbot-full-screen-container';
+import classes from './chatbot-container.module.scss';
+import { useAsgardThemeContext } from 'src/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 'src/hooks';
+import classes from './chatbot-container.module.scss';
+import { useAsgardThemeContext } from 'src/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 'src/context/asgard-service-context';
+import styles from './chatbot-footer.module.scss';
+import SendSvg from 'src/icons/send.svg?react';
+import { SpeechInputButton } from './speech-input-button';
+import clsx from 'clsx';
+import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+
+export function ChatbotFooter(): ReactNode {
+  const { sendMessage, isConnecting } = 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="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';

package/src/components/chatbot/chatbot-footer/speech-input-button.tsx

@@ -0,0 +1,132 @@
+import {
+  Dispatch,
+  MouseEventHandler,
+  ReactNode,
+  SetStateAction,
+  TouchEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  CSSProperties,
+} from 'react';
+import MicSvg from 'src/icons/mic.svg?react';
+import StopSvg from 'src/icons/stop.svg?react';
+
+interface SpeechInputButtonProps {
+  setValue: Dispatch<SetStateAction<string>>;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function SpeechInputButton(props: SpeechInputButtonProps): ReactNode {
+  const { setValue, className, style } = props;
+
+  const [listening, setListening] = useState(false);
+  const recognitionRef = useRef<SpeechRecognition | null>(null);
+
+  useEffect(() => {
+    const SpeechRecognition =
+      window.SpeechRecognition || window.webkitSpeechRecognition;
+
+    if (!SpeechRecognition) return;
+
+    const recognition = new SpeechRecognition();
+    recognition.lang = 'zh-TW';
+    recognition.continuous = true;
+    recognition.interimResults = true;
+
+    recognition.onresult = (event: SpeechRecognitionEvent): void => {
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        if (event.results[i].isFinal) {
+          setValue((prev) => prev + event.results[i][0].transcript);
+        }
+      }
+    };
+
+    recognition.onerror = (event: SpeechRecognitionErrorEvent): void => {
+      alert(`語音識別錯誤: ${JSON.stringify(event.error)}`);
+    };
+
+    recognition.onend = (): void => {
+      setListening(false);
+    };
+
+    recognitionRef.current = recognition;
+  }, [setValue]);
+
+  const startListening = useCallback(() => {
+    if (!recognitionRef.current) {
+      alert('無法開始辨識: 語音識別器未初始化，請檢查是否有授權使用麥克風');
+
+      return;
+    }
+
+    try {
+      recognitionRef.current.start();
+      setListening(true);
+    } catch (error) {
+      alert(`無法開始辨識: ${JSON.stringify(error)}`);
+    }
+  }, []);
+
+  const stopListening = useCallback(() => {
+    if (!recognitionRef.current) return;
+
+    recognitionRef.current.stop();
+    setListening(false);
+  }, []);
+
+  const onMouseDown = useCallback<MouseEventHandler<HTMLDivElement>>(
+    (event) => {
+      if (!listening) {
+        event.preventDefault();
+        startListening();
+      }
+    },
+    [listening, startListening]
+  );
+
+  const onMouseUp = useCallback<MouseEventHandler<HTMLDivElement>>(
+    (event) => {
+      if (listening) {
+        event.preventDefault();
+        stopListening();
+      }
+    },
+    [listening, stopListening]
+  );
+
+  const onTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(
+    (event) => {
+      if (!listening) {
+        event.preventDefault();
+        startListening();
+      }
+    },
+    [listening, startListening]
+  );
+
+  const onTouchEnd = useCallback<TouchEventHandler<HTMLDivElement>>(
+    (event) => {
+      if (listening) {
+        event.preventDefault();
+        stopListening();
+      }
+    },
+    [listening, stopListening]
+  );
+
+  return (
+    <div
+      className={className}
+      style={style}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
+    >
+      {listening ? <StopSvg /> : <MicSvg />}
+    </div>
+  );
+}