fix: footnote style

src/renderer/src/assets/styles/markdown.scss

@@ -180,4 +180,51 @@
   sub {
     bottom: -0.25em;
   }
+
+  .footnote-ref {
+    font-size: 0.8em;
+    vertical-align: super;
+    line-height: 0;
+    margin: 0 2px;
+    color: var(--color-primary);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .footnotes {
+    margin-top: 1em;
+    padding-top: 1em;
+    border-top: 1px solid var(--color-border);
+
+    ol {
+      padding-left: 1em;
+    }
+
+    li {
+      font-size: 0.9em;
+      margin-bottom: 0.5em;
+      color: var(--color-text-light);
+
+      p {
+        display: inline;
+        margin: 0;
+      }
+    }
+
+    .footnote-backref {
+      font-size: 0.8em;
+      vertical-align: super;
+      line-height: 0;
+      margin-left: 5px;
+      color: var(--color-primary);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
 }

src/renderer/src/i18n/index.ts

@@ -25,7 +25,7 @@ const resources = {
         provider: 'Provider',
         you: 'You',
         save: 'Save',
-        footnotes: 'Footnotes'
+        footnotes: 'References'
       },
       button: {
         add: 'Add',

src/renderer/src/pages/home/components/Suggestions.tsx

@@ -86,7 +86,7 @@ const Suggestions: FC<Props> = ({ assistant, messages, lastMessage }) => {
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 10px 10px 20px 55px;
+  padding: 10px 10px 20px 65px;
   display: flex;
   width: 100%;
   flex-direction: row;

src/renderer/src/pages/home/components/markdown/Markdown.tsx

@@ -32,14 +32,18 @@ const Markdown: FC<Props> = ({ message }) => {
     return (
       <ReactMarkdown
         className="markdown"
-        remarkPlugins={[remarkGfm, remarkMath]}
-        remarkRehypeOptions={{ footnoteLabel: ' ', footnoteLabelTagName: 'h4' }}
+        remarkPlugins={[[remarkMath, { singleDollarTextMath: false }], remarkGfm]}
+        remarkRehypeOptions={{
+          footnoteLabel: t('common.footnotes'),
+          footnoteLabelTagName: 'h4',
+          footnoteBackContent: ' '
+        }}
         rehypePlugins={[rehypeKatex]}
         components={{ code: CodeBlock as any, a: Link as any }}>
         {getMessageContent(message)}
       </ReactMarkdown>
     )
-  }, [getMessageContent, message])
+  }, [getMessageContent, message, t])
 }
 
 export default Markdown

src/renderer/src/pages/home/components/sidebar/TopicsTab.tsx

@@ -140,7 +140,7 @@ const Container = styled.div`
 `
 
 const TopicListItem = styled.div`
-  padding: 8px 10px;
+  padding: 7px 10px;
   cursor: pointer;
   border-radius: 8px;
   font-size: 14px;