react-ai-search-bar 1.0.0

package/README.md

@@ -0,0 +1,30 @@
+# react-ai-search-bar
+
+> Made with create-react-library
+
+[![NPM](https://img.shields.io/npm/v/react-ai-search-bar.svg)](https://www.npmjs.com/package/react-ai-search-bar) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save react-ai-search-bar
+```
+
+## Usage
+
+```jsx
+import React, { Component } from 'react'
+
+import SearchBar from 'react-ai-search-bar'
+import 'react-ai-search-bar/dist/index.css'
+
+class Example extends Component {
+  render() {
+    return <SearchBar />
+  }
+}
+```
+
+## License
+
+MIT © [shauryabahuguna-tmpl](https://github.com/shauryabahuguna-tmpl)

package/dist/index.css

@@ -0,0 +1,272 @@
+/* add css module styles here (optional) */
+
+._1Lxpd {
+  font-size: 2em;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+._34uzV {
+  position: relative;
+  flex: 1;
+  display: flex;
+}
+
+._2IYfc {
+  padding-left: 35px;
+  padding-right: 75px;
+  padding-block: 8px;
+  flex: 1;
+  border-radius: 10px;
+  border: 0.5px solid gray;
+}
+
+._2IYfc:focus {
+  outline: none;
+}
+
+._2IYfc::-moz-placeholder {
+  opacity: 1;
+  -moz-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease; /* Adjust the duration and timing function as needed */
+}
+
+._2IYfc::placeholder {
+  opacity: 1;
+  transition: opacity 0.3s ease; /* Adjust the duration and timing function as needed */
+}
+
+._2IYfc._3Pehp::-moz-placeholder {
+  opacity: 0;
+}
+
+._2IYfc._3Pehp::placeholder {
+  opacity: 0;
+}
+
+._XSvp1 {
+  position: absolute;
+  z-index: 9999999;
+  top: 60px;
+  left: 0;
+  width: 100%;
+  transition: top 0.4s ease-in-out;
+  display: flex;
+}
+
+._3nKdd {
+  border-radius: 5px;
+  min-height: 300px;
+  max-height: calc(100vh - 2em);
+  margin-inline: 1em;
+  flex: 1;
+  display: flex;
+
+  @media (max-width: 768px) {
+    margin-inline: 0.3em;
+  }
+}
+
+._3UPkY {
+  top: 60px; /* slide down animation */
+}
+
+._1VsJA {
+  top: -1000px; /* slide up animation */
+}
+
+._1jBqv {
+  flex: 1;
+  border-radius: 5px;
+  padding: 1em 3em;
+  -webkit-backdrop-filter: brightness(0.4) blur(15px);
+          backdrop-filter: brightness(0.4) blur(15px);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  box-shadow: 0px 9px 30px rgba(255, 149, 5, 0.3);
+  font-size: 18px;
+  overflow-y: auto;
+
+  @media (max-width: 768px) {
+    padding: 1em 0.7em;
+  }
+}
+
+._1jBqv._3gN_3 {
+  -webkit-backdrop-filter: brightness(15) blur(20px);
+          backdrop-filter: brightness(15) blur(20px);
+  border: 1px solid rgba(0, 0, 0, 0.7);
+  color: black;
+}
+
+._1dkPH {
+  position: absolute;
+  top: 50%;
+  transform: translate(50%, -50%);
+  /* left: 5px; */
+}
+
+._3R7RF {
+  position: absolute;
+  top: 50%;
+  transform: translate(-13%, -50%);
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  border-radius: 7px;
+  border: 1px solid gray;
+  padding: 3px 10px;
+}
+
+._2I1sI {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  transform: translate(-340%, -50%);
+  right: 0;
+}
+
+._3R7RF._7huYs {
+  cursor: pointer;
+  background-color: black;
+  border-radius: 7px;
+    border: 1px solid black;
+}
+
+._2RbY_ {
+  margin-bottom: 2em;
+  font-size: 16px;
+
+  @media (max-width: 768px) {
+    font-size: 14px;
+  }
+}
+
+._2PVO1 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  -moz-column-gap: 10px;
+       column-gap: 10px;
+  row-gap: 15px;
+  margin-bottom: 2em;
+  
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(1, 1fr);
+    row-gap: 5px;
+  }
+
+}
+
+._ZmP22 {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 0.5em;
+  border-radius: calc(5px + 0.5em);
+  text-decoration: none;
+  background-color: rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  opacity: 0;
+  animation: _3uImN 0.5s ease forwards;
+  animation-delay: calc(0.3s * var(--index));
+  color: white;
+  position: relative;
+}
+
+._ZmP22._3gN_3 {
+  color: black;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+._ZmP22 img {
+  height: 90px;
+  width: 90px;
+  border-radius: 5px;
+  margin-right: 20px;
+
+  @media (max-width: 768px) {
+    height: 60px;
+    width: 60px;
+    margin-right: 20px;
+  }
+}
+
+._2jwZj h3 {
+  margin-top: 0;
+  margin-bottom: 10px;
+  font-size: 18px;
+  @media (max-width: 768px) {
+    font-size: 16px;
+  }
+}
+
+._2jwZj p {
+  margin: 0;
+  font-size: 16px;
+  @media (max-width: 768px) {
+    font-size: 12px;
+  }
+}
+
+._2Ipdz {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+._tWHtY {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  margin-bottom: 1em;
+}
+
+._3wV-k {
+  font-size: 14px;
+  margin: 0;
+  margin-bottom: 1em;
+  color: #FFFFFF;
+}
+
+._3wV-k._3gN_3 {
+  color: #000000;
+}
+
+._2Yhzo {
+  animation: _3uImN 0.5s ease forwards;
+  animation-delay: calc(0.3s * var(--index));
+  background-color: grey;
+  border-radius: 10px;
+  color: #FFFFFF;
+  cursor: pointer;
+  opacity: 0;
+  padding: 0.5em 1em;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: rgba(0, 0, 0, 0.2);
+  font-size: 14px;
+  text-align: start;
+}
+
+._2Yhzo._3gN_3 {
+  color: #000000;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+@keyframes _3uImN {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/index.js

@@ -0,0 +1,201 @@
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+var reactFeather = require('react-feather');
+var DOMPurify = _interopDefault(require('dompurify'));
+
+var styles = {"container":"_1Lxpd","inputContainer":"_34uzV","input":"_2IYfc","placeholderHidden":"_3Pehp","searchOverlay":"_XSvp1","searchResultBox":"_3nKdd","slideDown":"_3UPkY","slideUp":"_1VsJA","innerSearch":"_1jBqv","light":"_3gN_3","searchIcon":"_1dkPH","sendButton":"_3R7RF","close":"_2I1sI","iconActive":"_7huYs","message":"_2RbY_","cardContainer":"_2PVO1","singleCard":"_ZmP22","fadeIn":"_3uImN","content":"_2jwZj","linkIcon":"_2Ipdz","buttonContainer":"_tWHtY","suggested":"_3wV-k","followUp":"_2Yhzo"};
+
+var SearchBar = function SearchBar(_ref) {
+  var placeholder = _ref.placeholder,
+    theme = _ref.theme;
+  var _useState = React.useState(''),
+    input = _useState[0],
+    setInput = _useState[1];
+  var _useState2 = React.useState(false),
+    searched = _useState2[0],
+    setSearched = _useState2[1];
+  var _useState3 = React.useState(''),
+    displayedText = _useState3[0],
+    setDisplayedText = _useState3[1];
+  var _useState4 = React.useState([]),
+    displayedProducts = _useState4[0],
+    setDisplayedProducts = _useState4[1];
+  var _useState5 = React.useState([]),
+    displayedFollowUp = _useState5[0],
+    setDisplayedFollowUp = _useState5[1];
+  var _useState6 = React.useState(0),
+    currentPlaceholderIndex = _useState6[0],
+    setCurrentPlaceholderIndex = _useState6[1];
+  var _useState7 = React.useState(true),
+    showPlaceholder = _useState7[0],
+    setShowPlaceholder = _useState7[1];
+  var searchTheme = theme || 'dark';
+  var sample = {
+    message: "Greetings, fellow traveler of the digital domain! \uD83D\uDE80 Step into the boundless expanse of AI-powered wonders,\n    where the realms of imagination and innovation converge. Here, amidst the vast circuits of virtuality, you're not just a visitor;\n    you're a pioneer forging paths into the future. In this grand sanctuary of artificial intelligence, the horizon stretches endlessly,\n    offering limitless opportunities to explore, create, and learn. Whether you're a seasoned adventurer or a curious newcomer,\n    you're embraced by the warmth of knowledge and the thrill of discovery.",
+    options: [{
+      title: 'Product 1',
+      image_link: 'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg',
+      link: 'https://example.com/product1',
+      description: 'Description of Product 1'
+    }, {
+      title: 'Product 2',
+      image_link: 'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg',
+      link: 'https://example.com/product2',
+      description: 'Description of Product 2'
+    }, {
+      title: 'Product 3',
+      image_link: 'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg',
+      link: 'https://example.com/product3',
+      description: 'Description of Product 3'
+    }],
+    followup_questions: ['Would you like more information about any specific product?', 'Are you looking for anything else?', 'How can I assist you further?']
+  };
+  var handleInputChange = function handleInputChange(e) {
+    setInput(e.target.value);
+  };
+  var handleSendClick = function handleSendClick(e) {
+    setSearched(true);
+  };
+  var handleSendClickKeyboard = function handleSendClickKeyboard(e) {
+    if (e.keyCode === 13) {
+      setSearched(true);
+    }
+  };
+  React.useEffect(function () {
+    if (input === '') {
+      setSearched(false);
+      setDisplayedText('');
+      setDisplayedProducts([]);
+      setDisplayedFollowUp([]);
+    }
+  }, [input]);
+  var handleClear = function handleClear() {
+    setInput('');
+    setSearched(false);
+    setDisplayedText('');
+    setDisplayedProducts([]);
+    setDisplayedFollowUp([]);
+  };
+  var SetNextQuestion = function SetNextQuestion(question) {
+    setInput(question);
+  };
+  React.useEffect(function () {
+    if (Array.isArray(placeholder) && placeholder.length > 1) {
+      var timer = setInterval(function () {
+        setShowPlaceholder(false);
+        setTimeout(function () {
+          setCurrentPlaceholderIndex(function (prevIndex) {
+            return (prevIndex + 1) % placeholder.length;
+          });
+          setShowPlaceholder(true);
+        }, 300);
+      }, 3000);
+      return function () {
+        return clearInterval(timer);
+      };
+    }
+  }, [placeholder]);
+  React.useEffect(function () {
+    if (searched) {
+      var index = 0;
+      var interval = setInterval(function () {
+        setDisplayedText(function (prevText) {
+          return prevText + sample.message[index];
+        });
+        index++;
+        if (index === sample.message.length) {
+          var _sample$options, _sample$followup_ques;
+          clearInterval(interval);
+          if ((sample === null || sample === void 0 ? void 0 : (_sample$options = sample.options) === null || _sample$options === void 0 ? void 0 : _sample$options.length) > 0) {
+            setDisplayedProducts(sample === null || sample === void 0 ? void 0 : sample.options);
+          }
+          if ((sample === null || sample === void 0 ? void 0 : (_sample$followup_ques = sample.followup_questions) === null || _sample$followup_ques === void 0 ? void 0 : _sample$followup_ques.length) > 0) {
+            setDisplayedFollowUp(sample === null || sample === void 0 ? void 0 : sample.followup_questions);
+          }
+        }
+      }, 30);
+      return function () {
+        return clearInterval(interval);
+      };
+    }
+  }, [searched, sample.message]);
+  var currentPlaceholder = Array.isArray(placeholder) ? placeholder[currentPlaceholderIndex] : placeholder;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: styles.inputContainer
+  }, /*#__PURE__*/React__default.createElement(reactFeather.Search, {
+    className: styles.searchIcon,
+    color: "grey",
+    size: 18
+  }), /*#__PURE__*/React__default.createElement("input", {
+    className: styles.input + " " + (showPlaceholder ? '' : styles.placeholderHidden),
+    value: input,
+    onChange: handleInputChange,
+    placeholder: currentPlaceholder || 'Hi, How can I help you?',
+    onKeyDown: input ? handleSendClickKeyboard : null
+  }), input ? /*#__PURE__*/React__default.createElement(reactFeather.XCircle, {
+    className: styles.close,
+    color: "grey",
+    size: 16,
+    onClick: handleClear
+  }) : null, /*#__PURE__*/React__default.createElement("button", {
+    onClick: input ? handleSendClick : null,
+    className: styles.sendButton + " " + (input ? styles.iconActive : null),
+    disabled: !input
+  }, /*#__PURE__*/React__default.createElement(reactFeather.Send, {
+    color: input ? 'white' : 'grey',
+    size: 16
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: styles.searchOverlay + " " + (searched ? styles.slideDown : styles.slideUp)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: styles.searchResultBox
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: styles.innerSearch + " " + (searchTheme === 'light' ? styles.light : '')
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: styles.message,
+    dangerouslySetInnerHTML: {
+      __html: DOMPurify.sanitize(displayedText)
+    }
+  }), (displayedProducts === null || displayedProducts === void 0 ? void 0 : displayedProducts.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: styles.cardContainer
+  }, displayedProducts.map(function (e, index) {
+    return /*#__PURE__*/React__default.createElement("a", {
+      className: styles.singleCard + " " + (searchTheme === 'light' ? styles.light : ''),
+      href: e.link,
+      key: index,
+      style: {
+        '--index': index
+      }
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: e.image_link,
+      alt: "abc",
+      target: "_blank"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: styles.content
+    }, e.title ? /*#__PURE__*/React__default.createElement("h3", null, e.title) : null, e.description ? /*#__PURE__*/React__default.createElement("p", null, e.description) : null), /*#__PURE__*/React__default.createElement(reactFeather.ExternalLink, {
+      size: 18,
+      className: styles.linkIcon
+    }));
+  })) : null, (displayedFollowUp === null || displayedFollowUp === void 0 ? void 0 : displayedFollowUp.length) > 0 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
+    className: styles.suggested + " " + (searchTheme === 'light' ? styles.light : '')
+  }, "Suggested Questions:", ' '), /*#__PURE__*/React__default.createElement("div", {
+    className: styles.buttonContainer
+  }, displayedFollowUp.map(function (question, index) {
+    return /*#__PURE__*/React__default.createElement("button", {
+      className: styles.followUp + " " + (searchTheme === 'light' ? styles.light : ''),
+      key: index,
+      style: {
+        '--index': index
+      },
+      onClick: function onClick() {
+        return SetNextQuestion(question);
+      }
+    }, question);
+  }))) : null))));
+};
+
+exports.SearchBar = SearchBar;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useEffect } from 'react'\nimport styles from './styles.module.css'\nimport {\n  Search,\n  Send,\n  XCircle as Cross,\n  ExternalLink as Link\n} from 'react-feather'\nimport DOMPurify from 'dompurify'\n\nexport const SearchBar = ({ placeholder, theme }) => {\n  const [input, setInput] = useState('')\n  const [searched, setSearched] = useState(false)\n  const [displayedText, setDisplayedText] = useState('')\n  const [displayedProducts, setDisplayedProducts] = useState([])\n  const [displayedFollowUp, setDisplayedFollowUp] = useState([])\n  const [currentPlaceholderIndex, setCurrentPlaceholderIndex] = useState(0)\n  const [showPlaceholder, setShowPlaceholder] = useState(true)\n  const searchTheme = theme || 'dark'\n\n  const sample = {\n    message: `Greetings, fellow traveler of the digital domain! 🚀 Step into the boundless expanse of AI-powered wonders,\n    where the realms of imagination and innovation converge. Here, amidst the vast circuits of virtuality, you're not just a visitor;\n    you're a pioneer forging paths into the future. In this grand sanctuary of artificial intelligence, the horizon stretches endlessly,\n    offering limitless opportunities to explore, create, and learn. Whether you're a seasoned adventurer or a curious newcomer,\n    you're embraced by the warmth of knowledge and the thrill of discovery.`,\n    options: [\n      {\n        title: 'Product 1',\n        image_link:\n          'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg',\n        link: 'https://example.com/product1',\n        description: 'Description of Product 1'\n      },\n      {\n        title: 'Product 2',\n        image_link:\n          'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg',\n        link: 'https://example.com/product2',\n        description: 'Description of Product 2'\n      },\n      {\n        title: 'Product 3',\n        image_link:\n          'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg',\n        link: 'https://example.com/product3',\n        description: 'Description of Product 3'\n      }\n    ],\n    followup_questions: [\n      'Would you like more information about any specific product?',\n      'Are you looking for anything else?',\n      'How can I assist you further?'\n    ]\n  }\n\n  const handleInputChange = (e) => {\n    setInput(e.target.value)\n  }\n\n  const handleSendClick = (e) => {\n    setSearched(true)\n  }\n\n  const handleSendClickKeyboard = (e) => {\n    if (e.keyCode === 13) {\n      setSearched(true)\n    }\n  }\n\n  useEffect(() => {\n    if (input === '') {\n      setSearched(false)\n      setDisplayedText('')\n      setDisplayedProducts([])\n      setDisplayedFollowUp([])\n    }\n  }, [input])\n\n  const handleClear = () => {\n    setInput('')\n    setSearched(false)\n    setDisplayedText('')\n    setDisplayedProducts([])\n    setDisplayedFollowUp([])\n  }\n\n  const SetNextQuestion = (question) => {\n    setInput(question)\n  }\n\n  useEffect(() => {\n    if (Array.isArray(placeholder) && placeholder.length > 1) {\n      const timer = setInterval(() => {\n        setShowPlaceholder(false)\n        setTimeout(() => {\n          setCurrentPlaceholderIndex(\n            (prevIndex) => (prevIndex + 1) % placeholder.length\n          )\n          setShowPlaceholder(true)\n        }, 300) // Delay to allow time for the transition\n      }, 3000) // Change placeholder every 3 seconds\n\n      return () => clearInterval(timer)\n    }\n  }, [placeholder])\n\n  useEffect(() => {\n    if (searched) {\n      let index = 0\n      const interval = setInterval(() => {\n        setDisplayedText((prevText) => prevText + sample.message[index])\n        index++\n        if (index === sample.message.length) {\n          clearInterval(interval)\n          if (sample?.options?.length > 0) {\n            setDisplayedProducts(sample?.options)\n          }\n          if (sample?.followup_questions?.length > 0) {\n            setDisplayedFollowUp(sample?.followup_questions)\n          }\n        }\n      }, 30)\n      return () => clearInterval(interval)\n    }\n  }, [searched, sample.message])\n\n  const currentPlaceholder = Array.isArray(placeholder)\n    ? placeholder[currentPlaceholderIndex]\n    : placeholder\n\n  return (\n    <div className={styles.container}>\n      <div className={styles.inputContainer}>\n        <Search className={styles.searchIcon} color='grey' size={18} />\n        <input\n          className={`${styles.input} ${\n            showPlaceholder ? '' : styles.placeholderHidden\n          }`}\n          value={input}\n          onChange={handleInputChange}\n          placeholder={currentPlaceholder || 'Hi, How can I help you?'}\n          onKeyDown={input ? handleSendClickKeyboard : null}\n        />\n        {input ? (\n          <Cross\n            className={styles.close}\n            color='grey'\n            size={16}\n            onClick={handleClear}\n          />\n        ) : null}\n        <button\n          onClick={input ? handleSendClick : null}\n          className={`${styles.sendButton} ${input ? styles.iconActive : null}`}\n          disabled={!input}\n        >\n          <Send color={input ? 'white' : 'grey'} size={16} />\n        </button>\n      </div>\n      <div\n        className={`${styles.searchOverlay} ${\n          searched ? styles.slideDown : styles.slideUp\n        }`}\n      >\n        <div className={styles.searchResultBox}>\n          <div\n            className={`${styles.innerSearch} ${\n              searchTheme === 'light' ? styles.light : ''\n            }`}\n          >\n            <p\n              className={styles.message}\n              dangerouslySetInnerHTML={{\n                __html: DOMPurify.sanitize(displayedText)\n              }}\n            />\n            {displayedProducts?.length > 0 ? (\n              <div className={styles.cardContainer}>\n                {displayedProducts.map((e, index) => {\n                  return (\n                    <a\n                      className={`${styles.singleCard} ${\n                        searchTheme === 'light' ? styles.light : ''\n                      }`}\n                      href={e.link}\n                      key={index}\n                      style={{ '--index': index }}\n                    >\n                      <img src={e.image_link} alt='abc' target='_blank' />\n                      <div className={styles.content}>\n                        {e.title ? <h3>{e.title}</h3> : null}\n                        {e.description ? <p>{e.description}</p> : null}\n                      </div>\n                      <Link size={18} className={styles.linkIcon} />\n                    </a>\n                  )\n                })}\n              </div>\n            ) : null}\n            {displayedFollowUp?.length > 0 ? (\n              <React.Fragment>\n                <p\n                  className={`${styles.suggested} ${\n                    searchTheme === 'light' ? styles.light : ''\n                  }`}\n                >\n                  Suggested Questions:{' '}\n                </p>\n                <div className={styles.buttonContainer}>\n                  {displayedFollowUp.map((question, index) => {\n                    return (\n                      <button\n                        className={`${styles.followUp} ${\n                          searchTheme === 'light' ? styles.light : ''\n                        }`}\n                        key={index}\n                        style={{ '--index': index }}\n                        onClick={() => SetNextQuestion(question)}\n                      >\n                        {question}\n                      </button>\n                    )\n                  })}\n                </div>\n              </React.Fragment>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["SearchBar","_ref","placeholder","theme","_useState","useState","input","setInput","_useState2","searched","setSearched","_useState3","displayedText","setDisplayedText","_useState4","displayedProducts","setDisplayedProducts","_useState5","displayedFollowUp","setDisplayedFollowUp","_useState6","currentPlaceholderIndex","setCurrentPlaceholderIndex","_useState7","showPlaceholder","setShowPlaceholder","searchTheme","sample","message","options","title","image_link","link","description","followup_questions","handleInputChange","e","target","value","handleSendClick","handleSendClickKeyboard","keyCode","useEffect","handleClear","SetNextQuestion","question","Array","isArray","length","timer","setInterval","setTimeout","prevIndex","clearInterval","index","interval","prevText","_sample$options","_sample$followup_ques","currentPlaceholder","React","createElement","className","styles","container","inputContainer","Search","searchIcon","color","size","placeholderHidden","onChange","onKeyDown","Cross","close","onClick","sendButton","iconActive","disabled","Send","searchOverlay","slideDown","slideUp","searchResultBox","innerSearch","light","dangerouslySetInnerHTML","__html","DOMPurify","sanitize","cardContainer","map","singleCard","href","key","style","src","alt","content","Link","linkIcon","Fragment","suggested","buttonContainer","followUp"],"mappings":"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"}

package/dist/index.modern.js

@@ -0,0 +1,198 @@
+import React, { useState, useEffect } from 'react';
+import { Search, XCircle, Send, ExternalLink } from 'react-feather';
+import DOMPurify from 'dompurify';
+
+var styles = {"container":"_1Lxpd","inputContainer":"_34uzV","input":"_2IYfc","placeholderHidden":"_3Pehp","searchOverlay":"_XSvp1","searchResultBox":"_3nKdd","slideDown":"_3UPkY","slideUp":"_1VsJA","innerSearch":"_1jBqv","light":"_3gN_3","searchIcon":"_1dkPH","sendButton":"_3R7RF","close":"_2I1sI","iconActive":"_7huYs","message":"_2RbY_","cardContainer":"_2PVO1","singleCard":"_ZmP22","fadeIn":"_3uImN","content":"_2jwZj","linkIcon":"_2Ipdz","buttonContainer":"_tWHtY","suggested":"_3wV-k","followUp":"_2Yhzo"};
+
+var SearchBar = function SearchBar(_ref) {
+  var placeholder = _ref.placeholder,
+    theme = _ref.theme;
+  var _useState = useState(''),
+    input = _useState[0],
+    setInput = _useState[1];
+  var _useState2 = useState(false),
+    searched = _useState2[0],
+    setSearched = _useState2[1];
+  var _useState3 = useState(''),
+    displayedText = _useState3[0],
+    setDisplayedText = _useState3[1];
+  var _useState4 = useState([]),
+    displayedProducts = _useState4[0],
+    setDisplayedProducts = _useState4[1];
+  var _useState5 = useState([]),
+    displayedFollowUp = _useState5[0],
+    setDisplayedFollowUp = _useState5[1];
+  var _useState6 = useState(0),
+    currentPlaceholderIndex = _useState6[0],
+    setCurrentPlaceholderIndex = _useState6[1];
+  var _useState7 = useState(true),
+    showPlaceholder = _useState7[0],
+    setShowPlaceholder = _useState7[1];
+  var searchTheme = theme || 'dark';
+  var sample = {
+    message: "Greetings, fellow traveler of the digital domain! \uD83D\uDE80 Step into the boundless expanse of AI-powered wonders,\n    where the realms of imagination and innovation converge. Here, amidst the vast circuits of virtuality, you're not just a visitor;\n    you're a pioneer forging paths into the future. In this grand sanctuary of artificial intelligence, the horizon stretches endlessly,\n    offering limitless opportunities to explore, create, and learn. Whether you're a seasoned adventurer or a curious newcomer,\n    you're embraced by the warmth of knowledge and the thrill of discovery.",
+    options: [{
+      title: 'Product 1',
+      image_link: 'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg',
+      link: 'https://example.com/product1',
+      description: 'Description of Product 1'
+    }, {
+      title: 'Product 2',
+      image_link: 'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg',
+      link: 'https://example.com/product2',
+      description: 'Description of Product 2'
+    }, {
+      title: 'Product 3',
+      image_link: 'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg',
+      link: 'https://example.com/product3',
+      description: 'Description of Product 3'
+    }],
+    followup_questions: ['Would you like more information about any specific product?', 'Are you looking for anything else?', 'How can I assist you further?']
+  };
+  var handleInputChange = function handleInputChange(e) {
+    setInput(e.target.value);
+  };
+  var handleSendClick = function handleSendClick(e) {
+    setSearched(true);
+  };
+  var handleSendClickKeyboard = function handleSendClickKeyboard(e) {
+    if (e.keyCode === 13) {
+      setSearched(true);
+    }
+  };
+  useEffect(function () {
+    if (input === '') {
+      setSearched(false);
+      setDisplayedText('');
+      setDisplayedProducts([]);
+      setDisplayedFollowUp([]);
+    }
+  }, [input]);
+  var handleClear = function handleClear() {
+    setInput('');
+    setSearched(false);
+    setDisplayedText('');
+    setDisplayedProducts([]);
+    setDisplayedFollowUp([]);
+  };
+  var SetNextQuestion = function SetNextQuestion(question) {
+    setInput(question);
+  };
+  useEffect(function () {
+    if (Array.isArray(placeholder) && placeholder.length > 1) {
+      var timer = setInterval(function () {
+        setShowPlaceholder(false);
+        setTimeout(function () {
+          setCurrentPlaceholderIndex(function (prevIndex) {
+            return (prevIndex + 1) % placeholder.length;
+          });
+          setShowPlaceholder(true);
+        }, 300);
+      }, 3000);
+      return function () {
+        return clearInterval(timer);
+      };
+    }
+  }, [placeholder]);
+  useEffect(function () {
+    if (searched) {
+      var index = 0;
+      var interval = setInterval(function () {
+        setDisplayedText(function (prevText) {
+          return prevText + sample.message[index];
+        });
+        index++;
+        if (index === sample.message.length) {
+          var _sample$options, _sample$followup_ques;
+          clearInterval(interval);
+          if ((sample === null || sample === void 0 ? void 0 : (_sample$options = sample.options) === null || _sample$options === void 0 ? void 0 : _sample$options.length) > 0) {
+            setDisplayedProducts(sample === null || sample === void 0 ? void 0 : sample.options);
+          }
+          if ((sample === null || sample === void 0 ? void 0 : (_sample$followup_ques = sample.followup_questions) === null || _sample$followup_ques === void 0 ? void 0 : _sample$followup_ques.length) > 0) {
+            setDisplayedFollowUp(sample === null || sample === void 0 ? void 0 : sample.followup_questions);
+          }
+        }
+      }, 30);
+      return function () {
+        return clearInterval(interval);
+      };
+    }
+  }, [searched, sample.message]);
+  var currentPlaceholder = Array.isArray(placeholder) ? placeholder[currentPlaceholderIndex] : placeholder;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.inputContainer
+  }, /*#__PURE__*/React.createElement(Search, {
+    className: styles.searchIcon,
+    color: "grey",
+    size: 18
+  }), /*#__PURE__*/React.createElement("input", {
+    className: styles.input + " " + (showPlaceholder ? '' : styles.placeholderHidden),
+    value: input,
+    onChange: handleInputChange,
+    placeholder: currentPlaceholder || 'Hi, How can I help you?',
+    onKeyDown: input ? handleSendClickKeyboard : null
+  }), input ? /*#__PURE__*/React.createElement(XCircle, {
+    className: styles.close,
+    color: "grey",
+    size: 16,
+    onClick: handleClear
+  }) : null, /*#__PURE__*/React.createElement("button", {
+    onClick: input ? handleSendClick : null,
+    className: styles.sendButton + " " + (input ? styles.iconActive : null),
+    disabled: !input
+  }, /*#__PURE__*/React.createElement(Send, {
+    color: input ? 'white' : 'grey',
+    size: 16
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.searchOverlay + " " + (searched ? styles.slideDown : styles.slideUp)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.searchResultBox
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.innerSearch + " " + (searchTheme === 'light' ? styles.light : '')
+  }, /*#__PURE__*/React.createElement("p", {
+    className: styles.message,
+    dangerouslySetInnerHTML: {
+      __html: DOMPurify.sanitize(displayedText)
+    }
+  }), (displayedProducts === null || displayedProducts === void 0 ? void 0 : displayedProducts.length) > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: styles.cardContainer
+  }, displayedProducts.map(function (e, index) {
+    return /*#__PURE__*/React.createElement("a", {
+      className: styles.singleCard + " " + (searchTheme === 'light' ? styles.light : ''),
+      href: e.link,
+      key: index,
+      style: {
+        '--index': index
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: e.image_link,
+      alt: "abc",
+      target: "_blank"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.content
+    }, e.title ? /*#__PURE__*/React.createElement("h3", null, e.title) : null, e.description ? /*#__PURE__*/React.createElement("p", null, e.description) : null), /*#__PURE__*/React.createElement(ExternalLink, {
+      size: 18,
+      className: styles.linkIcon
+    }));
+  })) : null, (displayedFollowUp === null || displayedFollowUp === void 0 ? void 0 : displayedFollowUp.length) > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+    className: styles.suggested + " " + (searchTheme === 'light' ? styles.light : '')
+  }, "Suggested Questions:", ' '), /*#__PURE__*/React.createElement("div", {
+    className: styles.buttonContainer
+  }, displayedFollowUp.map(function (question, index) {
+    return /*#__PURE__*/React.createElement("button", {
+      className: styles.followUp + " " + (searchTheme === 'light' ? styles.light : ''),
+      key: index,
+      style: {
+        '--index': index
+      },
+      onClick: function onClick() {
+        return SetNextQuestion(question);
+      }
+    }, question);
+  }))) : null))));
+};
+
+export { SearchBar };
+//# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.js","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useEffect } from 'react'\nimport styles from './styles.module.css'\nimport {\n  Search,\n  Send,\n  XCircle as Cross,\n  ExternalLink as Link\n} from 'react-feather'\nimport DOMPurify from 'dompurify'\n\nexport const SearchBar = ({ placeholder, theme }) => {\n  const [input, setInput] = useState('')\n  const [searched, setSearched] = useState(false)\n  const [displayedText, setDisplayedText] = useState('')\n  const [displayedProducts, setDisplayedProducts] = useState([])\n  const [displayedFollowUp, setDisplayedFollowUp] = useState([])\n  const [currentPlaceholderIndex, setCurrentPlaceholderIndex] = useState(0)\n  const [showPlaceholder, setShowPlaceholder] = useState(true)\n  const searchTheme = theme || 'dark'\n\n  const sample = {\n    message: `Greetings, fellow traveler of the digital domain! 🚀 Step into the boundless expanse of AI-powered wonders,\n    where the realms of imagination and innovation converge. Here, amidst the vast circuits of virtuality, you're not just a visitor;\n    you're a pioneer forging paths into the future. In this grand sanctuary of artificial intelligence, the horizon stretches endlessly,\n    offering limitless opportunities to explore, create, and learn. Whether you're a seasoned adventurer or a curious newcomer,\n    you're embraced by the warmth of knowledge and the thrill of discovery.`,\n    options: [\n      {\n        title: 'Product 1',\n        image_link:\n          'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg',\n        link: 'https://example.com/product1',\n        description: 'Description of Product 1'\n      },\n      {\n        title: 'Product 2',\n        image_link:\n          'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg',\n        link: 'https://example.com/product2',\n        description: 'Description of Product 2'\n      },\n      {\n        title: 'Product 3',\n        image_link:\n          'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg',\n        link: 'https://example.com/product3',\n        description: 'Description of Product 3'\n      }\n    ],\n    followup_questions: [\n      'Would you like more information about any specific product?',\n      'Are you looking for anything else?',\n      'How can I assist you further?'\n    ]\n  }\n\n  const handleInputChange = (e) => {\n    setInput(e.target.value)\n  }\n\n  const handleSendClick = (e) => {\n    setSearched(true)\n  }\n\n  const handleSendClickKeyboard = (e) => {\n    if (e.keyCode === 13) {\n      setSearched(true)\n    }\n  }\n\n  useEffect(() => {\n    if (input === '') {\n      setSearched(false)\n      setDisplayedText('')\n      setDisplayedProducts([])\n      setDisplayedFollowUp([])\n    }\n  }, [input])\n\n  const handleClear = () => {\n    setInput('')\n    setSearched(false)\n    setDisplayedText('')\n    setDisplayedProducts([])\n    setDisplayedFollowUp([])\n  }\n\n  const SetNextQuestion = (question) => {\n    setInput(question)\n  }\n\n  useEffect(() => {\n    if (Array.isArray(placeholder) && placeholder.length > 1) {\n      const timer = setInterval(() => {\n        setShowPlaceholder(false)\n        setTimeout(() => {\n          setCurrentPlaceholderIndex(\n            (prevIndex) => (prevIndex + 1) % placeholder.length\n          )\n          setShowPlaceholder(true)\n        }, 300) // Delay to allow time for the transition\n      }, 3000) // Change placeholder every 3 seconds\n\n      return () => clearInterval(timer)\n    }\n  }, [placeholder])\n\n  useEffect(() => {\n    if (searched) {\n      let index = 0\n      const interval = setInterval(() => {\n        setDisplayedText((prevText) => prevText + sample.message[index])\n        index++\n        if (index === sample.message.length) {\n          clearInterval(interval)\n          if (sample?.options?.length > 0) {\n            setDisplayedProducts(sample?.options)\n          }\n          if (sample?.followup_questions?.length > 0) {\n            setDisplayedFollowUp(sample?.followup_questions)\n          }\n        }\n      }, 30)\n      return () => clearInterval(interval)\n    }\n  }, [searched, sample.message])\n\n  const currentPlaceholder = Array.isArray(placeholder)\n    ? placeholder[currentPlaceholderIndex]\n    : placeholder\n\n  return (\n    <div className={styles.container}>\n      <div className={styles.inputContainer}>\n        <Search className={styles.searchIcon} color='grey' size={18} />\n        <input\n          className={`${styles.input} ${\n            showPlaceholder ? '' : styles.placeholderHidden\n          }`}\n          value={input}\n          onChange={handleInputChange}\n          placeholder={currentPlaceholder || 'Hi, How can I help you?'}\n          onKeyDown={input ? handleSendClickKeyboard : null}\n        />\n        {input ? (\n          <Cross\n            className={styles.close}\n            color='grey'\n            size={16}\n            onClick={handleClear}\n          />\n        ) : null}\n        <button\n          onClick={input ? handleSendClick : null}\n          className={`${styles.sendButton} ${input ? styles.iconActive : null}`}\n          disabled={!input}\n        >\n          <Send color={input ? 'white' : 'grey'} size={16} />\n        </button>\n      </div>\n      <div\n        className={`${styles.searchOverlay} ${\n          searched ? styles.slideDown : styles.slideUp\n        }`}\n      >\n        <div className={styles.searchResultBox}>\n          <div\n            className={`${styles.innerSearch} ${\n              searchTheme === 'light' ? styles.light : ''\n            }`}\n          >\n            <p\n              className={styles.message}\n              dangerouslySetInnerHTML={{\n                __html: DOMPurify.sanitize(displayedText)\n              }}\n            />\n            {displayedProducts?.length > 0 ? (\n              <div className={styles.cardContainer}>\n                {displayedProducts.map((e, index) => {\n                  return (\n                    <a\n                      className={`${styles.singleCard} ${\n                        searchTheme === 'light' ? styles.light : ''\n                      }`}\n                      href={e.link}\n                      key={index}\n                      style={{ '--index': index }}\n                    >\n                      <img src={e.image_link} alt='abc' target='_blank' />\n                      <div className={styles.content}>\n                        {e.title ? <h3>{e.title}</h3> : null}\n                        {e.description ? <p>{e.description}</p> : null}\n                      </div>\n                      <Link size={18} className={styles.linkIcon} />\n                    </a>\n                  )\n                })}\n              </div>\n            ) : null}\n            {displayedFollowUp?.length > 0 ? (\n              <React.Fragment>\n                <p\n                  className={`${styles.suggested} ${\n                    searchTheme === 'light' ? styles.light : ''\n                  }`}\n                >\n                  Suggested Questions:{' '}\n                </p>\n                <div className={styles.buttonContainer}>\n                  {displayedFollowUp.map((question, index) => {\n                    return (\n                      <button\n                        className={`${styles.followUp} ${\n                          searchTheme === 'light' ? styles.light : ''\n                        }`}\n                        key={index}\n                        style={{ '--index': index }}\n                        onClick={() => SetNextQuestion(question)}\n                      >\n                        {question}\n                      </button>\n                    )\n                  })}\n                </div>\n              </React.Fragment>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["SearchBar","_ref","placeholder","theme","_useState","useState","input","setInput","_useState2","searched","setSearched","_useState3","displayedText","setDisplayedText","_useState4","displayedProducts","setDisplayedProducts","_useState5","displayedFollowUp","setDisplayedFollowUp","_useState6","currentPlaceholderIndex","setCurrentPlaceholderIndex","_useState7","showPlaceholder","setShowPlaceholder","searchTheme","sample","message","options","title","image_link","link","description","followup_questions","handleInputChange","e","target","value","handleSendClick","handleSendClickKeyboard","keyCode","useEffect","handleClear","SetNextQuestion","question","Array","isArray","length","timer","setInterval","setTimeout","prevIndex","clearInterval","index","interval","prevText","_sample$options","_sample$followup_ques","currentPlaceholder","React","createElement","className","styles","container","inputContainer","Search","searchIcon","color","size","placeholderHidden","onChange","onKeyDown","Cross","close","onClick","sendButton","iconActive","disabled","Send","searchOverlay","slideDown","slideUp","searchResultBox","innerSearch","light","dangerouslySetInnerHTML","__html","DOMPurify","sanitize","cardContainer","map","singleCard","href","key","style","src","alt","content","Link","linkIcon","Fragment","suggested","buttonContainer","followUp"],"mappings":"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"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "react-ai-search-bar",
+  "version": "1.0.0",
+  "description": "Made with create-react-library",
+  "author": "shauryabahuguna-tmpl",
+  "license": "MIT",
+  "repository": "shauryabahuguna-tmpl/react-ai-search-bar",
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "source": "src/index.js",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "build": "microbundle-crl --no-compress --format modern,cjs",
+    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "prepare": "run-s build",
+    "test": "run-s test:unit test:lint test:build",
+    "test:build": "run-s build",
+    "test:lint": "eslint .",
+    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom",
+    "predeploy": "cd example && npm install && npm run build",
+    "deploy": "gh-pages -d example/build"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0"
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.0.3",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-config-standard-react": "^9.2.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-standard": "^4.0.1",
+    "gh-pages": "^2.2.0",
+    "microbundle-crl": "^0.13.10",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.0.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "react-feather": "^2.0.10"
+  },
+  "publishConfig": {
+    "@shauryabahuguna-tmpl:registry": "https://npm.pkg.github.com"
+  }
+}