@asgard-js/react 0.0.29 → 0.0.32-canary.0

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 'src/context/asgard-service-context';
+import { useAsgardTemplateContext } from 'src/context/asgard-template-context';
+import { safeWindowOpen } from 'src/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, index) => (
+            <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,48 @@
+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,
+} from '@asgard-js/core';
+import { Time } from '../time';
+import { useAsgardContext } from 'src/context/asgard-service-context';
+import { useAsgardThemeContext } from 'src/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, index) => (
+            <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,76 @@
+import { ReactNode, useMemo, useState, CSSProperties } from 'react';
+import { TemplateBox, TemplateBoxContent } from '../template-box';
+import { Avatar } from '../avatar';
+import { ConversationBotMessage } from '@asgard-js/core';
+import { Time } from '../time';
+import { useAsgardContext } from 'src/context/asgard-service-context';
+import { ChartMessageTemplate } from '../../../../../core/src';
+import { VegaLite, VisualizationSpec } from 'react-vega';
+import clsx from 'clsx';
+import classes from './chart-template.module.scss';
+import { useAsgardThemeContext } from 'src/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) => item.type === option)?.spec ??
+        options[0].spec) as VisualizationSpec,
+    [option, template.chartOptions]
+  );
+
+  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) => (
+            <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 'src/utils';
+import {
+  ConversationErrorMessage,
+  ConversationMessage,
+  MessageTemplateType,
+} from '@asgard-js/core';
+import { useAsgardTemplateContext, useAsgardThemeContext } from 'src/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';

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

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

@@ -0,0 +1,58 @@
+import { ReactNode, useState } from 'react';
+import { TemplateBox, TemplateBoxContent } from '../template-box';
+import { Avatar } from '../avatar';
+import styles from './image-template.module.scss';
+import { ConversationBotMessage } from '@asgard-js/core';
+import { useAsgardContext } from 'src/context/asgard-service-context';
+import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import { ImageMessageTemplate } from '../../../../../core/src';
+import CloseSvg from 'src/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="Message image" />
+        </div>
+      </TemplateBoxContent>
+    </TemplateBox>
+  );
+}

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

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

package/src/components/templates/index.ts

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

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

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

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

@@ -0,0 +1,44 @@
+import { ReactNode, useCallback } from 'react';
+import styles from './quick-replies.module.scss';
+import { useAsgardContext } from 'src/context/asgard-service-context';
+import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import clsx from 'clsx';
+
+interface QuickRepliesProps {
+  quickReplies: { text: string }[];
+}
+
+export function QuickReplies(props: QuickRepliesProps): ReactNode {
+  const { quickReplies } = props;
+
+  const { template } = 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}
+          disabled={isConnecting}
+          onClick={() => onClick(quickReply.text)}
+        >
+          {quickReply.text}
+        </button>
+      ))}
+    </div>
+  );
+}

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

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

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

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