feat(topic prompt generator UI): ai-info icon triggering a toggle

Sefaria · Mar 17, 2024 · 5551344 · 5551344
1 parent 5fa50a2
commit 5551344
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 4 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -815,6 +815,7 @@ div:has(#bannerMessage) + .readerApp.singlePanel .mobileNavMenu {
   color: #000000;
   height: 23px;
 }
+
 .header .interfaceLinks .interfaceLinks-menu.profile-menu .profile-menu-middle {
   margin-top: 5px;
   margin-bottom: 5px;
@@ -824,20 +825,31 @@ div:has(#bannerMessage) + .readerApp.singlePanel .mobileNavMenu {
   min-width: 150px;
   width: max-content;
 }
+.interface-english .header .interfaceLinks .interfaceLinks-menu.aiToggle {
+  right: 0px;
+  /*min-width: 150px;*/
+  width:198px;
+}
+
 .interface-hebrew .header .interfaceLinks .interfaceLinks-menu {
   left: 0px;
   min-width: 150px;
   width: max-content;
 }
-.header .interfaceLinks .interfaceLinks-menu .interfaceLinks-header {
+.interfaceLinks-menu.profile-menu.aiToggle a {
+  color: #4B71B7;
+  font-family: inherit;
+}
+.header .interfaceLinks .interfaceLinks-menu .interfaceLinks-header.aiToggleMessage {
   font-style: normal;
   font-weight: normal;
   font-size: 14px;
   line-height: 18px;
-  color: #999999;
+  color: #666666;
   padding: 12px;
   border-bottom: 1px solid #CCCCCC;
 }
+
 .header .interfaceLinks .interfaceLinks-menu .interfaceLinks-header:not(:first-child) {
   border-top: 1px solid #CCC;
 }
@@ -897,6 +909,17 @@ div:has(#bannerMessage) + .readerApp.singlePanel .mobileNavMenu {
 div.interfaceLinks-row a:hover {
   text-decoration: none;
 }
+.header .interfaceLinks .interfaceLinks-row-aiToggle {
+  align-items: center;
+  display: flex;
+  line-height: 18px;
+  text-align: right;
+  color: #666666;
+  font-family: "Roboto", "Heebo", "Helvetica Neue", Ariel, sans-serif;
+  padding: 2px 12px 2px 12px;
+  font-size: 14px;
+  height: 23px;
+}
 .header .interfaceLinks .interfaceLinks-row.languages {
   display: flex;
 }

diff --git a/static/js/TopicPage.jsx b/static/js/TopicPage.jsx
@@ -369,21 +369,70 @@ const getTopicHeaderAdminActionButtons = (topicSlug, refTopicLinks) => {
 
     return actionButtons;
 };
+const AiInfoTooltip = () => {
+  const [showMessage, setShowMessage] = useState(false);
+    const aiInfoIcon = (
+            <img src="/static/icons/ai-info.svg" alt="AI Info Icon"/>
+    );
+    const aiMessage = (
+        <div className="header">
+        <div className="myProfileBox">
+      <div className="interfaceLinks">
+        <div className="interfaceLinks-menu profile-menu aiToggle">
+          <div className="interfaceLinks-header aiToggleMessage">
+              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>
+          </div>
+          <hr className="interfaceLinks-hr" />
+          <div className="interfaceLinks-row-aiToggle aiToggleMessage"><a href={"https://sefaria.formstack.com/forms/ai_feedback_form"}>Feedback</a></div>
+        </div>
+      </div>
+            </div>
+            </div>
+    );
+  return (
+    <div className="ai-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: "טוען..."};
   const category = !!topicData ? Sefaria.topicTocCategory(topicData.slug) : null;
   const tpTopImg = !multiPanel && topicImage ? <TopicImage photoLink={topicImage.image_uri} caption={topicImage.image_caption}/> : null;
   const actionButtons = getTopicHeaderAdminActionButtons(topic, topicData.refs?.about?.refs);
-
-  return (
+//     const aiInfoIcon = (
+//             <img src="/static/icons/ai-info.svg" alt="AI Info Icon"/>
+//   );
+// const aiMessage = (
+//     <div className="header">
+//     <div className="myProfileBox">
+//   <div className="interfaceLinks">
+//     <div className="interfaceLinks-menu profile-menu aiToggle">
+//       <div className="interfaceLinks-header aiToggleMessage">
+//           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>
+//       </div>
+//       <hr className="interfaceLinks-hr" />
+//       <div className="interfaceLinks-row-aiToggle aiToggleMessage"><a href={"https://sefaria.formstack.com/forms/ai_feedback_form"}>Feedback</a></div>
+//     </div>
+//   </div>
+//         </div>
+//         </div>
+// );
+return (
     <div>
         <div className="navTitle tight">
                 <CategoryHeader type="topics" data={topicData} toggleButtonIDs={["source", "edit", "reorder"]} actionButtons={actionButtons}>
                 <h1>
                     <InterfaceText text={{en:en, he:he}}/>
                 </h1>
                 </CategoryHeader>
+                <AiInfoTooltip/>
         </div>
        {!topicData && !isCat ?<LoadingMessage/> : null}
        {!isCat && category ?