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

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