impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/ChatBot/chatBotFooter.js

@@ -1,14 +0,0 @@
-import React from "react";
-
-export const ChatBotFooter = ({ footerText }) => {
-  return (
-    <div className="chatbot-component-footer">
-      <span className="chatbot-component-footer-text">
-        {footerText}
-        {/* <a href="#" className="chatbot-component-footer-text-link">
-          learn more
-        </a> */}
-      </span>
-    </div>
-  );
-};

package/src/components/ChatBot/chatBotLandingScreen.js

@@ -1,26 +0,0 @@
-import React from "react";
-import CloseIcon from "../../assets/close.svg";
-import { Button } from "../Button";
-import ClearIcon from "@mui/icons-material/Clear";
-
-const ChatBotLandingScreen = ({ onClose, isFullWidth }) => (
-  <div className="chatbot-landing-screen-container">
-    {!isFullWidth && (
-      <div className="chatbot-landing-screen-container-close-icon">
-        <Button
-          className="chatbot-component-header-close-icon"
-          onClick={onClose}
-          icon={<ClearIcon />}
-          iconPlacement="left"
-          size="large"
-          type="default"
-          variant="text"
-        />
-      </div>
-    )}
-    <div className="chatbot-landing-screen-container-circle-1" />
-    <div className="chatbot-landing-screen-container-circle-2" />
-  </div>
-);
-
-export default ChatBotLandingScreen;

package/src/components/ChatBot/chatInput.js

