impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/TableChat/components/TableChatRightSection/ChatDefaultMessageType/ChatDefaultMessageType.jsx

@@ -1,216 +0,0 @@
-import { ReactComponent as ThreeDotIcon } from "../../../../../assets/treedotIcon.svg";
-import { ReactComponent as TreadChatIcon } from "../../../../../assets/treadChatIcon.svg";
-import PinnedIcon from "../../../../../assets/pinedIcon.svg";
-import UnpinIcon from "../../../../../assets/unpinedIcon.svg";
-import "./ChatDefaultMessageType.styles.scss";
-import CheckBlueIcon from "../../../../../assets/checkBlueIcon.svg";
-import WarningRedIcon from "../../../../../assets/warningRedIcon.svg";
-import ThumbsUpYellowIcon from "../../../../../assets/thumbsUpYellowIcon.svg";
-import NotAllowedGreenIcon from "../../../../../assets/notAllowedGreenIcon.svg";
-import { Button } from "../../../../Button";
-import React, { useEffect, useState } from "react";
-import DOMPurify from "dompurify";
-
-const ChatDefaultMessageType = ({
-  content,
-  timestamp,
-  handleClickOnMoreOptions,
-  priority = "default",
-  edited = false,
-  onThreadClick,
-  pinned,
-  visibility,
-  onPin,
-  isUser = true,
-  isThreadIconVisible,
-  isPinChatIconvisible,
-  isHighlighted = false,
-  highlightColor = null,
-}) => {
-  // Function to safely render HTML content
-  const renderContent = (content) => {
-    if (typeof content === "string") {
-      // Check if content contains HTML tags
-      const hasHtmlTags = /<[^>]*>/g.test(content);
-
-      if (hasHtmlTags) {
-        // Sanitize HTML content for security
-        const sanitizedContent = DOMPurify.sanitize(content, {
-          ALLOWED_TAGS: [
-            "p",
-            "span",
-            "strong",
-            "em",
-            "u",
-            "br",
-            "a",
-            "ul",
-            "ol",
-            "li",
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "h5",
-            "h6",
-            "s",
-            "mark",
-          ],
-          ALLOWED_ATTR: [
-            "class",
-            "data-type",
-            "data-id",
-            "data-label",
-            "data-mention-suggestion-char",
-            "href",
-            "target",
-            "rel",
-          ],
-        });
-
-        return (
-          <div
-            className="message-content"
-            dangerouslySetInnerHTML={{ __html: sanitizedContent }}
-          />
-        );
-      } else {
-        // Plain text content
-        return <p>{content}</p>;
-      }
-    } else {
-      // JSX content
-      return content;
-    }
-  };
-
-  const [showPinned, setShowPinned] = useState(pinned);
-
-  // Create custom highlight style if highlightColor is provided
-  const customHighlightStyle =
-    isHighlighted && highlightColor
-      ? {
-          borderColor: highlightColor,
-          boxShadow: `0px 0px 8px ${highlightColor}40`, // 40 is 25% opacity in hex
-        }
-      : {};
-
-  const handlePin = async (isPinned) => {
-    try {
-      const pinnedResponse = await onPin(isPinned);
-
-      setShowPinned(pinnedResponse?.isPinned);
-    } catch (error) {
-      console.error("Error pinning message:", error);
-    }
-  };
-  useEffect(() => {
-    setShowPinned(pinned);
-  }, [pinned]);
-
-  const priorityContent = {
-    normal: (
-      <span className="priority-label">
-        <img src={CheckBlueIcon} alt="checkBlueIcon" /> Normal Priority
-      </span>
-    ),
-    high: (
-      <span className="priority-label">
-        <img src={WarningRedIcon} alt="warningRedIcon" /> High Priority
-      </span>
-    ),
-    medium: (
-      <span className="priority-label">
-        <img src={ThumbsUpYellowIcon} alt="thumbsUpYellowIcon" /> Medium
-        Priority
-      </span>
-    ),
-    low: (
-      <span className="priority-label">
-        <img src={NotAllowedGreenIcon} alt="notAllowedGreenIcon" /> Low Priority
-      </span>
-    ),
-  };
-  // pinned msg
-  const pinnedIconSrc = showPinned ? PinnedIcon : UnpinIcon;
-  return (
-    <div
-      className={`message-text ${priority} ${
-        isHighlighted ? "highlighted-message-content" : ""
-      }`}
-      style={customHighlightStyle}
-    >
-      <section className="priority-container">
-        {priorityContent[priority]}
-      </section>
-      {renderContent(content)}
-      <div className={`message-header ${!isUser ? "flex-end" : ""}`}>
-        {isUser ? (
-          <div
-            className={`message-action-container ${
-              visibility ? "visibility-enabled" : ""
-            }`}
-          >
-            <Button
-              className="btn_border_default participants-button"
-              icon={<ThreeDotIcon />}
-              iconPlacement="left"
-              size="small"
-              type="default"
-              variant="tertiary"
-              onClick={handleClickOnMoreOptions}
-            />
-
-            {isThreadIconVisible && (
-              <Button
-                className="btn_border_default participants-button"
-                icon={<TreadChatIcon />}
-                iconPlacement="left"
-                size="large"
-                type="default"
-                variant="tertiary"
-                onClick={onThreadClick}
-              />
-            )}
-          </div>
-        ) : null}
-        <div className="message-action-info-container">
-          <div style={{ display: !isPinChatIconvisible ? "none" : "inline" }}>
-            {showPinned && (
-              <Button
-                icon={<img src={pinnedIconSrc} />}
-                iconPlacement="left"
-                size="small"
-                type="default"
-                variant="tertiary"
-                onClick={() => {
-                  handlePin(!showPinned);
-                }}
-                className="pin-button"
-              />
-            )}
-            {!showPinned && (
-              <Button
-                icon={<img src={PinnedIcon} />}
-                iconPlacement="left"
-                size="small"
-                type="default"
-                variant="tertiary"
-                onClick={() => {
-                  handlePin(!showPinned);
-                }}
-                className="pin-button-hover"
-              />
-            )}
-          </div>
-          <span className="message-timestamp">
-            {timestamp}
-            {edited && <span className="edited-label"> (edited)</span>}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ChatDefaultMessageType;

package/src/components/TableChat/components/TableChatRightSection/ChatDefaultMessageType/ChatDefaultMessageType.styles.scss

@@ -1,291 +0,0 @@
-@import "../../../../../styles/index.scss";
-
-.chat-message {
-  .message-text {
-    padding: 12px 16px;
-    border-radius: 10px;
-    box-shadow: 0px 1px 2px $boxShadowSoft;
-    font-size: 14px;
-    line-height: 1.4;
-    color: $mainFontColor;
-    white-space: pre-wrap;
-    word-break: break-word;
-    background-color: $lightBlueColor;
-    transition: all 0.3s ease;
-
-    // Highlighted message styling
-    &.highlighted-message-content {
-      border: 2px solid $primaryColor;
-      box-shadow: 0px 0px 8px rgba($primaryColor, 0.3);
-      animation: highlightScalePulse 1.5s infinite;
-    }
-
-    .priority-container {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      margin-bottom: 12px;
-      .priority-label {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        font-size: 14px;
-      }
-    }
-
-    &.low {
-      border-left: 3px solid $avatarBgColor;
-    }
-
-    &.medium {
-      border-left: 3px solid $warningAlertIcon;
-    }
-
-    &.high {
-      border-left: 3px solid $destructiveBg;
-    }
-
-    &.normal {
-      border-left: 3px solid $primaryColor;
-    }
-
-    p {
-      margin: 0 0 8px 0;
-      color: $textButtonFontColor;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 160%;
-      letter-spacing: 0.14px;
-      text-align: left;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    // Message content container for HTML rendering
-    .message-content {
-      margin: 0;
-
-      p {
-        margin: 0 0 8px 0;
-        color: $textButtonFontColor;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 160%;
-        letter-spacing: 0.14px;
-        text-align: left;
-        margin-bottom: 0;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-
-      // Mention styling
-      .mention {
-        background-color: rgba($primaryColor, 0.1);
-        border: 1px solid rgba($primaryColor, 0.3);
-        border-radius: 4px;
-        color: $primaryColor;
-        font-weight: 600;
-        padding: 0px 6px;
-        text-decoration: none;
-        display: inline-block;
-        margin: 0px 2px;
-        transition: all 0.2s ease;
-
-        &:hover {
-          background-color: rgba($primaryColor, 0.15);
-          border-color: rgba($primaryColor, 0.5);
-        }
-      }
-
-      // Text formatting styles
-      strong {
-        font-weight: 700;
-        color: $textButtonFontColor;
-      }
-
-      em {
-        font-style: italic;
-        color: $textButtonFontColor;
-      }
-
-      u {
-        text-decoration: underline;
-        color: $textButtonFontColor;
-      }
-
-      // Highlight styling
-      mark {
-        background-color: #fef3c7;
-        border-radius: 4px;
-        padding: 2px 4px;
-        color: $textButtonFontColor;
-      }
-
-      // Link styling
-      a {
-        color: $primaryColor;
-        text-decoration: underline;
-
-        &:hover {
-          color: darken($primaryColor, 10%);
-        }
-      }
-
-      // List styling
-      ul,
-      ol {
-        margin: 8px 0;
-        padding-left: 20px;
-
-        li {
-          margin: 4px 0;
-          color: $textButtonFontColor;
-        }
-      }
-
-      // Heading styles
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        margin: 12px 0 8px 0;
-        color: $textButtonFontColor;
-        font-weight: 600;
-
-        &:first-child {
-          margin-top: 0;
-        }
-      }
-
-      h1 {
-        font-size: 20px;
-      }
-      h2 {
-        font-size: 18px;
-      }
-      h3 {
-        font-size: 16px;
-      }
-      h4 {
-        font-size: 15px;
-      }
-      h5 {
-        font-size: 14px;
-      }
-      h6 {
-        font-size: 13px;
-      }
-    }
-
-    .message-action-info-container {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      .pin-button {
-        // Always visible when showPinned is true
-        display: flex;
-      }
-
-      .pin-button-hover {
-        // Hidden by default, shown on hover
-        display: none;
-      }
-    }
-
-    // Show hover pin button when hovering over message-text
-    &:hover {
-      .message-action-info-container {
-        .pin-button-hover {
-          display: flex;
-        }
-      }
-    }
-  }
-  .flex-end {
-    justify-content: flex-end;
-    min-height: 24px;
-  }
-}
-
-.chat-message.assistant-message {
-  .message-text {
-    background: linear-gradient(
-      92.25deg,
-      $disabledSecondaryBg -0.92%,
-
-      $inactiveInputBackground 98.11%
-    );
-    margin-right: 60px;
-    margin-left: 0;
-    color: $textButtonFontColor;
-  }
-}
-
-.message-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  justify-content: space-between;
-
-  .message-action-container {
-    visibility: hidden;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    img,
-    svg {
-      cursor: pointer;
-      color: $lightGrayColor;
-      width: 14px;
-    }
-  }
-  .visibility-enabled {
-    visibility: visible;
-  }
-}
-
-.btn_border_default {
-  border: none !important;
-  background-color: transparent !important;
-}
-
-.message-timestamp {
-  color: $inputInfoColor;
-  font-size: 12px;
-  font-weight: 400;
-
-  .edited-label {
-    color: $inputInfoColor;
-    font-style: italic;
-    opacity: 0.8;
-  }
-}
-
-// Animation for highlighted message with scale effect
-@keyframes highlightScalePulse {
-  0% {
-    transform: scale(1);
-    box-shadow: 0px 0px 0px rgba($primaryColor, 0);
-  }
-  30% {
-    transform: scale(1.03);
-    box-shadow: 0px 0px 12px rgba($primaryColor, 0.6);
-  }
-  60% {
-    transform: scale(0.98);
-    box-shadow: 0px 0px 10px rgba($primaryColor, 0.4);
-  }
-  100% {
-    transform: scale(1);
-    box-shadow: 0px 0px 8px rgba($primaryColor, 0.3);
-  }
-}

package/src/components/TableChat/components/TableChatRightSection/ChatDeleteMessageType/ChatDeletedMessageType.jsx

@@ -1,19 +0,0 @@
-import React from "react";
-import BlockIcon from "@mui/icons-material/Block";
-import "./DeletedMessage.styles.scss";
-
-export const ChatDeletedMessageType = ({ timestamp, isUser = false }) => {
-  return (
-    <div
-      className={`deleted-message ${
-        isUser ? "user-deleted-message" : "assistant-deleted-message"
-      }`}
-    >
-      <div className="deleted-message-content">
-        <BlockIcon className="delete-icon" />
-        <span className="deleted-text">This message was deleted</span>
-      </div>
-      {timestamp && <span className="deleted-timestamp">{timestamp}</span>}
-    </div>
-  );
-};

package/src/components/TableChat/components/TableChatRightSection/ChatDeleteMessageType/DeletedMessage.styles.scss

@@ -1,55 +0,0 @@
-@import "../../../../../styles/index.scss";
-
-.deleted-message {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 8px 12px;
-  background-color: $offWhiteColor;
-  border-radius: $borderRadius;
-  max-width: fit-content;
-
-  .deleted-message-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: $lightGrayColor;
-    font-size: 14px;
-
-    .delete-icon {
-      font-size: 16px;
-      color: $lightGrayColor;
-    }
-
-    .deleted-text {
-      font-style: italic;
-    }
-  }
-
-  .deleted-timestamp {
-    font-size: 12px;
-    color: $inputInfoColor;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  // User deleted message (right-aligned)
-  &.user-deleted-message {
-    margin-left: auto;
-    margin-right: 0;
-
-    .deleted-timestamp {
-      justify-content: flex-end;
-    }
-  }
-
-  // Assistant deleted message (left-aligned)
-  &.assistant-deleted-message {
-    margin-left: 0;
-    margin-right: auto;
-
-    .deleted-timestamp {
-      justify-content: flex-end;
-    }
-  }
-}

package/src/components/TableChat/components/TableChatRightSection/ChatEditedMessageType/ChatEditedMessageType.jsx

@@ -1,61 +0,0 @@
-import ThreeDotIcon from "../../../../../assets/treedotIcon.svg";
-import TreadChatIcon from "../../../../../assets/treadChatIcon.svg";
-import PinnedIcon from "../../../../../assets/pinedIcon.svg";
-import UnpinIcon from "../../../../../assets/unpinedIcon.svg";
-import React, { useState } from "react";
-
-const ChatEditedMessageType = ({
-  content,
-  timestamp,
-  handleClickOnMoreOptions,
-  priority = "default",
-  edited = false,
-  onThreadClick,
-  pinned,
-  onPin,
-}) => {
-  const [showPinned, setShowPinned] = useState(pinned);
-  const handlePin = async (isPinned) => {
-    try {
-      const response = await onPin(isPinned);
-      console.log("Response: [DefaultMessageType]", response);
-      if (response) {
-        setShowPinned(isPinned);
-      }
-      return response;
-    } catch (error) {
-      console.error("Error pinning message:", error);
-    }
-  };
-  return (
-    <div className={`message-text ${priority}`}>
-      {typeof content === "string" ? <p>{content}</p> : content}
-      <div className={`message-header ${!isUser ? "flex-end" : ""}`}>
-        <div className="message-action-container">
-          <img
-            src={ThreeDotIcon}
-            alt="threedot"
-            onClick={handleClickOnMoreOptions}
-          />
-          <img src={TreadChatIcon} alt="treaddd" onClick={onThreadClick} />
-        </div>
-        <div className="message-action-info-container">
-          <img
-            src={pinned ? PinnedIcon : UnpinIcon}
-            alt="unpinned"
-            width={12.63}
-            height={12.63}
-            style={{ cursor: "pointer" }}
-            onClick={() => handlePin(!showPinned)}
-          />
-          <span className="message-action-info">
-            {timestamp}
-            {edited && <span className="edited-label"> (edited)</span>}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ChatEditedMessageType;

package/src/components/TableChat/components/TableChatRightSection/ChatEditedMessageType/ChatEditedMessageType.styles.scss

@@ -1,13 +0,0 @@
-@import "../../../../../styles/index.scss";
-
-.message-action-info {
-  color: $inputInfoColor;
-  font-size: 12px;
-  font-weight: 400;
-
-  .edited-label {
-    color: $inputInfoColor;
-    font-style: italic;
-    opacity: 0.8;
-  }
-}