feat: add content health checking feature and update related components

l10n/bundle.l10n.json

@@ -530,6 +530,7 @@
   "panel.contentHealth.readability.hint.word": "Replace multi-syllable words with simpler alternatives.",
   "panel.contentHealth.title": "Content Health",
   "panel.contentHealth.noIssues": "No content health issues found.",
+  "panel.contentHealth.checking": "Analyzing content health...",
   "panel.contentHealth.readability.label": "Readability",
   "panel.contentHealth.readability.level.veryEasy": "Very Easy",
   "panel.contentHealth.readability.level.easy": "Easy",

src/listeners/panel/DataListener.ts

@@ -180,7 +180,7 @@ export class DataListener extends BaseListener {
       `You are helping me improve readability for this article.`,
       objective,
       `Preserve meaning, markdown structure, links, code blocks, and front matter unchanged.`,
-      `Return revised markdown body suggestions and explain key edits.`
+      `Update the article content and explain the key edits you made.`
     ].join('\n\n');
 
     try {

src/localization/localization.enum.ts

@@ -1724,6 +1724,10 @@ export enum LocalizationKey {
    * No content health issues found.
    */
   panelContentHealthNoIssues = 'panel.contentHealth.noIssues',
+  /**
+   * Analyzing content health...
+   */
+  panelContentHealthChecking = 'panel.contentHealth.checking',
   /**
    * Readability
    */
@@ -1749,7 +1753,7 @@ export enum LocalizationKey {
    */
   panelContentHealthReadabilityLevelVeryDifficult = 'panel.contentHealth.readability.level.veryDifficult',
   /**
-   * (below threshold)
+   * (below threshold - {0})
    */
   panelContentHealthReadabilityBelowThreshold = 'panel.contentHealth.readability.belowThreshold',
   /**

src/panelWebView/ViewPanel.tsx

@@ -32,7 +32,8 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = () => {
     folderAndFiles,
     focusElm,
     unsetFocus,
-    mode
+    mode,
+    contentHealth
   } = useMessages();
   const prevMediaSelection = usePrevious(mediaSelecting);
   const [scrollY, setScrollY] = useState(0);
@@ -130,9 +131,9 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = () => {
         </FeatureFlag>
 
         {
-          !loading && metadata?.contentHealth && (
+          !loading && metadata && (
             <FeatureFlag features={mode?.features || DEFAULT_PANEL_FEATURE_FLAGS} flag={FEATURE_FLAG.panel.contentHealth}>
-              <ContentHealth contentHealth={metadata.contentHealth} />
+              <ContentHealth contentHealth={contentHealth} />
             </FeatureFlag>
           )
         }

src/panelWebView/components/ContentHealth/ContentHealth.tsx

@@ -18,12 +18,16 @@ interface ContentHealthData {
 }
 
 interface Props {
-  contentHealth: ContentHealthData;
+  contentHealth: ContentHealthData | undefined;
 }
 
 const ContentHealth: React.FunctionComponent<Props> = ({ contentHealth }) => {
-  if (!contentHealth) {
-    return null;
+  if (contentHealth === undefined) {
+    return (
+      <Collapsible id='contentHealth' title={localize(LocalizationKey.panelContentHealthTitle)}>
+        <p className='opacity-60'>{localize(LocalizationKey.panelContentHealthChecking)}</p>
+      </Collapsible>
+    );
   }
 
   const { internalLinks, brokenExternalLinks, readability, freshnessWarning, minReadability = 0 } = contentHealth;

src/panelWebView/hooks/useMessages.tsx

@@ -14,6 +14,8 @@ import { PanelSettingsAtom } from '../state';
 export default function useMessages() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [metadata, setMetadata] = useState<any>(undefined);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [contentHealth, setContentHealth] = useState<any>(undefined);
   const [settings, setSettings] = useRecoilState(PanelSettingsAtom);
   const [loading, setLoading] = useState<boolean>(false);
   const [focusElm, setFocus] = useState<TagType | null>(null);
@@ -33,10 +35,11 @@ export default function useMessages() {
     switch (message.command) {
       case Command.metadata:
         setMetadata(message.payload);
+        setContentHealth(undefined);
         setLoading(false);
         break;
       case Command.contentHealth:
-        setMetadata((prev: any) => prev ? { ...prev, contentHealth: message.payload } : prev);
+        setContentHealth(message.payload);
         break;
       case Command.settings:
         setSettings(message.payload);
@@ -95,6 +98,7 @@ export default function useMessages() {
 
   return {
     metadata,
+    contentHealth,
     settings,
     folderAndFiles,
     focusElm,