feat(ai tooltip): migrate aiTooltip component to Misc.jsx

Sefaria · Mar 26, 2024 · d02d80b · d02d80b
1 parent 6207031
commit d02d80b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 34 deletions.
diff --git a/static/js/Misc.jsx b/static/js/Misc.jsx
@@ -1508,6 +1508,41 @@ const ToolTipped = ({ altText, classes, style, onClick, children }) => {
   </div>
 )};
 
+const AiInfoTooltip = () => {
+  const [showMessage, setShowMessage] = useState(false);
+    const aiInfoIcon = (
+            <img className="ai-info-icon" src="/static/icons/ai-info.svg" alt="AI Info Icon"/>
+    );
+        const aiMessage = (
+        <div className="ai-info-messages-box">
+              <div className="ai-info-first-message">
+              <InterfaceText>
+                  <EnglishText>Some of the text on this page has been AI generated and reviewed by our editors. <a href={"/sheets/541399?lang=en"}>Learn more.</a></EnglishText>
+                  <HebrewText>חלק מהטקסטים בדף זה נוצרו על ידי בינה מאלכותית ועברו הגהה על ידי צוות העורכים שלנו.
+                      <a href={"/sheets/541399?lang=en"}> לפרטים נוספים</a></HebrewText>
+              </InterfaceText>
+
+          </div>
+          <hr className="ai-info-messages-hr" />
+          <div className="ai-info-last-message">
+              <InterfaceText><EnglishText><a href={"https://sefaria.formstack.com/forms/ai_feedback_form"}>Feedback</a></EnglishText>
+              <HebrewText><a href={"https://sefaria.formstack.com/forms/ai_feedback_form"}>כתבו לנו</a></HebrewText>
+              </InterfaceText>
+          </div>
+        </div>
+    );
+  return (
+    <div className="ai-info-tooltip" onMouseEnter={() => setShowMessage(true)} onMouseLeave={() => setShowMessage(false)}>
+      {aiInfoIcon}
+      {showMessage && (
+        <div className="ai-message">
+            {aiMessage}
+        </div>
+      )}
+    </div>
+  );
+};
+
 
 class FollowButton extends Component {
   constructor(props) {
@@ -3329,6 +3364,7 @@ export {
   TextBlockLink,
   ToggleSet,
   ToolTipped,
+  AiInfoTooltip,
   TwoOrThreeBox,
   ResponsiveNBox,
   SheetMetaDataBox,

diff --git a/static/js/TopicPage.jsx b/static/js/TopicPage.jsx
@@ -21,6 +21,7 @@ import {
     InterfaceText,
     FilterableList,
     ToolTipped,
+    AiInfoTooltip,
     SimpleLinkedBlock,
     CategoryHeader,
     ImageWithCaption,
@@ -371,40 +372,6 @@ const getTopicHeaderAdminActionButtons = (topicSlug, refTopicLinks) => {
 
     return actionButtons;
 };
-const AiInfoTooltip = () => {
-  const [showMessage, setShowMessage] = useState(false);
-    const aiInfoIcon = (
-            <img className="ai-info-icon" src="/static/icons/ai-info.svg" alt="AI Info Icon"/>
-    );
-        const aiMessage = (
-        <div className="ai-info-messages-box">
-              <div className="ai-info-first-message">
-              <InterfaceText>
-                  <EnglishText>Some of the text on this page has been AI generated and reviewed by our editors. <a href={"/sheets/541399?lang=en"}>Learn more.</a></EnglishText>
-                  <HebrewText>חלק מהטקסטים בדף זה נוצרו על ידי בינה מאלכותית ועברו הגהה על ידי צוות העורכים שלנו.
-                      <a href={"/sheets/541399?lang=en"}> לפרטים נוספים</a></HebrewText>
-              </InterfaceText>
-
-          </div>
-          <hr className="ai-info-messages-hr" />
-          <div className="ai-info-last-message">
-              <InterfaceText><EnglishText><a href={"https://sefaria.formstack.com/forms/ai_feedback_form"}>Feedback</a></EnglishText>
-              <HebrewText><a href={"https://sefaria.formstack.com/forms/ai_feedback_form"}>כתבו לנו</a></HebrewText>
-              </InterfaceText>
-          </div>
-        </div>
-    );
-  return (
-    <div className="ai-info-tooltip" onMouseEnter={() => setShowMessage(true)} onMouseLeave={() => setShowMessage(false)}>
-      {aiInfoIcon}
-      {showMessage && (
-        <div className="ai-message">
-            {aiMessage}
-        </div>
-      )}
-    </div>
-  );
-};
 
 const TopicHeader = ({ topic, topicData, topicTitle, multiPanel, isCat, setNavTopic, openDisplaySettings, openSearch, topicImage }) => {
   const { en, he } = !!topicData && topicData.primaryTitle ? topicData.primaryTitle : {en: "Loading...", he: "טוען..."};