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

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();
-    });
-  });
-});

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

@@ -1,123 +0,0 @@
-import {
-  MouseEventHandler,
-  ReactNode,
-  useCallback,
-  useMemo,
-  CSSProperties,
-} from 'react';
-import styles from './card.module.scss';
-import {
-  ButtonAction,
-  ButtonMessageTemplate,
-  CarouselMessageTemplate,
-} from '@asgard-js/core';
-import { useAsgardContext } from '../../../context/asgard-service-context';
-import { useAsgardTemplateContext } from '../../../context/asgard-template-context';
-import { safeWindowOpen } from '../../../utils/uri-validation';
-import clsx from 'clsx';
-
-interface CardProps {
-  template: ButtonMessageTemplate | CarouselMessageTemplate['columns'][number];
-  customStyle?: {
-    style?: CSSProperties;
-    button?: {
-      style?: CSSProperties;
-    };
-  };
-}
-
-export function Card(props: CardProps): ReactNode {
-  const { template, customStyle } = props;
-
-  const { sendMessage } = useAsgardContext();
-  const { onTemplateBtnClick, defaultLinkTarget } = useAsgardTemplateContext();
-
-  const src = useMemo(() => {
-    return (
-      template?.thumbnailImageUrl
-        ?.replace(/^http:/, '')
-        .replace(/^https:/, '') ||
-      'https://via.assets.so/img.jpg?w=200&h=270&tc=white&bg=#eeeeee'
-    );
-  }, [template]);
-
-  const aspectRatio = useMemo(() => {
-    switch (template?.imageAspectRatio) {
-      case 'square':
-        return '1 / 1';
-      case 'rectangle':
-      default:
-        return '1.51 / 1';
-    }
-  }, [template]);
-
-  const handleClick = useCallback(
-    (action: ButtonAction): MouseEventHandler<HTMLButtonElement> => {
-      return function clickHandler() {
-        switch (action.type) {
-          case 'message':
-          case 'MESSAGE':
-            sendMessage?.({ text: action.text });
-
-            return;
-          case 'uri':
-          case 'URI':
-            safeWindowOpen(
-              action.uri,
-              action.target || defaultLinkTarget || '_blank'
-            );
-
-            return;
-          case 'emit':
-          case 'EMIT':
-            onTemplateBtnClick?.(action.payload, {
-              sse: {
-                sendMessage: (payload) => {
-                  sendMessage?.(payload);
-                },
-              },
-            });
-
-            return;
-        }
-      };
-    },
-    [sendMessage, onTemplateBtnClick, defaultLinkTarget]
-  );
-
-  return (
-    <div
-      className={clsx('asgard-card', styles.card_root)}
-      style={customStyle?.style}
-    >
-      {template?.thumbnailImageUrl && (
-        <img
-          alt={template?.title}
-          src={src}
-          style={{
-            display: 'block',
-            width: '100%',
-            maxHeight: '170px',
-            objectFit: template?.imageSize,
-            aspectRatio,
-          }}
-        />
-      )}
-      <div className={styles.card_content}>
-        <h5 className={styles.card_title}>{template?.title}</h5>
-        <div className={styles.card_description}>{template?.text}</div>
-        <div className={styles.card_actions}>
-          {template?.buttons?.map((btn: { label: string; action: ButtonAction }, index: number) => (
-            <button
-              key={index}
-              onClick={handleClick(btn.action)}
-              style={customStyle?.button?.style}
-            >
-              {btn.label}
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/templates/button-template/index.ts

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

package/src/components/templates/carousel-template/carousel-template.module.scss

@@ -1,15 +0,0 @@
-.carousel_root {
-  width: 100%;
-  display: flex;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  gap: 8px;
-
-  > div {
-    flex: 0 0 auto;
-  }
-}
-
-.carousel_time {
-  justify-content: flex-end;
-}

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

@@ -1,49 +0,0 @@
-import { ReactNode } from 'react';
-import { TemplateBox, TemplateBoxContent } from '../template-box';
-import { Avatar } from '../avatar';
-import styles from './carousel-template.module.scss';
-import { Card } from '../button-template/card';
-import {
-  CarouselMessageTemplate,
-  ConversationBotMessage,
-  ButtonMessageTemplate,
-} from '@asgard-js/core';
-import { Time } from '../time';
-import { useAsgardContext } from '../../../context/asgard-service-context';
-import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
-
-interface CarouselTemplateProps {
-  message: ConversationBotMessage;
-}
-
-export function CarouselTemplate(props: CarouselTemplateProps): ReactNode {
-  const { message } = props;
-
-  const { template: themeTemplate } = useAsgardThemeContext();
-  const { avatar } = useAsgardContext();
-
-  const template = message.message.template as CarouselMessageTemplate;
-
-  return (
-    <TemplateBox
-      className="asgard-carousel-template"
-      type="bot"
-      direction="vertical"
-      style={themeTemplate?.CarouselMessageTemplate?.style}
-    >
-      <Avatar avatar={avatar} />
-      <TemplateBoxContent quickReplies={template.quickReplies}>
-        <div className={styles.carousel_root}>
-          {template.columns?.map((column: Omit<ButtonMessageTemplate, 'type' | 'quickReplies'>, index: number) => (
-            <Card
-              key={index}
-              template={column}
-              customStyle={themeTemplate?.CarouselMessageTemplate?.card}
-            />
-          ))}
-        </div>
-      </TemplateBoxContent>
-      <Time className={styles.carousel_time} time={message.time} />
-    </TemplateBox>
-  );
-}

package/src/components/templates/carousel-template/index.ts

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

package/src/components/templates/chart-template/chart-template.module.scss

@@ -1,52 +0,0 @@
-.text {
-  display: inline-block;
-  padding: 8px 12px;
-  border-radius: 8px;
-  color: white;
-  word-break: break-all;
-
-  > span {
-    word-break: break-all;
-  }
-
-  .md_container {
-    display: inline-block;
-
-    p {
-      margin: 0;
-    }
-  }
-}
-
-.text--user {
-  max-width: 75%;
-  background: #4767eb;
-  border-top-right-radius: 0;
-}
-
-.text--bot {
-  max-width: 70%;
-  background: #585858;
-  border-top-left-radius: 0;
-}
-
-.chart_time {
-  justify-content: flex-end;
-}
-
-.quick_replies_box {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.quick_reply {
-  font: inherit;
-  font-size: 13px;
-  padding: 4px 8px;
-  border-radius: 8px;
-  border: 1px solid #434343;
-  background: rgba(88, 88, 88, 0.2);
-  color: white;
-  cursor: pointer;
-}

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

@@ -1,75 +0,0 @@
-import { ReactNode, useMemo, useState, CSSProperties } from 'react';
-import { TemplateBox, TemplateBoxContent } from '../template-box';
-import { Avatar } from '../avatar';
-import { ConversationBotMessage, ChartMessageTemplate } from '@asgard-js/core';
-import { Time } from '../time';
-import { useAsgardContext } from '../../../context/asgard-service-context';
-import { VegaLite, VisualizationSpec } from 'react-vega';
-import clsx from 'clsx';
-import classes from './chart-template.module.scss';
-import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
-
-interface ChartTemplateProps {
-  message: ConversationBotMessage;
-}
-
-export function ChartTemplate(props: ChartTemplateProps): ReactNode {
-  const { message } = props;
-  const template = message.message.template as ChartMessageTemplate;
-
-  const { template: themeTemplate, botMessage } = useAsgardThemeContext();
-  const { avatar } = useAsgardContext();
-
-  const [option, setOption] = useState(
-    template?.defaultChart ?? template?.chartOptions?.[0]?.type
-  );
-
-  const options = useMemo(() => template.chartOptions, [template]);
-
-  const spec = useMemo(
-    () =>
-      (template?.chartOptions?.find((item: { type: string; title: string; spec: Record<string, unknown> }) => item.type === option)?.spec ??
-        options[0].spec) as VisualizationSpec,
-    [option, template.chartOptions, options]
-  );
-
-  const styles = useMemo<CSSProperties>(
-    () => ({
-      color: botMessage?.color,
-      backgroundColor: botMessage?.backgroundColor,
-    }),
-    [botMessage]
-  );
-
-  return (
-    <TemplateBox
-      className="asgard-chart-template"
-      type="bot"
-      direction="vertical"
-      style={themeTemplate?.ChartMessageTemplate?.style}
-    >
-      <Avatar avatar={avatar} />
-      <div className={clsx(classes.text, classes['text--bot'])} style={styles}>
-        <div>{template.title}</div>
-        <div>{template.text}</div>
-      </div>
-      {options.length > 1 && (
-        <div className={classes.quick_replies_box}>
-          {options.map((option: { type: string; title: string; spec: Record<string, unknown> }) => (
-            <button
-              key={option.type}
-              className={classes.quick_reply}
-              onClick={() => setOption(option.type)}
-            >
-              {option.title}
-            </button>
-          ))}
-        </div>
-      )}
-      <TemplateBoxContent quickReplies={template?.quickReplies}>
-        <VegaLite spec={spec} />
-      </TemplateBoxContent>
-      <Time className={classes.chart_time} time={message.time} />
-    </TemplateBox>
-  );
-}

package/src/components/templates/chart-template/index.ts

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