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

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 'src/icons/refresh.svg?react';
+import CloseSvg from 'src/icons/close.svg?react';
+import {
+  useAsgardAppInitializationContext,
+  useAsgardThemeContext,
+  useAsgardContext,
+} from 'src/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,118 @@
+import { forwardRef, ForwardedRef, ReactNode, CSSProperties } from 'react';
+import { ClientConfig, ConversationMessage } from '@asgard-js/core';
+import {
+  AsgardThemeContextProvider,
+  AsgardThemeContextValue,
+} from 'src/context/asgard-theme-context';
+import {
+  AsgardServiceContextProvider,
+  AsgardServiceContextValue,
+  AsgardTemplateContextProvider,
+  AsgardTemplateContextValue,
+  AsgardAppInitializationContextProvider,
+  AsgardServiceContextProviderProps,
+} from 'src/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;
+  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,
+    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}
+        >
+          <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 'src/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 'src/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 'src/context/asgard-service-context';
+import { useAsgardThemeContext } from 'src/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;
+  }
+}

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

@@ -0,0 +1,213 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Card } from './card';
+import { MessageTemplateType } from '@asgard-js/core';
+import { useAsgardContext } from '../../../context/asgard-service-context';
+import { useAsgardTemplateContext } from '../../../context/asgard-template-context';
+import * as uriValidation from '../../../utils/uri-validation';
+
+// Mock the contexts
+vi.mock('../../../context/asgard-service-context');
+vi.mock('../../../context/asgard-template-context');
+
+// Mock the URI validation utility
+vi.mock('../../../utils/uri-validation');
+
+const mockUseAsgardContext = vi.mocked(useAsgardContext);
+const mockUseAsgardTemplateContext = vi.mocked(useAsgardTemplateContext);
+const mockSafeWindowOpen = vi.mocked(uriValidation.safeWindowOpen);
+
+describe('Card Component - Security Tests', () => {
+  const mockSendMessage = vi.fn();
+  const mockOnTemplateBtnClick = vi.fn();
+  const defaultLinkTarget = '_blank';
+
+  // Define malicious URI as variable to avoid ESLint script URL warning
+  // eslint-disable-next-line no-script-url
+  const maliciousJsUri = 'javascript:alert("xss")';
+
+  const baseTemplate = {
+    type: MessageTemplateType.BUTTON,
+    title: 'Test Card',
+    text: 'Test description',
+    thumbnailImageUrl: 'https://example.com/image.jpg',
+    imageAspectRatio: 'rectangle' as const,
+    imageSize: 'cover' as const,
+    imageBackgroundColor: '#ffffff',
+    defaultAction: {
+      type: 'message' as const,
+      text: 'Default action',
+    },
+    quickReplies: [],
+    buttons: [
+      {
+        label: 'Safe Link',
+        action: {
+          type: 'uri' as const,
+          uri: 'https://example.com',
+        },
+      },
+      {
+        label: 'Malicious Link',
+        action: {
+          type: 'uri' as const,
+          uri: maliciousJsUri,
+        },
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    mockUseAsgardContext.mockReturnValue({
+      sendMessage: mockSendMessage,
+      client: null,
+      isOpen: false,
+      isResetting: false,
+      isConnecting: false,
+      conversation: null,
+      resetChannel: vi.fn(),
+      closeChannel: vi.fn(),
+      avatar: null,
+    });
+
+    mockUseAsgardTemplateContext.mockReturnValue({
+      onTemplateBtnClick: mockOnTemplateBtnClick,
+      defaultLinkTarget,
+      onErrorClick: undefined,
+      errorMessageRenderer: undefined,
+    });
+
+    mockSafeWindowOpen.mockReturnValue(null);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('URI security validation', () => {
+    it('should call safeWindowOpen for URI actions instead of window.open directly', () => {
+      render(<Card template={baseTemplate} />);
+
+      const safeButton = screen.getByText('Safe Link');
+      fireEvent.click(safeButton);
+
+      expect(mockSafeWindowOpen).toHaveBeenCalledWith(
+        'https://example.com',
+        '_blank'
+      );
+    });
+
+    it('should call safeWindowOpen for malicious URIs (letting validation utility handle security)', () => {
+      render(<Card template={baseTemplate} />);
+
+      const maliciousButton = screen.getByText('Malicious Link');
+      fireEvent.click(maliciousButton);
+
+      expect(mockSafeWindowOpen).toHaveBeenCalledWith(
+        maliciousJsUri,
+        '_blank'
+      );
+    });
+
+    it('should use action target if provided', () => {
+      const templateWithTarget = {
+        ...baseTemplate,
+        buttons: [
+          {
+            label: 'Link with Target',
+            action: {
+              type: 'uri' as const,
+              uri: 'https://example.com',
+              target: '_self' as const,
+            },
+          },
+        ],
+      };
+
+      render(<Card template={templateWithTarget} />);
+
+      const button = screen.getByText('Link with Target');
+      fireEvent.click(button);
+
+      expect(mockSafeWindowOpen).toHaveBeenCalledWith(
+        'https://example.com',
+        '_self'
+      );
+    });
+
+    it('should fallback to defaultLinkTarget when no action target', () => {
+      mockUseAsgardTemplateContext.mockReturnValue({
+        onTemplateBtnClick: mockOnTemplateBtnClick,
+        defaultLinkTarget: '_parent',
+      });
+
+      render(<Card template={baseTemplate} />);
+
+      const safeButton = screen.getByText('Safe Link');
+      fireEvent.click(safeButton);
+
+      expect(mockSafeWindowOpen).toHaveBeenCalledWith(
+        'https://example.com',
+        '_parent'
+      );
+    });
+
+    it('should fallback to _blank when no action target or defaultLinkTarget', () => {
+      mockUseAsgardTemplateContext.mockReturnValue({
+        onTemplateBtnClick: mockOnTemplateBtnClick,
+        defaultLinkTarget: undefined,
+      });
+
+      render(<Card template={baseTemplate} />);
+
+      const safeButton = screen.getByText('Safe Link');
+      fireEvent.click(safeButton);
+
+      expect(mockSafeWindowOpen).toHaveBeenCalledWith(
+        'https://example.com',
+        '_blank'
+      );
+    });
+
+    it('should handle uppercase URI action type', () => {
+      const templateWithUppercase = {
+        ...baseTemplate,
+        buttons: [
+          {
+            label: 'Uppercase URI',
+            action: {
+              type: 'URI' as const,
+              uri: 'https://example.com',
+            },
+          },
+        ],
+      };
+
+      render(<Card template={templateWithUppercase} />);
+
+      const button = screen.getByText('Uppercase URI');
+      fireEvent.click(button);
+
+      expect(mockSafeWindowOpen).toHaveBeenCalledWith(
+        'https://example.com',
+        '_blank'
+      );
+    });
+  });
+
+  describe('basic rendering', () => {
+    it('should render card with title and description', () => {
+      render(<Card template={baseTemplate} />);
+
+      expect(screen.getByText('Test Card')).toBeDefined();
+      expect(screen.getByText('Test description')).toBeDefined();
+    });
+
+    it('should render buttons', () => {
+      render(<Card template={baseTemplate} />);
+
+      expect(screen.getByText('Safe Link')).toBeDefined();
+      expect(screen.getByText('Malicious Link')).toBeDefined();
+    });
+  });
+});