@asgard-js/react 0.0.34 → 0.0.37-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.0.34",
+  "version": "0.0.37-canary.1",
   "publishConfig": {
     "access": "public"
   },
@@ -54,7 +54,7 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "@asgard-js/core": "^0.0.34",
+    "@asgard-js/core": "^0.0.37-canary.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

package/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": []
-}

package/eslint.config.cjs

@@ -1,12 +0,0 @@
-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/src/components/chatbot/chatbot-body/chatbot-body.module.scss

@@ -1,13 +0,0 @@
-.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

@@ -1,45 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

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

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

@@ -1,41 +0,0 @@
-@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

@@ -1,49 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,67 +0,0 @@
-.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

@@ -1,144 +0,0 @@
-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';
-import { useAsgardAppInitializationContext } from '../../../context/asgard-app-initialization-context';
-
-export function ChatbotFooter(): ReactNode {
-  const { sendMessage, isConnecting } = useAsgardContext();
-
-  const { chatbot } = useAsgardThemeContext();
-  const { data: { annotations } } = useAsgardAppInitializationContext();
-
-  const [value, setValue] = useState('');
-  const [isComposing, setIsComposing] = useState(false);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const inputPlaceholder = annotations?.embedConfig?.inputPlaceholder || 'Enter message';
-
-  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}
-          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

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

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

@@ -1,132 +0,0 @@
-import {
-  Dispatch,
-  MouseEventHandler,
-  ReactNode,
-  SetStateAction,
-  TouchEventHandler,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  CSSProperties,
-} from 'react';
-import MicSvg from '../../../icons/mic.svg?react';
-import StopSvg from '../../../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>
-  );
-}

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

@@ -1,48 +0,0 @@
-.chatbot_header {
-  border-bottom: 1px solid #434343;
-
-  .chatbot_header__content {
-    margin: 0 auto;
-    max-width: 1200px;
-    padding: var(--asg-spacing-4);
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
-.chatbot_header__title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--asg-spacing-2);
-
-  > h4 {
-    margin: 0;
-    color: white;
-  }
-}
-
-.chatbot_header__extra {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--asg-spacing-3);
-
-  > div {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    > svg {
-      width: 15px;
-      height: 15px;
-      cursor: pointer;
-
-      &:hover {
-        opacity: 0.5;
-      }
-    }
-  }
-}