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

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 'src/context/asgard-service-context';
+import clsx from 'clsx';
+import { TemplateBox, TemplateBoxContent } from '../template-box';
+import { Avatar } from '../avatar';
+import { useDebounce, useResizeObserver } from 'src/hooks';
+import classes from './text-template.module.scss';
+import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import { useMarkdownRenderer } from './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 'src/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 'src/context/asgard-service-context';
+import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import { useMarkdownRenderer } from './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>
+  );
+}