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

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 '../../../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

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

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

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

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

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

@@ -0,0 +1,121 @@
+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 { ChatbotHeader } from './chatbot-header';
+import { ChatbotBody } from './chatbot-body';
+import { ChatbotFooter } from './chatbot-footer';
+import { ChatbotContainer } from './chatbot-container/chatbot-container';
+
+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';
+}
+
+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,
+  } = props;
+
+  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}
+          botTypingPlaceholder={botTypingPlaceholder}
+          inputPlaceholder={inputPlaceholder}
+        >
+          <ChatbotContainer
+            fullScreen={fullScreen}
+            className={className}
+            style={style}
+          >
+            <ChatbotHeader
+              title={title}
+              onReset={onReset}
+              onClose={onClose}
+              customActions={customActions}
+              maintainConnectionWhenClosed={maintainConnectionWhenClosed}
+            />
+            <AsgardTemplateContextProvider
+              onErrorClick={onErrorClick}
+              errorMessageRenderer={errorMessageRenderer}
+              onTemplateBtnClick={onTemplateBtnClick}
+              defaultLinkTarget={defaultLinkTarget}
+            >
+              <ChatbotBody />
+            </AsgardTemplateContextProvider>
+            <ChatbotFooter />
+          </ChatbotContainer>
+        </AsgardServiceContextProvider>
+      </AsgardThemeContextProvider>
+    </AsgardAppInitializationContextProvider>
+  );
+});

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

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

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

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

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

package/src/components/templates/avatar/avatar.tsx

@@ -0,0 +1,28 @@
+import { memo, ReactNode } from 'react';
+import styles from './avatar.module.scss';
+import BotSvg from '../../../icons/bot.svg?react';
+import clsx from 'clsx';
+
+interface AvatarProps {
+  avatar?: string;
+}
+
+export const Avatar = memo((props: AvatarProps): ReactNode => {
+  const { avatar } = props;
+
+  if (avatar) {
+    return (
+      <img
+        src={avatar}
+        alt="Bot Avatar"
+        className={clsx('asgard-avatar', styles.bot_avatar)}
+      />
+    );
+  }
+
+  return (
+    <div className={clsx('asgard-avatar', styles.bot_avatar)}>
+      <BotSvg />
+    </div>
+  );
+});

package/src/components/templates/avatar/index.ts

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

package/src/components/templates/button-template/button-template.tsx

@@ -0,0 +1,45 @@
+import { ButtonMessageTemplate, ConversationBotMessage } from '@asgard-js/core';
+import { ReactNode } from 'react';
+import { TemplateBox, TemplateBoxContent } from '../template-box';
+import { Avatar } from '../avatar';
+import { Card } from './card';
+import { useAsgardContext } from '../../../context/asgard-service-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
+
+interface ButtonTemplateProps {
+  message: ConversationBotMessage;
+}
+
+export function ButtonTemplate(props: ButtonTemplateProps): ReactNode {
+  const { message } = props;
+
+  const { template: themeTemplate } = useAsgardThemeContext();
+
+  const { avatar } = useAsgardContext();
+
+  const template = message.message.template as ButtonMessageTemplate;
+
+  return (
+    <TemplateBox
+      className="asgard-button-template"
+      type="bot"
+      direction="horizontal"
+      style={themeTemplate?.ButtonMessageTemplate?.style}
+    >
+      <Avatar avatar={avatar} />
+      <TemplateBoxContent
+        time={message.time}
+        quickReplies={template?.quickReplies}
+      >
+        <Card
+          template={template}
+          customStyle={{
+            button: {
+              style: themeTemplate?.ButtonMessageTemplate?.button?.style ?? {},
+            },
+          }}
+        />
+      </TemplateBoxContent>
+    </TemplateBox>
+  );
+}

package/src/components/templates/button-template/card.module.scss

@@ -0,0 +1,58 @@
+.card_root {
+  width: 255px;
+  height: 368px;
+  max-height: 380px;
+  border-radius: 8px;
+  background: rgba(51, 51, 51, 1);
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: max-content auto;
+}
+
+.card_content {
+  display: grid;
+  grid-template-rows: 1.5em auto max-content;
+  gap: var(--asg-spacing-2);
+  padding: 12px;
+  line-height: 1.5em;
+}
+
+.card_title {
+  color: white;
+  margin: 0;
+  font-size: 15px;
+}
+
+.card_description {
+  color: rgba(140, 140, 140, 1);
+  font-size: 13px;
+  font-weight: 400;
+  max-height: 4.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 3;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+}
+
+.card_actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  > button {
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    border: none;
+    border-radius: 4px;
+    background: rgba(71, 103, 235, 1);
+    color: white;
+    font-size: 15px;
+    cursor: pointer;
+  }
+}