@@ -1,206 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import { Box, IconButton } from "@mui/material";
-import TextareaAutosize from "react-textarea-autosize";
-import { Button } from "../Button";
-import SendIcon from "../../assets/chatBotSendIcon.svg";
-import MicIcon from "../../assets/chatBotMicIcon.svg";
-import RefreshIcon from "../../assets/chatBotRefreshIcon.svg";
-import "./chatBot.style.scss";
-import chatbotBannerIcon from "../../assets/chatbotBannerIcon.svg";
-import ChatbotStopIcon from "../../assets/chatbotStopIcon.svg";
-import ClearIcon from "@mui/icons-material/Clear";
-import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
-import { Tooltip } from "../Tooltip";
-
-const ChatInput = ({
-  inputValue,
-  setInputValue,
-  setIsNewChat,
-  onSendIconClick,
-  setUserChats,
-  userChats,
-  handleRefresh,
-  handleSaveChat,
-  handleMicClick,
-  activeList,
-  uniqueId,
-  suggestionBanner,
-  isStopIcon,
-  onStopIconClick,
-  minRows = 1,
-  newChatScreen = false,
-  customScreen = false,
-  onCloseSuggestionBanner,
-  showSuggestionBanner,
-  customInputComponent,
-}) => {
-  const inputRef = useRef(null);
-  const [isFixed, setIsFixed] = useState(false);
-  const [isScrollable, setIsScrollable] = useState(false);
-  const [height, setHeight] = useState("auto");
-  const MAX_HEIGHT = 142;
-
-  const handleHeightChange = (textareaHeight) => {
-    if (textareaHeight) {
-      if (textareaHeight > 40) {
-        setIsFixed(true);
-      }
-      if (textareaHeight >= MAX_HEIGHT) {
-        setIsScrollable(true);
-      } else {
-        setIsScrollable(false);
-      }
-      let newHeight =
-        textareaHeight > (newChatScreen ? 88 : 40)
-          ? textareaHeight + 40
-          : "auto";
-      if (newHeight !== "auto") {
-        if (newHeight <= MAX_HEIGHT) {
-          setHeight(newHeight);
-        } else {
-          setHeight(MAX_HEIGHT);
-        }
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (inputValue === "") {
-      setHeight("auto");
-      setIsFixed(false);
-    }
-  }, [inputValue]);
-
-  const handleSendMessage = () => {
-    setIsNewChat?.(false);
-    setInputValue("");
-    inputRef.current?.blur();
-    let newUserChat = {
-      id: userChats.length + 1,
-      text: inputValue,
-      role: "user",
-      timestamp: new Date().toISOString(),
-    };
-    setUserChats((prev) => [...prev, newUserChat]);
-    onSendIconClick?.(newUserChat, activeList, uniqueId);
-  };
-
-  const handleStopIconClick = () => {
-    onStopIconClick?.(activeList);
-  };
-
-  return (
-    <Box
-      className={`chat-input-box ${newChatScreen ? "new-chat-screen" : ""} ${
-        customScreen ? "custom-screen" : ""
-      }`}
-    >
-      {showSuggestionBanner && (
-        <div className="suggestion-banner">
-          <div className="suggestion-banner-content">
-            <img src={chatbotBannerIcon} />
-            <span className="suggestion-banner-text">
-              {suggestionBanner.freeTextContent}
-            </span>
-          </div>
-          <IconButton
-            size="small"
-            onClick={onCloseSuggestionBanner}
-            disableRipple
-            sx={{ color: "#60697D" }}
-          >
-            <ClearIcon fontSize="16px" />
-          </IconButton>
-        </div>
-      )}
-      {customInputComponent ? (
-        customInputComponent
-      ) : (
-        <div className="chat-input-container">
-          <div
-            className={`chat-input-wrapper ${isFixed ? "stacked" : ""} ${
-              (!isFixed || inputValue === "") && !newChatScreen ? "empty" : ""
-            } ${!newChatScreen && !isFixed ? "single-line-textarea" : ""}`}
-            style={{ height: height }}
-          >
-            <TextareaAutosize
-              ref={inputRef}
-              minRows={minRows}
-              className={`chat-textarea ${isScrollable ? "scrollable" : ""}`}
-              placeholder="Ask anything..."
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              onHeightChange={handleHeightChange}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && !e.shiftKey) {
-                  e.preventDefault();
-                  if (inputValue.trim().length > 0) {
-                    handleSendMessage();
-                  }
-                }
-              }}
-            />
-
-            {/* Buttons */}
-            <div className={`chat-actions ${isFixed ? "fixed" : ""} `}>
-              {handleRefresh && (
-                <Button
-                  icon={<img src={RefreshIcon} />}
-                  iconPlacement="left"
-                  size="large"
-                  type="default"
-                  variant="url"
-                  onClick={handleRefresh}
-                />
-              )}
-              {handleMicClick && (
-                <Button
-                  className=""
-                  icon={<img src={MicIcon} />}
-                  iconPlacement="left"
-                  size="large"
-                  type="default"
-                  variant="tertiary"
-                  onClick={handleMicClick}
-                />
-              )}
-
-              {handleSaveChat && (
-                <Tooltip title="Save Chat" variant="tertiary">
-                  <Button
-                    icon={<SaveOutlinedIcon />}
-                    iconPlacement="left"
-                    size="large"
-                    type="default"
-                    variant="tertiary"
-                    onClick={handleSaveChat}
-                    id="chat-input-save-button"
-                  />
-                </Tooltip>
-              )}
-
-              <Button
-                icon={
-                  !isStopIcon ? (
-                    <img src={SendIcon} />
-                  ) : (
-                    <img src={ChatbotStopIcon} />
-                  )
-                }
-                iconPlacement="left"
-                size="large"
-                type="default"
-                variant="primary"
-                onClick={!isStopIcon ? handleSendMessage : handleStopIconClick}
-                id="chat-input-send-button"
-                className={isStopIcon ? "stop-icon-button" : ""}
-              />
-            </div>
-          </div>
-        </div>
-      )}
-    </Box>
-  );
-};
-
-export default ChatInput;

package/src/components/ChatBot/chatbotModuleMenu.js

