@asgard-js/react 0.0.43 → 0.0.44-canary.2

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

package/src/components/templates/template-box/template-box-content.tsx

@@ -1,30 +0,0 @@
-import { ReactNode } from 'react';
-import styles from './template-box-content.module.scss';
-import { QuickReplies } from '../quick-replies';
-import { Time } from '../time';
-import clsx from 'clsx';
-
-interface TemplateBoxContentProps {
-  children: ReactNode;
-  time?: Date;
-  quickReplies?: { text: string }[];
-}
-
-export function TemplateBoxContent(props: TemplateBoxContentProps): ReactNode {
-  const { quickReplies, time, children } = props;
-
-  return (
-    <div
-      className={clsx(
-        'asgard-template-box-content',
-        styles.template_box_content
-      )}
-    >
-      <div className={styles.content}>
-        {children}
-        <Time time={time} />
-      </div>
-      {!!quickReplies?.length && <QuickReplies quickReplies={quickReplies} />}
-    </div>
-  );
-}

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

@@ -1,19 +0,0 @@
-.template_box {
-  width: 100%;
-  display: flex;
-  gap: 8px;
-}
-
-.template_box--bot {
-  &.template_box--horizontal {
-    flex-direction: row;
-  }
-
-  &.template_box--vertical {
-    flex-direction: column;
-  }
-}
-
-.template_box--user {
-  flex-direction: row-reverse;
-}

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

@@ -1,48 +0,0 @@
-import { CSSProperties, ReactNode, useMemo } from 'react';
-import styles from './template-box.module.scss';
-import clsx from 'clsx';
-
-type TemplateBoxProps =
-  | {
-      type: 'user';
-      direction: 'horizontal';
-      children: ReactNode;
-      className?: string;
-      style?: CSSProperties;
-    }
-  | {
-      type: 'bot';
-      direction: 'horizontal' | 'vertical';
-      children: ReactNode;
-      className?: string;
-      style?: CSSProperties;
-    };
-
-export function TemplateBox(props: TemplateBoxProps): ReactNode {
-  const { type, direction = 'horizontal', children, style, className } = props;
-
-  const boxClassName = useMemo(() => {
-    switch (type) {
-      case 'user':
-        return clsx(styles.template_box, styles['template_box--user']);
-      case 'bot':
-      default:
-        return clsx(
-          styles.template_box,
-          styles['template_box--bot'],
-          direction === 'horizontal'
-            ? styles['template_box--horizontal']
-            : styles['template_box--vertical']
-        );
-    }
-  }, [direction, type]);
-
-  return (
-    <div
-      className={clsx('asgard-template-box', boxClassName, className)}
-      style={style}
-    >
-      {children}
-    </div>
-  );
-}

package/src/components/templates/text-template/bot-typing-box.tsx

@@ -1,81 +0,0 @@
-import { CSSProperties, ReactNode, useCallback, useMemo, useRef } from 'react';
-import { useAsgardContext } from '../../../context/asgard-service-context';
-import clsx from 'clsx';
-import { TemplateBox, TemplateBoxContent } from '../template-box';
-import { Avatar } from '../avatar';
-import { useDebounce, useResizeObserver } from '../../../hooks';
-import classes from './text-template.module.scss';
-import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
-import { useMarkdownRenderer } from '../../../hooks/use-react-markdown-renderer';
-interface BotTypingBoxProps {
-  isTyping: boolean;
-  typingText: string | null;
-}
-
-export function BotTypingBox(props: BotTypingBoxProps): ReactNode {
-  const { isTyping, typingText } = props;
-  const { messageBoxBottomRef, avatar } = useAsgardContext();
-
-  const theme = useAsgardThemeContext();
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  const onResize = useCallback(() => {
-    messageBoxBottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messageBoxBottomRef]);
-
-  useResizeObserver({ ref, onResize });
-
-  const _isTyping = useDebounce(isTyping, 500);
-
-  const { htmlBlocks, lastTypingText } = useMarkdownRenderer(
-    typingText || '',
-    20
-  );
-
-  const styles = useMemo<CSSProperties>(
-    () => ({
-      color: theme?.botMessage?.color,
-      backgroundColor: theme?.botMessage?.backgroundColor,
-    }),
-    [theme]
-  );
-
-  const dotStyles = useMemo<CSSProperties>(
-    () => ({
-      backgroundColor: theme?.botMessage?.color,
-    }),
-    [theme]
-  );
-
-  if (!_isTyping) return null;
-
-  return (
-    <TemplateBox
-      className="asgard-text-template asgard-text-template--bot"
-      type="bot"
-      direction="horizontal"
-    >
-      <Avatar avatar={avatar} />
-      <TemplateBoxContent time={new Date()}>
-        <div
-          ref={ref}
-          className={clsx(classes.text, classes['text--bot'])}
-          style={styles}
-        >
-          <span>
-            {htmlBlocks}
-            {lastTypingText ?? ''}
-            {_isTyping && (
-              <span className={classes['typing-indicator']}>
-                <div className={classes.dot} style={dotStyles} />
-                <div className={classes.dot} style={dotStyles} />
-                <div className={classes.dot} style={dotStyles} />
-              </span>
-            )}
-          </span>
-        </div>
-      </TemplateBoxContent>
-    </TemplateBox>
-  );
-}

package/src/components/templates/text-template/bot-typing-placeholder.tsx

@@ -1,28 +0,0 @@
-import { ReactNode, useMemo } from 'react';
-import { BotTypingBox } from './bot-typing-box';
-import { useAsgardContext } from '../../../context/asgard-service-context';
-
-interface BotTypingPlaceholderProps {
-  placeholder: string;
-}
-
-export function BotTypingPlaceholder(
-  props: BotTypingPlaceholderProps
-): ReactNode {
-  const { placeholder } = props;
-
-  const { isConnecting, messages } = useAsgardContext();
-
-  const hasTypingMessage = useMemo(
-    () =>
-      Array.from(messages?.values() ?? []).some(
-        (message) => message.type === 'bot' && message.isTyping
-      ),
-    [messages]
-  );
-
-  if (isConnecting && !hasTypingMessage)
-    return <BotTypingBox isTyping typingText={placeholder} />;
-
-  return null;
-}

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

@@ -1,3 +0,0 @@
-export * from './text-template';
-export * from './bot-typing-box';
-export * from './bot-typing-placeholder';