@asgard-js/react 0.0.43-canary.9 → 0.0.44-canary.1

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

@@ -1,140 +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';
-
-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

@@ -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;
-      }
-    }
-  }
-}

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

@@ -1,98 +0,0 @@
-import { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
-import styles from './chatbot-header.module.scss';
-import { ProfileIcon } from '../profile-icon';
-import RefreshSvg from '../../../icons/refresh.svg?react';
-import CloseSvg from '../../../icons/close.svg?react';
-import {
-  useAsgardAppInitializationContext,
-  useAsgardThemeContext,
-  useAsgardContext,
-} from '../../../context/';
-import clsx from 'clsx';
-
-interface ChatbotHeaderProps {
-  title?: string;
-  customActions?: ReactNode[];
-  maintainConnectionWhenClosed?: boolean;
-  onClose?: () => void;
-  onReset?: () => void;
-}
-
-export function ChatbotHeader(props: ChatbotHeaderProps): ReactNode {
-  const {
-    title,
-    onReset,
-    onClose,
-    customActions,
-    maintainConnectionWhenClosed,
-  } = props;
-
-  const { chatbot } = useAsgardThemeContext();
-  const {
-    data: { annotations },
-  } = useAsgardAppInitializationContext();
-
-  const { avatar, isResetting, resetChannel, closeChannel } =
-    useAsgardContext();
-
-  const contentStyles = useMemo(
-    () => ({
-      maxWidth: chatbot?.contentMaxWidth ?? '1200px',
-      borderBottomColor: chatbot?.borderColor,
-    }),
-    [chatbot]
-  );
-
-  const _onReset = useCallback<MouseEventHandler<HTMLDivElement>>(
-    (e) => {
-      if (!isResetting) {
-        e.stopPropagation();
-        onReset?.();
-        resetChannel?.();
-      }
-    },
-    [isResetting, onReset, resetChannel]
-  );
-
-  const _onClose = useCallback<MouseEventHandler<HTMLDivElement>>(
-    (e) => {
-      if (!isResetting) {
-        e.stopPropagation();
-        onClose?.();
-
-        if (!maintainConnectionWhenClosed) {
-          closeChannel?.();
-        }
-      }
-    },
-    [isResetting, onClose, closeChannel, maintainConnectionWhenClosed]
-  );
-
-  return (
-    <div
-      className={clsx('asgard-chatbot-header', styles.chatbot_header)}
-      style={chatbot?.header?.style}
-    >
-      <div className={styles.chatbot_header__content} style={contentStyles}>
-        <div className={styles.chatbot_header__title}>
-          <ProfileIcon avatar={avatar} />
-          <h4 style={chatbot?.header?.title?.style}>
-            {annotations?.embedConfig?.title || title || 'Bot'}
-          </h4>
-        </div>
-        <div
-          className={styles.chatbot_header__extra}
-          style={chatbot?.header?.actionButton?.style}
-        >
-          {customActions}
-          <div onClick={_onReset}>
-            <RefreshSvg />
-          </div>
-          <div onClick={_onClose}>
-            <CloseSvg />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

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

package/src/components/chatbot/chatbot.spec.tsx

@@ -1,8 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-describe('Chatbot Component', () => {
-  it('should have a basic test placeholder', () => {
-    // Basic test to verify test environment works
-    expect(true).toBe(true);
-  });
-});

package/src/components/chatbot/chatbot.tsx

@@ -1,233 +0,0 @@
-import {
-  forwardRef,
-  ForwardedRef,
-  ReactNode,
-  CSSProperties,
-} from 'react';
-import { ClientConfig, ConversationMessage } from '@asgard-js/core';
-import {
-  AsgardThemeContextProvider,
-  AsgardThemeContextValue,
-} from '../../context/asgard-theme-context';
-import {
-  AsgardServiceContextProvider,
-  AsgardServiceContextValue,
-  AsgardTemplateContextProvider,
-  AsgardTemplateContextValue,
-  AsgardAppInitializationContextProvider,
-  AsgardServiceContextProviderProps,
-} from '../../context';
-import { ApiKeyInput } from './api-key-input';
-import { ChatbotHeader } from './chatbot-header';
-import { ChatbotBody } from './chatbot-body';
-import { ChatbotFooter } from './chatbot-footer';
-import { ChatbotContainer } from './chatbot-container/chatbot-container';
-
-type AuthState = 'loading' | 'needApiKey' | 'authenticated' | 'error';
-
-interface ChatbotProps extends AsgardTemplateContextValue {
-  className?: string;
-  style?: CSSProperties;
-  title?: string;
-  customActions?: ReactNode[];
-  theme?: Partial<AsgardThemeContextValue>;
-  config: ClientConfig;
-  customChannelId: string;
-  initMessages?: ConversationMessage[];
-  onSseMessage?: AsgardServiceContextProviderProps['onSseMessage'];
-  fullScreen?: boolean;
-  avatar?: string;
-  botTypingPlaceholder?: string;
-  inputPlaceholder?: string;
-  enableLoadConfigFromService?: boolean;
-  maintainConnectionWhenClosed?: boolean;
-  asyncInitializers?: Record<string, () => Promise<unknown>>;
-  onReset?: () => void;
-  onClose?: () => void;
-  loadingComponent?: ReactNode;
-  defaultLinkTarget?: '_blank' | '_self' | '_parent' | '_top';
-  
-  // Auth state props
-  authState?: AuthState;
-  onApiKeySubmit?: (apiKey: string) => Promise<void>;
-  onAuthError?: (error: { isAuthError: boolean; isBotProviderError: boolean; errorDetail?: any }) => void;
-}
-
-export interface ChatbotRef {
-  serviceContext?: AsgardServiceContextValue;
-}
-
-export const Chatbot = forwardRef(function Chatbot(
-  props: ChatbotProps,
-  ref: ForwardedRef<ChatbotRef>
-): ReactNode {
-  const {
-    title,
-    customActions,
-    theme,
-    config,
-    customChannelId,
-    initMessages,
-    onSseMessage,
-    fullScreen = false,
-    avatar,
-    botTypingPlaceholder,
-    inputPlaceholder,
-    enableLoadConfigFromService = false,
-    maintainConnectionWhenClosed = false,
-    asyncInitializers = {},
-    loadingComponent,
-    onReset,
-    onClose,
-    onTemplateBtnClick,
-    onErrorClick,
-    errorMessageRenderer,
-    className,
-    style,
-    defaultLinkTarget,
-    authState = 'authenticated',
-    onApiKeySubmit,
-    onAuthError,
-  } = props;
-
-  // Render different content based on authState
-  const renderContent = () => {
-    switch (authState) {
-      case 'loading':
-        return (
-          <div style={{ 
-            display: 'flex', 
-            alignItems: 'center', 
-            justifyContent: 'center', 
-            flex: 1,
-            padding: '20px'
-          }}>
-            {loadingComponent || <div>Loading...</div>}
-          </div>
-        );
-      
-      case 'needApiKey':
-        return (
-          <div style={{ 
-            display: 'flex', 
-            alignItems: 'center', 
-            justifyContent: 'center', 
-            flex: 1,
-            padding: '20px'
-          }}>
-            <ApiKeyInput
-              title={title}
-              onSubmit={onApiKeySubmit || (() => {})}
-              placeholder="Enter your key"
-            />
-          </div>
-        );
-      
-      case 'error':
-        return (
-          <div style={{ 
-            display: 'flex', 
-            alignItems: 'center', 
-            justifyContent: 'center', 
-            flex: 1,
-            padding: '20px',
-            color: '#ff6b6b'
-          }}>
-            <div style={{ textAlign: 'center' }}>
-              <div style={{ fontSize: '16px', marginBottom: '8px' }}>⚠️</div>
-              <div>Something went wrong. Please try again later.</div>
-            </div>
-          </div>
-        );
-      
-      case 'authenticated':
-      default:
-        return (
-          <>
-            <AsgardTemplateContextProvider
-              onErrorClick={onErrorClick}
-              errorMessageRenderer={errorMessageRenderer}
-              onTemplateBtnClick={onTemplateBtnClick}
-              defaultLinkTarget={defaultLinkTarget}
-            >
-              <ChatbotBody />
-            </AsgardTemplateContextProvider>
-            <ChatbotFooter />
-          </>
-        );
-    }
-  };
-
-  // Don't initialize SSE connection when explicitly needing API key or in error state
-  if (authState !== 'needApiKey' && authState !== 'error') {
-    return (
-      <AsgardAppInitializationContextProvider
-        enabled={enableLoadConfigFromService}
-        config={config}
-        asyncInitializers={asyncInitializers}
-        loadingComponent={loadingComponent}
-      >
-        <AsgardThemeContextProvider theme={theme}>
-          <AsgardServiceContextProvider
-            parentRef={ref}
-            avatar={avatar}
-            config={config}
-            customChannelId={customChannelId}
-            initMessages={initMessages}
-            onSseMessage={onSseMessage}
-            onAuthError={onAuthError}
-            botTypingPlaceholder={botTypingPlaceholder}
-            inputPlaceholder={inputPlaceholder}
-          >
-            <ChatbotContainer
-              fullScreen={fullScreen}
-              className={className}
-              style={style}
-            >
-              <ChatbotHeader
-                title={title}
-                onReset={onReset}
-                onClose={onClose}
-                customActions={customActions}
-                maintainConnectionWhenClosed={maintainConnectionWhenClosed}
-              />
-              {renderContent()}
-            </ChatbotContainer>
-          </AsgardServiceContextProvider>
-        </AsgardThemeContextProvider>
-      </AsgardAppInitializationContextProvider>
-    );
-  }
-
-  // For non-authenticated states, provide AsgardServiceContextProvider but without SSE connection
-  return (
-    <AsgardThemeContextProvider theme={theme}>
-      <AsgardServiceContextProvider
-        parentRef={ref}
-        avatar={avatar}
-        config={config}
-        customChannelId={customChannelId}
-        initMessages={initMessages}
-        onSseMessage={onSseMessage}
-        onAuthError={onAuthError}
-        botTypingPlaceholder={botTypingPlaceholder}
-        inputPlaceholder={inputPlaceholder}
-      >
-        <ChatbotContainer
-          fullScreen={fullScreen}
-          className={className}
-          style={style}
-        >
-          <ChatbotHeader
-            title={title}
-            onReset={onReset}
-            onClose={onClose}
-            customActions={customActions}
-            maintainConnectionWhenClosed={maintainConnectionWhenClosed}
-          />
-          {renderContent()}
-        </ChatbotContainer>
-      </AsgardServiceContextProvider>
-    </AsgardThemeContextProvider>
-  );
-});

package/src/components/chatbot/profile-icon.tsx

@@ -1,26 +0,0 @@
-import { ReactNode } from 'react';
-import ProfileSvg from '../../icons/profile.svg?react';
-
-interface ProfileIconProps {
-  avatar?: string;
-}
-
-export function ProfileIcon(props: ProfileIconProps): ReactNode {
-  const { avatar } = props;
-
-  if (avatar) {
-    return (
-      <img
-        src={avatar}
-        alt="avatar"
-        style={{
-          width: 33,
-          height: 32,
-          borderRadius: '50%',
-        }}
-      />
-    );
-  }
-
-  return <ProfileSvg />;
-}

package/src/components/index.ts

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

package/src/components/templates/avatar/avatar.module.scss

@@ -1,6 +0,0 @@
-.bot_avatar {
-  flex: 0 0 auto;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-}