@@ -1,278 +0,0 @@
-import React, { useState, useEffect } from "react";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import SmartBotIcon from "../../assets/smartBotAlan.svg";
-import { Button } from "../Button";
-import ActiveIcon from "../../assets/activeModuleIcon.svg";
-import CloseThreadIcon from "../../assets/close.svg";
-import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
-import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
-import HomeIcon from "../../assets/chat-home-icon.svg";
-import { Loader } from "../Loader";
-import ClearIcon from "@mui/icons-material/Clear";
-
-export const ChatbotModuleMenu = ({
-  hideMenuArrow,
-  onModuleClick,
-  moduleList,
-  activeList,
-  hideChildren = false,
-  isModuleListLoading,
-  hideSmartBotIcon = false,
-  hideCenterOptions = false,
-  threadList: threadListProp,
-  activeThread: activeThreadProp,
-  handleSavedChat,
-  onClose,
-  isFullWidth,
-  onMinimiseChatBot,
-}) => {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [activeModule, setActiveModule] = useState(
-    moduleList.find((module) => module.isActive)?.name || ""
-  );
-  const [threadList, setThreadList] = useState(threadListProp);
-  const [activeThread, setActiveThread] = useState(
-    activeThreadProp || threadListProp[0]
-  );
-
-  const handleCloseThread = (e, idx) => {
-    e.stopPropagation();
-    e.preventDefault();
-    const newThreadList = [...threadList];
-    newThreadList.splice(idx, 1);
-    setThreadList(newThreadList);
-  };
-
-  const handleClickOutside = (e) => {
-    if (!e.target.closest(".chatbot-component-header-dropdown-container")) {
-      setIsDropdownOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <div className="conversation-screen-container-header">
-      {/* left logo and arrow starts here  */}
-
-      <div className="left_logo_arrow_container">
-        {!hideSmartBotIcon && (
-          <div className="conversation_chatbot_logo_container">
-            <img src={SmartBotIcon} />
-          </div>
-        )}
-        {!hideMenuArrow && (
-          <div className="menu_arrow">
-            <Button
-              icon={
-                isDropdownOpen ? (
-                  <KeyboardArrowUpIcon />
-                ) : (
-                  <KeyboardArrowDownIcon />
-                )
-              }
-              iconPlacement="right"
-              size={hideChildren ? "small" : "medium"}
-              type="default"
-              variant="text"
-              onClick={() => {
-                setIsDropdownOpen(!isDropdownOpen);
-              }}
-            >
-              {!hideChildren && "Module"}
-            </Button>
-            {isDropdownOpen && (
-              <div
-                className={`chatbot-component-header-dropdown-container ${isDropdownOpen ? "open" : ""
-                  }`}
-                style={{
-                  width: 397,
-                  position: "absolute",
-                  boxShadow: "0px 1px 6px 0px #1933451A",
-                  top: 52,
-                  zIndex: 999999,
-                  backgroundColor: "white",
-                  padding: "16px",
-                  borderRadius: "18px",
-                }}
-              >
-                {isModuleListLoading ? (
-                  <Loader />
-                ) : (
-                  <div
-                    className="chatbot-component-header-dropdown-item"
-                    key={module.id}
-                    style={{
-                      display: "flex",
-                      flexDirection: "column",
-                      justifyContent: "center",
-                      backgroundColor: "white",
-                      gap: 16,
-                      cursor: "pointer",
-                    }}
-                  >
-                    {moduleList.map((module) => (
-                      <div
-                        onClick={() => {
-                          setActiveModule(module.name);
-                          onModuleClick(module.id, module.name, activeList);
-                          setIsDropdownOpen(false);
-                        }}
-                        className="chatbot-component-header-dropdown-item-container"
-                        style={{
-                          display: "flex",
-                          height: 66,
-                          alignItems: "center",
-                          justifyContent: "space-between",
-                          padding: "12px",
-                        }}
-                      >
-                        <div
-                          style={{
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 10,
-                          }}
-                          className="chatbot-component-header-dropdown-item-content"
-                        >
-                          {typeof module.icon === "string" ? (
-                            <img src={module.icon} alt={module.key} />
-                          ) : (
-                            module.icon
-                          )}
-                          <div
-                            style={{ display: "flex", flexDirection: "column" }}
-                            className="chatbot-component-header-dropdown-item-content-text"
-                          >
-                            <span
-                              className="chatbot-component-header-dropdown-item-content-text-name"
-                              style={{
-                                fontWeight: 600,
-                                fontSize: 16,
-                                lineHeight: "24px",
-                                color: "#1F2B4D",
-                              }}
-                            >
-                              {module.name}
-                            </span>
-                            <span
-                              className="chatbot-component-header-dropdown-item-content-text-description"
-                              style={{
-                                fontWeight: 500,
-                                fontSize: 12,
-                                lineHeight: "16px",
-                                color: "#7A8294",
-                              }}
-                            >
-                              {module.description}
-                            </span>
-                          </div>
-                        </div>
-                        {activeModule === module.name && (
-                          <img src={ActiveIcon} />
-                        )}
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* left logo and arrow ends here  */}
-
-      {/* Center options stars here  */}
-
-      {!hideCenterOptions && (
-        <div className="center_options_container">
-          <div className="left_tabs_container">
-            <ul>
-              {threadList.map((thread, idx) => (
-                <li
-                  key={idx}
-                  className={`${activeThread === thread ? "active" : ""} ${thread === "Home" ? "home" : ""
-                    }`}
-                  onClick={() => {
-                    setActiveThread(thread);
-                    handleThreadClick?.(thread);
-                  }}
-                >
-                  <>
-                    {thread === "Home" ? (
-                      <img src={HomeIcon} />
-                    ) : (
-                      <>
-                        {thread}
-                        <span className="close_thread">
-                          <img
-                            src={CloseThreadIcon}
-                            onClick={(e) => handleCloseThread(e, idx)}
-                          />
-                        </span>
-                      </>
-                    )}
-                  </>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className="right_info_container"></div>
-        </div>
-      )}
-
-      {/* Center options ends here  */}
-
-      {/* Right close save icon starts here  */}
-
-      <div className="right_close_save_icon_container">
-        {onMinimiseChatBot && (
-          <div className="minimise_icon_container">
-            <Button
-              icon={<RemoveRoundedIcon />}
-              size="small"
-              type="default"
-              variant="text"
-              onClick={onMinimiseChatBot}
-            />
-          </div>
-        )}
-
-        {handleSavedChat && (
-          <div className="save_icon_container">
-            <Button
-              icon={<SaveOutlinedIcon />}
-              iconPlacement="left"
-              size="small"
-              type="default"
-              variant="text"
-              onClick={handleSavedChat}
-            />
-          </div>
-        )}
-
-        {!isFullWidth && (
-          <div className="close_icon_container">
-            <Button
-              icon={<ClearIcon />}
-              iconPlacement="left"
-              size="small"
-              type="default"
-              variant="text"
-              onClick={onClose}
-            />
-          </div>
-        )}
-      </div>
-
-      {/* Right close icon ends here  */}
-    </div>
-  );
-};

package/src/components/ChatBot/constant.js

@@ -1,32 +0,0 @@
-import PageIcon from "../../assets/pageIcon.svg";
-import HistoryIcon from "../../assets/historyIcon.svg";
-import NewChatIcon from "../../assets/newChatIcon.svg";
-import BookMarkIcon from "../../assets/bookmarkIcon.svg";
-import NotificationIcon from "../../assets/bell.svg";
-
-export const menuItems = [
-  {
-    key: "bookmark",
-    icon: BookMarkIcon,
-  },
-  {
-    key: "history",
-    icon: HistoryIcon,
-  },
-  {
-    key: "page",
-    icon: PageIcon,
-  },
-  {
-    key: "notification",
-    icon: NotificationIcon,
-    iconClassName: "chatbot-component-menu-container-icon-notification",
-  },
-];
-
-export const mandatoryTabList = [
-  {
-    key: "history",
-    icon: HistoryIcon,
-  },
-];