feat(AIReplySection): add collapse / expand logic

cofacts · Mar 28, 2023 · 772cdf3 · 772cdf3
1 parent 0fd82d6
commit 772cdf3
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 12 deletions.
diff --git a/components/AIReplySection.js b/components/AIReplySection.js
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { t } from 'ttag';
+
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+
+import { Card, CardHeader, CardContent } from 'components/Card';
+import Hint from 'components/NewReplySection/ReplyForm/Hint';
+
+function AIReplySection({ defaultExpand = false, aiReplyText = '' }) {
+  const [expand, setExpand] = useState(defaultExpand);
+
+  return (
+    <Card>
+      <CardHeader
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          borderBottomColor: expand ? '#333' : 'transparent',
+          paddingBottom: expand ? undefined : 12,
+          cursor: 'pointer',
+        }}
+        onClick={() => setExpand(v => !v)}
+      >
+        {t`Automated analysis from ChatGPT`}
+        {expand ? <KeyboardArrowDownIcon /> : <KeyboardArrowUpIcon />}
+      </CardHeader>
+      {expand && (
+        <CardContent>
+          <Hint>
+            {t`The following is the AI's preliminary analysis of this message, which we hope will provide you with some ideas before it is fact-checked by a human.`}
+          </Hint>
+          <div style={{ whiteSpace: 'pre-line', marginTop: 16 }}>
+            {aiReplyText}
+          </div>
+        </CardContent>
+      )}
+    </Card>
+  );
+}
+
+export default AIReplySection;
diff --git a/pages/article/[id].js b/pages/article/[id].js
@@ -36,12 +36,12 @@ import CurrentReplies from 'components/CurrentReplies';
 import ReplyRequestReason from 'components/ReplyRequestReason';
 import CreateReplyRequestForm from 'components/CreateReplyRequestForm';
 import NewReplySection from 'components/NewReplySection';
-import Hint from 'components/NewReplySection/ReplyForm/Hint';
 import ArticleInfo from 'components/ArticleInfo';
 import ArticleCategories from 'components/ArticleCategories';
 import TrendPlot from 'components/TrendPlot';
 import Infos, { TimeInfo } from 'components/Infos';
 import Thumbnail from 'components/Thumbnail';
+import AIReplySection from 'components/AIReplySection';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -532,17 +532,10 @@ function ArticlePage() {
           )}
 
           {article.aiReplies?.length > 0 && (
-            <Card>
-              <CardHeader>{t`Automated analysis from ChatGPT`}</CardHeader>
-              <CardContent>
-                <Hint>
-                  {t`The following is the AI's preliminary analysis of this message, which we hope will provide you with some ideas before it is fact-checked by a human.`}
-                </Hint>
-                <div style={{ whiteSpace: 'pre-line', marginTop: 16 }}>
-                  {article.aiReplies[0].text}
-                </div>
-              </CardContent>
-            </Card>
+            <AIReplySection
+              defaultExpand={replyCount === 0}
+              aiReplyText={article.aiReplies[0].text}
+            />
           )}
 
           <Hidden smDown implementation="css">