@asgard-js/react 0.0.43 → 0.0.44-canary.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.0.43",
+  "version": "0.0.44-canary.2",
   "publishConfig": {
     "access": "public"
   },
@@ -15,7 +15,7 @@
   ],
   "exports": {
     "./package.json": "./package.json",
-    "./style": "./dist/style.css",
+    "./style": "./dist/index.css",
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
@@ -38,7 +38,7 @@
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "vega": "^6.1.2",
-    "vega-embed": "^6.0.0",
+    "vega-embed": "^7.0.2",
     "vega-lite": "^6.1.0"
   },
   "devDependencies": {
@@ -54,7 +54,7 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "@asgard-js/core": "^0.0.43",
+    "@asgard-js/core": "^0.0.44-canary.2",
     "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/api-key-input/api-key-input.module.scss

@@ -1,156 +0,0 @@
-.api_key_input {
-  width: 360px;
-  max-width: calc(100vw - 32px);
-  background-color: var(--asg-color-bg);
-  border-radius: 12px;
-  padding: 24px;
-  border: 0.5px solid var(--asg-color-border);
-
-  @media (max-width: 480px) {
-    width: 100%;
-    max-width: none;
-    padding: 20px;
-    margin: 0 16px;
-  }
-}
-
-.api_key_input__header {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.api_key_input__icon {
-  width: 40px;
-  height: 40px;
-}
-
-.api_key_input__title {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 500;
-  color: white;
-}
-
-.api_key_input__form {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.api_key_input__label {
-  display: block;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.7);
-  margin-bottom: 8px;
-}
-
-.api_key_input__input_wrapper {
-  position: relative;
-  width: 100%;
-}
-
-.api_key_input__input {
-  width: 100%;
-  height: 48px;
-  padding: 0 40px 0 12px;
-  font-size: 14px;
-  font-weight: 400;
-  color: rgba(255, 255, 255, 0.8);
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 6px;
-  outline: none;
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-
-  @media (max-width: 480px) {
-    height: 44px;
-    font-size: 16px;
-  }
-
-  &::placeholder {
-    color: rgba(255, 255, 255, 0.4);
-  }
-
-  &:focus {
-    border-color: rgba(255, 255, 255, 0.3);
-    background: rgba(255, 255, 255, 0.08);
-  }
-
-  &--error {
-    border-color: #FF4D4F;
-    background: rgba(255, 77, 79, 0.05);
-  }
-
-  &--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-.api_key_input__toggle_button {
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: transparent;
-  border: none;
-  color: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover:not(:disabled) {
-    color: rgba(255, 255, 255, 0.7);
-    background: rgba(255, 255, 255, 0.05);
-  }
-
-  &:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-}
-
-.api_key_input__toggle_icon {
-  width: 16px;
-  height: 16px;
-}
-
-.api_key_input__error_message {
-  margin-top: 6px;
-  font-size: 12px;
-  color: #FF4D4F;
-}
-
-.api_key_input__submit_button {
-  width: 100%;
-  height: 48px;
-  border: none;
-  border-radius: 6px;
-  background-color: #5856d6;
-  color: white;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  outline: none;
-
-  @media (max-width: 480px) {
-    height: 44px;
-    font-size: 16px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    transform: none;
-  }
-}

package/src/components/chatbot/api-key-input/api-key-input.tsx

@@ -1,111 +0,0 @@
-import { useState, FormEvent, ChangeEvent } from 'react';
-import clsx from 'clsx';
-import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
-import { useAsgardContext } from '../../../context/asgard-service-context';
-import { ProfileIcon } from '../profile-icon';
-import EyeSvg from '../../../icons/eye.svg?react';
-import EyeOffSvg from '../../../icons/eye-off.svg?react';
-import styles from './api-key-input.module.scss';
-
-export interface ApiKeyInputProps {
-  onSubmit: (apiKey: string) => void | Promise<void>;
-  loading?: boolean;
-  error?: string;
-  placeholder?: string;
-  title?: string;
-  showToggle?: boolean;
-  className?: string;
-}
-
-export function ApiKeyInput({
-  onSubmit,
-  loading = false,
-  error,
-  placeholder = 'Enter your key',
-  title = 'Preview',
-  showToggle = true,
-  className,
-}: ApiKeyInputProps): JSX.Element {
-  const [apiKey, setApiKey] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const { chatbot } = useAsgardThemeContext();
-  const { avatar } = useAsgardContext();
-
-  const handleSubmit = (e: FormEvent): void => {
-    e.preventDefault();
-    if (apiKey.trim() && !loading) {
-      onSubmit(apiKey.trim());
-    }
-  };
-
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>): void => {
-    setApiKey(e.target.value);
-  };
-
-  const togglePasswordVisibility = (): void => {
-    setShowPassword(!showPassword);
-  };
-
-  return (
-    <div 
-      className={clsx(styles.api_key_input, className)}
-      style={{
-        backgroundColor: chatbot.backgroundColor,
-        borderColor: chatbot.borderColor,
-      }}
-    >
-      <div className={styles.api_key_input__header}>
-        <ProfileIcon avatar={avatar} />
-        <h2 className={styles.api_key_input__title} style={chatbot?.header?.title?.style}>{title}</h2>
-      </div>
-
-      <form onSubmit={handleSubmit} className={styles.api_key_input__form}>
-        <div>
-          <label className={styles.api_key_input__label}>Key</label>
-          <div className={styles.api_key_input__input_wrapper}>
-            <input
-              type={showPassword ? 'text' : 'password'}
-              value={apiKey}
-              onChange={handleInputChange}
-              placeholder={placeholder}
-              className={clsx(styles.api_key_input__input, {
-                [styles['api_key_input__input--error']]: error,
-                [styles['api_key_input__input--disabled']]: loading,
-              })}
-              disabled={loading}
-              autoComplete="off"
-            />
-            {showToggle && (
-              <button
-                type="button"
-                onClick={togglePasswordVisibility}
-                className={styles.api_key_input__toggle_button}
-                disabled={loading}
-                aria-label={showPassword ? 'Hide password' : 'Show password'}
-              >
-                {showPassword ? (
-                  <EyeOffSvg className={styles.api_key_input__toggle_icon} />
-                ) : (
-                  <EyeSvg className={styles.api_key_input__toggle_icon} />
-                )}
-              </button>
-            )}
-          </div>
-          {error && <div className={styles.api_key_input__error_message}>{error}</div>}
-        </div>
-
-        <button
-          type="submit"
-          disabled={!apiKey.trim() || loading}
-          className={styles.api_key_input__submit_button}
-          style={{
-            backgroundColor: chatbot?.mainColor,
-            color: chatbot?.secondaryColor,
-          }}
-        >
-          {loading ? 'Loading...' : 'Continue'}
-        </button>
-      </form>
-    </div>
-  );
-}

package/src/components/chatbot/api-key-input/index.ts

@@ -1 +0,0 @@
-export * from './api-key-input';

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);
-
-  const [, height] = useViewportSize() ?? [];
-
-  const isOnScreenKeyboardOpen = useIsOnScreenKeyboardOpen();
-
-  useOnScreenKeyboardScrollFix(isOnScreenKeyboardOpen);
-
-  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: var(--asg-color-bg);
-  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);
-      }
-    }
-  }
-}