chore: about

package.json

@@ -50,6 +50,8 @@
     "react-resizable-panels": "^0.0.33",
     "react-router-dom": "^6.4.5",
     "react-syntax-highlighter": "^15.5.0",
+    "rehype-raw": "^6.1.1",
+    "remark-comment-config": "^7.0.1",
     "remark-gfm": "^3.0.1",
     "uuid": "^9.0.0"
   },

src-tauri/src/app/cmd.rs

@@ -354,6 +354,20 @@ pub async fn sync_prompts(app: AppHandle, time: u64) -> Option<Vec<ModelRecord>>
   None
 }
 
+#[command]
+pub async fn get_data(app: AppHandle, url: String, is_msg: Option<bool>) -> Option<String> {
+  let is_msg = is_msg.unwrap_or(false);
+  let res = if is_msg {
+    utils::get_data(&url, Some(&app)).await
+  } else {
+    utils::get_data(&url, None).await
+  };
+  res.unwrap_or_else(|err| {
+    info!("chatgpt_client_http_error: {}", err);
+    None
+  })
+}
+
 #[command]
 pub async fn sync_user_prompts(url: String, data_type: String) -> Option<Vec<ModelRecord>> {
   let res = utils::get_data(&url, None).await.unwrap_or_else(|err| {

src-tauri/src/main.rs

@@ -78,6 +78,7 @@ async fn main() {
       cmd::cmd_list,
       cmd::download_list,
       cmd::get_download_list,
+      cmd::get_data,
       fs_extra::metadata,
     ])
     .setup(setup::init)

src/components/Markdown/index.scss

@@ -13,6 +13,12 @@
   code {
     font-family: monospace, monospace;
   }
+
+  code {
+    background-color: rgba(200, 200, 200, 0.4);
+    padding: 2px 4px;
+    border-radius: 5px;
+  }
 }
 
 .md-main {

src/components/Markdown/index.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import clsx from 'clsx';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import agate from 'react-syntax-highlighter/dist/esm/styles/hljs/agate';
 
@@ -20,6 +21,7 @@ const Markdown: FC<MarkdownProps> = ({ children, className }) => {
           children={children}
           linkTarget="_blank"
           remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeRaw]}
           components={{
             code({ node, inline, className, children, ...props }) {
               const match = /language-(\w+)/.exec(className || '');

src/routes.tsx

@@ -8,10 +8,12 @@ import {
   DownloadOutlined,
   FormOutlined,
   GlobalOutlined,
+  InfoCircleOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
 
 import Settings from '@/view/settings';
+import About from '@/view/about';
 import Awesome from '@/view/awesome';
 import UserCustom from '@/view/model/UserCustom';
 import SyncPrompts from '@/view/model/SyncPrompts';
@@ -96,7 +98,7 @@ export const routes: Array<ChatRouteObject> = [
     ],
   },
   {
-    path: 'download',
+    path: '/download',
     element: <Download />,
     meta: {
       label: 'Download',
@@ -111,6 +113,14 @@ export const routes: Array<ChatRouteObject> = [
       icon: <SettingOutlined />,
     },
   },
+  {
+    path: '/about',
+    element: <About />,
+    meta: {
+      label: 'About',
+      icon: <InfoCircleOutlined />,
+    },
+  },
 ];
 
 type MenuItem = Required<MenuProps>['items'][number];

src/utils.ts

@@ -11,6 +11,7 @@ export const CHAT_NOTES_JSON = 'chat.notes.json';
 export const CHAT_PROMPTS_CSV = 'chat.prompts.csv';
 export const GITHUB_PROMPTS_CSV_URL =
   'https://raw.githubusercontent.com/f/awesome-chatgpt-prompts/main/prompts.csv';
+export const GITHUB_LOG_URL = 'https://raw.githubusercontent.com/lencx/ChatGPT/main/UPDATE_LOG.md';
 
 export const DISABLE_AUTO_COMPLETE = {
   autoCapitalize: 'off',

src/view/about/index.scss

@@ -0,0 +1,18 @@
+.about {
+  .log-tab {
+    font-size: 14px;
+
+    h2 {
+      font-size: 16px;
+    }
+  }
+
+  .about-tab {
+    .imgs {
+      img {
+        max-width: 200px;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}

src/view/about/index.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { invoke } from '@tauri-apps/api';
+import { Tabs, Tag } from 'antd';
+
+import { GITHUB_LOG_URL } from '@/utils';
+import useInit from '@/hooks/useInit';
+import Markdown from '@/components/Markdown';
+import './index.scss';
+
+export default function About() {
+  const [logContent, setLogContent] = useState('');
+
+  useInit(async () => {
+    const data = (await invoke('get_data', { url: GITHUB_LOG_URL })) || '';
+    setLogContent(data as string);
+  });
+
+  return (
+    <div className="about">
+      <Tabs
+        items={[
+          { label: 'About ChatGPT', key: 'about', children: <AboutChatGPT /> },
+          { label: 'Update Log', key: 'log', children: <LogTab content={logContent} /> },
+        ]}
+      />
+    </div>
+  );
+}
+
+const AboutChatGPT = () => {
+  return (
+    <div className="about-tab">
+      <Tag>ChatGPT Desktop Application (Mac, Windows and Linux)</Tag>
+      <p>
+        🕒 History versions:{' '}
+        <a href="https://github.com/lencx/ChatGPT/releases" target="_blank">
+          lencx/ChatGPT/releases
+        </a>
+      </p>
+      <p>
+        It is just a wrapper for the
+        <a href="https://chat.openai.com" target="_blank" title="https://chat.openai.com">
+          {' '}
+          OpenAI ChatGPT{' '}
+        </a>
+        website, no other data transfer exists (you can check the{' '}
+        <a
+          href="https://github.com/lencx/ChatGPT"
+          target="_blank"
+          title="https://github.com/lencx/ChatGPT"
+        >
+          {' '}
+          source code{' '}
+        </a>
+        ). The development and maintenance of this software has taken up a lot of my time. If it
+        helps you, you can buy me a cup of coffee (Chinese users can use WeChat to scan the code),
+        thanks!
+      </p>
+      <p className="imgs">
+        <a href="https://www.buymeacoffee.com/lencx" target="_blank">
+          <img
+            src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png"
+            alt="Buy Me A Coffee"
+          />
+        </a>{' '}
+        <br />
+        <img
+          width="200"
+          src="https://user-images.githubusercontent.com/16164244/207228025-117b5f77-c5d2-48c2-a070-774b7a1596f2.png"
+        ></img>
+      </p>
+    </div>
+  );
+};
+
+const LogTab = ({ content }: { content: string }) => {
+  return (
+    <div>
+      <p>
+        Ref:{' '}
+        <a href="https://github.com/lencx/ChatGPT/blob/main/UPDATE_LOG.md" target="_blank">
+          lencx/ChatGPT/UPDATE_LOG.md
+        </a>
+      </p>
+      <Markdown className="log-tab" children={content} />
+    </div>
+  );
+};