feat: add fallback for not recognized copilotDoc types

Author: GalvinGao

src/components/AccountManager.tsx

@@ -257,7 +257,7 @@ export const AccountAuthDialog: ComponentType<{
       isOpen={open}
       onClose={onClose}
     >
-      <div className="flex flex-col px-4 pt-2">
+      <div className="flex flex-col p-4 pt-2">
         <GlobalErrorBoundary>
           <Tabs
             // renderActiveTabPanelOnly: avoid autocomplete on inactive panel

src/components/OperationCard.tsx

@@ -109,7 +109,10 @@ export const OperationCard = ({
         <div className="flex">
           <div className="text-gray-700 leading-normal w-1/2">
             {/* <div className="text-sm text-zinc-600 mb-2 font-bold">作业描述</div> */}
-            <Paragraphs content={operationDoc.doc.details} linkify />
+            <Paragraphs
+              content={operationDoc.doc.details}
+              limitHeight={21 * 13.5} // 13 lines, 21px per line; the extra 0.5 line is intentional so the `mask` effect is obvious
+            />
           </div>
           <div className="w-1/2 ml-4">
             <div className="text-sm text-zinc-600 mb-2 font-bold">

src/components/Paragraphs.tsx

@@ -1,37 +1,71 @@
 import Linkify from 'linkify-react'
-import { FC, memo } from 'react'
+import { FC, memo, useEffect, useRef, useState } from 'react'
 
-export const Paragraphs: FC<{ content?: string; linkify?: boolean }> = memo(
-  ({ content, linkify }) => {
-    const paragraphs = content?.split('\n').map((el) => el.trim())
-    const child = (
-      <>
+export const Paragraphs: FC<{
+  content?: string
+  linkify?: boolean
+  limitHeight?: number
+}> = memo(({ content, linkify, limitHeight }) => {
+  const paragraphElementRef = useRef<HTMLDivElement>(null)
+  const paragraphs = content?.split('\n').map((el) => el.trim())
+
+  // exceededLimitHeight
+  const [exceededLimitHeight, setExceededLimitHeight] = useState(false)
+
+  useEffect(() => {
+    if (!paragraphElementRef.current || !limitHeight) {
+      return
+    }
+
+    const { height } = paragraphElementRef.current.getBoundingClientRect()
+
+    setExceededLimitHeight(height > limitHeight)
+  }, [paragraphElementRef.current, limitHeight])
+
+  const mask = exceededLimitHeight
+    ? 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) calc(100% - 2rem), rgba(0,0,0,0) 100%)'
+    : 'none'
+
+  const child = (
+    <div
+      className="text-gray-700 leading-normal"
+      style={{
+        maxHeight: limitHeight,
+        overflow: 'hidden',
+        mask,
+        WebkitMask: mask,
+        background: exceededLimitHeight
+          ? 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(100% - 2rem), rgba(0,0,0,0.1) 100%)'
+          : 'none',
+      }}
+    >
+      <div ref={paragraphElementRef}>
         {paragraphs?.map((paragraph, index) => (
           <p key={index}>{paragraph}</p>
         ))}
-      </>
-    )
-
-    return linkify ? (
-      <Linkify
-        options={{
-          attributes: {
-            target: '_blank',
-            rel: 'noopener noreferrer',
-          },
-          className: 'break-all',
-          format: {
-            url: (value) =>
-              value.length > 50 ? value.slice(0, 50) + '…' : value,
-          },
-        }}
-      >
-        {child}
-      </Linkify>
-    ) : (
-      child
-    )
-  },
-)
+      </div>
+    </div>
+  )
+
+  return linkify ? (
+    <Linkify
+      options={{
+        attributes: {
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        },
+        className: 'break-all',
+        format: {
+          url: (value) =>
+            value.length > 50 ? value.slice(0, 50) + '…' : value,
+        },
+      }}
+    >
+      {child}
+    </Linkify>
+  ) : (
+    child
+  )
+})
 
 Paragraphs.displayName = 'Paragraphs'

src/components/account/EditDialog.tsx

@@ -32,7 +32,7 @@ export const EditDialog: FC<EditDialogProps> = ({ isOpen, onClose }) => {
 
   return (
     <Dialog title="修改账户信息" icon="user" isOpen={isOpen} onClose={onClose}>
-      <div className="px-4 pt-2">
+      <div className="p-4 pt-2">
         <GlobalErrorBoundary>
           <Tabs
             // renderActiveTabPanelOnly: avoid autocomplete on inactive panel

src/components/account/ResetPasswordDialog.tsx

@@ -64,7 +64,7 @@ export const ResetPasswordDialog: FC<ResetPasswordDialogProps> = ({
       isOpen={isOpen}
       onClose={onClose}
     >
-      <div className="px-4 pt-2">
+      <div className="p-4 pt-2">
         <GlobalErrorBoundary>
           <form>
             {globalError && (