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

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';

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

@@ -1,43 +0,0 @@
-.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;
-    }
-  }
-}
-
-.hint_text {
-  color: white;
-}
-
-.time {
-  font-size: 12px;
-  color: rgba(140, 140, 140, 1);
-}

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

@@ -1,76 +0,0 @@
-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>
-      <div 
-        className={classes.hint_text}
-        style={themeTemplate?.HintMessageTemplate?.style}
-      >
-        {template.text}
-      </div>
-    </div>
-  );
-}

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

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

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

@@ -1,67 +0,0 @@
-.image_box {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  max-width: 80%;
-  border-radius: 8px;
-  box-sizing: border-box;
-  > img {
-    width: 100%;
-    border-radius: 8px;
-  }
-}
-
-.time {
-  justify-content: flex-end;
-}
-
-.quick_replies_box {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.full_screen {
-  display: flex;  
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: rgba(30, 30, 30, 0.8);
-  backdrop-filter: blur(5px);
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-  > .imageOrigin {
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    max-height: 90%;
-    border-radius: 8px;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-  }
-  > .full_screen_close {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    font-size: 24px;
-    cursor: pointer;
-    z-index: 9999;
-  }
-}
-
-.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/image-template/image-template.tsx

@@ -1,58 +0,0 @@
-import { ReactNode, useState } from 'react';
-import { TemplateBox, TemplateBoxContent } from '../template-box';
-import { Avatar } from '../avatar';
-import styles from './image-template.module.scss';
-import { ConversationBotMessage, ImageMessageTemplate } from '@asgard-js/core';
-import { useAsgardContext } from '../../../context/asgard-service-context';
-import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
-import CloseSvg from '../../../icons/close.svg?react';
-
-interface ImageTemplateProps {
-  message: ConversationBotMessage;
-}
-
-export function ImageTemplate(props: ImageTemplateProps): ReactNode {
-  const { message } = props;
-  const template = message.message.template as ImageMessageTemplate;
-  const { previewImageUrl, originalContentUrl } = template;
-
-  const { template: themeTemplate } = useAsgardThemeContext();
-
-  const { avatar } = useAsgardContext();
-  const [isFullScreen, setIsFullScreen] = useState(false);
-  if (isFullScreen) {
-    return (
-      <div
-        className={styles.full_screen}
-        onClick={() => setIsFullScreen(false)}
-      >
-        <div className={styles.full_screen_close}>
-          <CloseSvg />
-        </div>
-        <div
-          className={styles.imageOrigin}
-          style={{ backgroundImage: `url(${originalContentUrl})` }}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <TemplateBox
-      className="asgard-image-template"
-      type="bot"
-      direction="horizontal"
-      style={themeTemplate?.ImageMessageTemplate?.style}
-    >
-      <Avatar avatar={avatar} />
-      <TemplateBoxContent
-        quickReplies={template.quickReplies}
-        time={message.time}
-      >
-        <div className={styles.image_box} onClick={() => setIsFullScreen(true)}>
-          <img src={previewImageUrl} alt="Conversation content" />
-        </div>
-      </TemplateBoxContent>
-    </TemplateBox>
-  );
-}

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

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

package/src/components/templates/index.ts

@@ -1,10 +0,0 @@
-export * from './template-box';
-
-export * from './button-template';
-export * from './text-template';
-export * from './carousel-template';
-export * from './hint-template';
-export * from './chart-template';
-export * from './image-template';
-
-export * from './quick-replies';

package/src/components/templates/quick-replies/index.ts

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

package/src/components/templates/quick-replies/quick-replies.module.scss

@@ -1,16 +0,0 @@
-.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/quick-replies/quick-replies.tsx

@@ -1,47 +0,0 @@
-import { ReactNode, useCallback } from 'react';
-import styles from './quick-replies.module.scss';
-import { useAsgardContext } from '../../../context/asgard-service-context';
-import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
-import clsx from 'clsx';
-
-interface QuickRepliesProps {
-  quickReplies: { text: string }[];
-}
-
-export function QuickReplies(props: QuickRepliesProps): ReactNode {
-  const { quickReplies } = props;
-
-  const { template, botMessage } = useAsgardThemeContext();
-  const { sendMessage, isConnecting } = useAsgardContext();
-
-  const onClick = useCallback(
-    (text: string) => sendMessage?.({ text }),
-    [sendMessage]
-  );
-
-  if (!quickReplies?.length) {
-    return null;
-  }
-
-  return (
-    <div
-      className={clsx('asgard-quick-replies', styles.quick_replies_box)}
-      style={template?.quickReplies?.style}
-    >
-      {quickReplies.map((quickReply) => (
-        <button
-          key={quickReply.text}
-          className={styles.quick_reply}
-          style={{
-            ...template?.quickReplies?.button?.style,
-            backgroundColor: botMessage?.quickReplyBackgroundColor || template?.quickReplies?.button?.style?.backgroundColor,
-          }}
-          disabled={isConnecting}
-          onClick={() => onClick(quickReply.text)}
-        >
-          {quickReply.text}
-        </button>
-      ))}
-    </div>
-  );
-}

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

@@ -1,2 +0,0 @@
-export * from './template-box';
-export * from './template-box-content';

package/src/components/templates/template-box/template-box-content.module.scss

@@ -1,13 +0,0 @@
-.template_box_content {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.content {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-}