From 13bc66c42dcd5fd259f53bbeabebf2a6a4cadc17 Mon Sep 17 00:00:00 2001
From: BFlat <bflat@storyteller.ai>
Date: Fri, 23 Aug 2024 14:31:29 +0700
Subject: [PATCH] weight page ai tools cta and comments show more button (#679)

---
 .../ProfileSidePanel/ProfileSidePanel.scss    |  1 +
 .../v2/view/_common/comments/CommentList.tsx  | 33 +++++++++++++++----
 .../src/v2/view/pages/weight/WeightPage.tsx   | 10 +++++-
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/website/packages/fakeyou.com/src/components/layout/ProfileSidePanel/ProfileSidePanel.scss b/src/website/packages/fakeyou.com/src/components/layout/ProfileSidePanel/ProfileSidePanel.scss
index 1f8b1a9e9d..8331726191 100644
--- a/src/website/packages/fakeyou.com/src/components/layout/ProfileSidePanel/ProfileSidePanel.scss
+++ b/src/website/packages/fakeyou.com/src/components/layout/ProfileSidePanel/ProfileSidePanel.scss
@@ -67,6 +67,7 @@ $topbar-height: 66px;
   padding-left: 340px;
   padding-top: $topbar-height;
   // transition: all 0.2s ease;
+  min-height: 100vh;
 
   &.no-page-padding-top {
     padding-top: 0;
diff --git a/src/website/packages/fakeyou.com/src/v2/view/_common/comments/CommentList.tsx b/src/website/packages/fakeyou.com/src/v2/view/_common/comments/CommentList.tsx
index 679182970f..5965e031e1 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/_common/comments/CommentList.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/_common/comments/CommentList.tsx
@@ -1,10 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
 import { formatDistance } from "date-fns";
 import { Comment } from "@storyteller/components/src/api/comments/ListComments";
 import { SafeDeleteCommentButton } from "./SafeDeleteCommentButton";
 import { Gravatar } from "@storyteller/components/src/elements/Gravatar";
 import { Link } from "react-router-dom";
 import { useSession } from "hooks";
+import { Button } from "components/common";
+import { faChevronDown } from "@fortawesome/pro-solid-svg-icons";
 
 interface Props {
   entityType: string;
@@ -25,10 +27,15 @@ function CommentList(props: Props) {
   var reversedComments = props.comments.slice();
 
   const now = new Date();
+  const [visibleCount, setVisibleCount] = useState(5);
+
+  const showMoreComments = () => {
+    setVisibleCount(prevCount => prevCount + 10);
+  };
 
   let rows: Array<JSX.Element> = [];
 
-  reversedComments.forEach(comment => {
+  reversedComments.slice(0, visibleCount).forEach(comment => {
     const createTime = new Date(comment.created_at);
     const relativeCreateTime = formatDistance(createTime, now, {
       addSuffix: true,
@@ -64,7 +71,7 @@ function CommentList(props: Props) {
     rows.push(
       <tr key={comment.token}>
         <td className="px-0">
-          <div className="d-flex gap-3 py-3">
+          <div className="d-flex gap-3 py-2">
             <Gravatar
               email_hash={gravatarHash || ""}
               username={username || ""}
@@ -104,9 +111,23 @@ function CommentList(props: Props) {
   });
 
   return (
-    <table className="table mb-0">
-      <tbody>{rows}</tbody>
-    </table>
+    <>
+      <table className="table mb-0">
+        <tbody>{rows}</tbody>
+      </table>
+      {visibleCount < reversedComments.length && (
+        <div className="text-center mt-2 d-flex justify-content-center">
+          <Button
+            variant="secondary"
+            small={true}
+            onClick={showMoreComments}
+            label="Show More Comments"
+            iconFlip={true}
+            icon={faChevronDown}
+          />
+        </div>
+      )}
+    </>
   );
 }
 
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx
index 8885d7d52d..b885fd419f 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx
@@ -44,6 +44,7 @@ import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 import { ActionButton, ActionButtonProps } from "components/common";
 import { DeleteFeaturedItem } from "@storyteller/components/src/api/featured_items/DeleteFeaturedItem";
 import { CreateFeaturedItem } from "@storyteller/components/src/api/featured_items/CreateFeaturedItem";
+import { AITools } from "components/marketing";
 
 interface WeightProps {
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
@@ -505,7 +506,6 @@ export default function WeightPage({
             </div>
           </div>
         </Panel>
-
         <div className="row g-4">
           <div className="col-12 col-xl-8 d-flex flex-column gap-3">
             {weight &&
@@ -655,6 +655,14 @@ export default function WeightPage({
           </Panel>
         </Container>
       </div>
+
+      <Container type="panel" className="pt-5 mt-5">
+        <Panel clear={true}>
+          <h2 className="fw-bold mb-3">Try our other AI tools</h2>
+          <AITools />
+        </Panel>
+      </Container>
+
       <Modal
         show={isDeleteModalOpen}
         handleClose={closeDeleteModal}