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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+.hint_root {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px 12px;
+  gap: 4px;
+  border-radius: 2px;
+  background: rgba(88, 88, 88, 0.2);
+  font-size: 13px;
+  color: white;
+  word-break: break-all;
+
+  &.hint_root__error {
+    color: var(--asg-color-error);
+  }
+
+  .error_hint_title {
+    display: flex;
+    align-items: center;
+    gap: var(--asg-spacing-2);
+    color: var(--asg-color-error);
+  }
+
+  .error_hint_message {
+    font-size: 12px;
+    color: white;
+
+    > span {
+      border-bottom: 1px solid white;
+      cursor: pointer;
+    }
+  }
+}
+
+.time {
+  font-size: 12px;
+  color: rgba(140, 140, 140, 1);
+}

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

@@ -0,0 +1,71 @@
+import { ReactNode, useCallback } from 'react';
+import classes from './hint-template.module.scss';
+import { formatTime } from '../../../utils';
+import {
+  ConversationErrorMessage,
+  ConversationMessage,
+  MessageTemplateType,
+} from '@asgard-js/core';
+import { useAsgardTemplateContext, useAsgardThemeContext } from '../../../context';
+import clsx from 'clsx';
+
+interface HintTemplateProps {
+  message: ConversationMessage;
+}
+
+export function HintTemplate(props: HintTemplateProps): ReactNode {
+  const { message } = props;
+
+  const { template: themeTemplate } = useAsgardThemeContext();
+  const { onErrorClick, errorMessageRenderer } = useAsgardTemplateContext();
+
+  const onErrorHintClick = useCallback(() => {
+    onErrorClick?.(message as ConversationErrorMessage);
+  }, [message, onErrorClick]);
+
+  if (message.type === 'user') return null;
+
+  if (message.type === 'error')
+    return (
+      <div
+        className={clsx(
+          'asgard-hint-template asgard-hint-template--error',
+          classes.hint_root
+        )}
+      >
+        {errorMessageRenderer?.(message) ?? (
+          <>
+            <div className={classes.error_hint_title}>
+              <span className={classes.time}>{formatTime(message.time)}</span>
+              <span>Unexpected error</span>
+            </div>
+            {onErrorClick && (
+              <div
+                className={classes.error_hint_message}
+                onClick={onErrorHintClick}
+              >
+                Click <span>here</span> to view the report.
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    );
+
+  const template = message.message.template;
+
+  if (template.type !== MessageTemplateType.HINT) return null;
+
+  return (
+    <div
+      className={clsx(
+        'asgard-hint-template asgard-hint-template--hint',
+        classes.hint_root
+      )}
+      style={themeTemplate?.HintMessageTemplate?.style}
+    >
+      <div className={classes.time}>{formatTime(message.time)}</div>
+      {template.text}
+    </div>
+  );
+}

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

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