@asgard-js/react 0.0.40 → 0.0.41-canary.2

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,121 +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 { 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

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

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

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

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

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

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

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

@@ -1,213 +0,0 @@
-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();
-    });
-  });
-});