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

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, 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

@@ -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 '../../../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 } = 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;
+}

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

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

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

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

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

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

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

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

@@ -0,0 +1,131 @@
+.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;
+    width: 100%;
+
+    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;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.typing-indicator {
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+
+  .dot {
+    width: 2px;
+    height: 2px;
+    margin: 0 2px;
+    background-color: white;
+    border-radius: 50%;
+
+    animation: blink 1.4s infinite ease-in-out both;
+
+    &:nth-child(1) {
+      animation-delay: 0s;
+    }
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+    &:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+  }
+}
+
+.table_container {
+  overflow-x: scroll;
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    min-width: 600px;
+    font-size: 14px;
+    background-color: #1f1f1f;
+    color: rgba(255, 255, 255, 0.85);
+    border: 1px solid #333;
+    border-radius: 4px;
+    overflow: hidden;
+
+    thead {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      background-color: #141414;
+    }
+
+    th,
+    td {
+      padding: 12px 16px;
+      border-bottom: 1px solid #333;
+      text-align: left;
+      white-space: nowrap;
+      transition: background-color 0.3s, color 0.3s;
+    }
+
+    th {
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.95);
+    }
+
+    tbody tr:nth-child(odd) {
+      background-color: #1c1c1c;
+    }
+
+    tbody tr:nth-child(even) {
+      background-color: #111;
+    }
+
+    tbody tr:hover td {
+      background-color: #262626;
+    }
+
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
+  }
+}
+
+@keyframes blink {
+  0%,
+  80%,
+  100% {
+    opacity: 0.2;
+    transform: translateY(0);
+  }
+  40% {
+    opacity: 1;
+    transform: translateY(-5px);
+  }
+}

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

@@ -0,0 +1,90 @@
+import { CSSProperties, ReactNode, useMemo } from 'react';
+import clsx from 'clsx';
+import { ConversationBotMessage, ConversationMessage } from '@asgard-js/core';
+import { TemplateBox, TemplateBoxContent } from '../template-box';
+import classes from './text-template.module.scss';
+import { Avatar } from '../avatar';
+import { Time } from '../time';
+import { useAsgardContext } from '../../../context/asgard-service-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
+import { useMarkdownRenderer } from '../../../hooks/use-react-markdown-renderer';
+
+interface TextTemplateProps {
+  message: ConversationMessage;
+}
+
+export function TextTemplate(props: TextTemplateProps): ReactNode {
+  const { message } = props;
+
+  const { avatar } = useAsgardContext();
+
+  const theme = useAsgardThemeContext();
+
+  const { htmlBlocks, lastTypingText } = useMarkdownRenderer(
+    (message as ConversationBotMessage)?.message?.text || '',
+    20
+  );
+
+  const rootStyle = theme?.template?.TextMessageTemplate?.style;
+
+  const styles = useMemo<CSSProperties>(() => {
+    switch (message.type) {
+      case 'user':
+        return {
+          color: theme?.userMessage?.color,
+          backgroundColor: theme?.userMessage?.backgroundColor,
+        };
+      case 'bot':
+        return {
+          color: theme?.botMessage?.color,
+          backgroundColor: theme?.botMessage?.backgroundColor,
+        };
+      default:
+        return {};
+    }
+  }, [message, theme]);
+
+  if (message.type === 'error') return null;
+
+  if (message.type === 'user') {
+    return (
+      <TemplateBox
+        className="asgard-text-template asgard-text-template--user"
+        type="user"
+        direction="horizontal"
+        style={rootStyle}
+      >
+        <div
+          className={clsx(classes.text, classes['text--user'])}
+          style={styles}
+        >
+          {message.text}
+        </div>
+        <Time time={message.time} />
+      </TemplateBox>
+    );
+  }
+
+  return (
+    <TemplateBox
+      className="asgard-text-template asgard-text-template--bot"
+      type="bot"
+      direction="horizontal"
+      style={rootStyle}
+    >
+      <Avatar avatar={avatar} />
+      <TemplateBoxContent
+        time={message.time}
+        quickReplies={message.message.template?.quickReplies}
+      >
+        <div
+          className={clsx(classes.text, classes['text--bot'])}
+          style={styles}
+        >
+          {htmlBlocks}
+          {lastTypingText ?? ''}
+        </div>
+      </TemplateBoxContent>
+    </TemplateBox>
+  );
+}