feat: preview social media ai daily

Signed-off-by: Innei <i@innei.in>
RSSNext · Aug 9, 2024 · 0252bc0 · 0252bc0
1 parent e2df38f
commit 0252bc0
Show file tree

Hide file tree

Showing 6 changed files with 302 additions and 43 deletions.
diff --git a/src/renderer/src/components/ui/markdown/Markdown.tsx b/src/renderer/src/components/ui/markdown/Markdown.tsx
@@ -1,17 +1,27 @@
+import type { RemarkOptions } from "@renderer/lib/parse-markdown"
 import { parseMarkdown } from "@renderer/lib/parse-markdown"
 import { cn } from "@renderer/lib/utils"
-import { useMemo } from "react"
+import { useMemo, useState } from "react"
+
+export const Markdown: Component<
+  {
+    children: string
+  } & Partial<RemarkOptions>,
+> = ({ children, components, className }) => {
+  const stableRemarkOptions = useState({ components })[0]
 
-export const Markdown: Component<{
-  children: string
-}> = ({ children, className }) => {
   const markdownElement = useMemo(
-    () => parseMarkdown(children).content,
-    [children],
+    () => parseMarkdown(children, { ...stableRemarkOptions }).content,
+    [children, stableRemarkOptions],
   )
 
   return (
-    <article className={cn("prose relative cursor-auto select-text dark:prose-invert prose-th:text-left", className)}>
+    <article
+      className={cn(
+        "prose relative cursor-auto select-text dark:prose-invert prose-th:text-left",
+        className,
+      )}
+    >
       {markdownElement}
     </article>
   )

diff --git a/src/renderer/src/components/ui/markdown/renderers/MarkdownLink.tsx b/src/renderer/src/components/ui/markdown/renderers/MarkdownLink.tsx
@@ -1,5 +1,6 @@
 import { useNavigateEntry } from "@renderer/hooks/biz/useNavigateEntry"
 import { FeedViewType } from "@renderer/lib/enum"
+import { isBizId } from "@renderer/lib/utils"
 import { useEntryContentContext } from "@renderer/modules/entry-content/hooks"
 import { useEntry } from "@renderer/store/entry"
 import { useCallback } from "react"
@@ -16,18 +17,21 @@ import { ensureAndRenderTimeStamp } from "../utils"
 export const MarkdownLink = (props: LinkProps) => {
   const { view } = useEntryContentContext()
 
-  const entryId = (/^\w{17}$/.test(props.href)) ? props.href : null
+  const entryId = isBizId(props.href) ? props.href : null
   const entry = useEntry(entryId)
 
   const navigate = useNavigateEntry()
-  const onClick = useCallback((e: React.MouseEvent) => {
-    if (entryId) {
-      e.preventDefault()
-      navigate({
-        entryId,
-      })
-    }
-  }, [entryId, navigate])
+  const onClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (entryId) {
+        e.preventDefault()
+        navigate({
+          entryId,
+        })
+      }
+    },
+    [entryId, navigate],
+  )
 
   const parseTimeStamp = view === FeedViewType.Audios
   if (parseTimeStamp) {

diff --git a/src/renderer/src/lib/parse-markdown.ts b/src/renderer/src/lib/parse-markdown.ts
@@ -5,6 +5,7 @@ import "remark-gh-alerts/styles/github-base.css"
 
 import remarkCalloutDirectives from "@microflash/remark-callout-directives"
 import { MarkdownLink } from "@renderer/components/ui/markdown/renderers"
+import type { Components } from "hast-util-to-jsx-runtime"
 import { toJsxRuntime } from "hast-util-to-jsx-runtime"
 import { createElement } from "react"
 import { Fragment, jsx, jsxs } from "react/jsx-runtime"
@@ -17,8 +18,15 @@ import remarkRehype from "remark-rehype"
 import { unified } from "unified"
 import { VFile } from "vfile"
 
-export const parseMarkdown = (content: string) => {
+export interface RemarkOptions {
+  components: Partial<Components>
+}
+export const parseMarkdown = (
+  content: string,
+  options?: Partial<RemarkOptions>,
+) => {
   const file = new VFile(content)
+  const { components } = options || {}
 
   const pipeline = unified()
     .use(remarkParse)
@@ -73,6 +81,7 @@ export const parseMarkdown = (content: string) => {
       components: {
         a: ({ node, ...props }) =>
           createElement(MarkdownLink, { ...props } as any),
+        ...components,
       },
     }),
   }

diff --git a/src/renderer/src/modules/ai/ai-daily/FeedDailyModalContent.tsx b/src/renderer/src/modules/ai/ai-daily/FeedDailyModalContent.tsx
@@ -7,7 +7,10 @@ import {
 import { FeedViewType } from "@renderer/lib/enum"
 
 import { DayOf } from "./constants"
-import { DailyReportContent, DailyReportTitle } from "./daily"
+import {
+  DailyReportModalContent,
+  DailyReportTitle,
+} from "./daily"
 import { useParseDailyDate } from "./hooks"
 
 const tabs = [DayOf.Today, DayOf.Yesterday]
@@ -29,10 +32,7 @@ export const FeedDailyModalContent = () => {
       <div className="flex grow flex-col items-center overflow-auto">
         {tabs.map((tab: any) => (
           <TabsContent key={tab} value={tab}>
-            <DailyReportContent
-              viewportClassName="max-h-[100vh] h-auto"
-              // TODO support other view types
-              autoResize={false}
+            <DailyReportModalContent
               view={FeedViewType.SocialMedia}
               {...(tab === DayOf.Today ? today : yesterday)}
             />