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

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

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

@@ -1,131 +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;
-    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

@@ -1,94 +0,0 @@
-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 { botMessage } = theme;
-
-  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 {
-          color: theme?.chatbot?.primaryComponent?.secondaryColor || theme?.template?.TextMessageTemplate?.style?.color,
-          backgroundColor: botMessage?.unsentBackgroundColor,
-        };
-    }
-  }, [message, theme, botMessage]);
-
-  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>
-  );
-}