chore: path

src/view/General.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useState } from 'react';
 import { Form, Radio, Switch, Input, Button, Space, message, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
-import { invoke, shell, path } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api';
 import { platform } from '@tauri-apps/api/os';
 import { ask } from '@tauri-apps/api/dialog';
 import { relaunch } from '@tauri-apps/api/process';
 import { clone, omit, isEqual } from 'lodash';
 
 import useInit from '@/hooks/useInit';
-import { DISABLE_AUTO_COMPLETE, chatRoot } from '@/utils';
+import FilePath from '@/components/FilePath';
+import { DISABLE_AUTO_COMPLETE, CHAT_CONF_JSON } from '@/utils';
 
 const AutoUpdateLabel = () => {
   return (
@@ -68,13 +69,10 @@ const GlobalShortcutLabel = () => {
 
 export default function General() {
   const [form] = Form.useForm();
-  const [jsonPath, setJsonPath] = useState('');
   const [platformInfo, setPlatform] = useState<string>('');
   const [chatConf, setChatConf] = useState<any>(null);
 
   useInit(async () => {
-    setJsonPath(await path.join(await chatRoot(), 'chat.conf.json'));
-
     setPlatform(await platform());
     const chatData = await invoke('get_chat_conf');
     setChatConf(chatData);
@@ -117,11 +115,7 @@ export default function General() {
 
   return (
     <>
-      <div className="chat-table-tip">
-        <div className="chat-sync-path">
-          <div>PATH: <a onClick={() => shell.open(jsonPath)} title={jsonPath}>{jsonPath}</a></div>
-        </div>
-      </div>
+      <FilePath paths={CHAT_CONF_JSON} />
       <Form
         form={form}
         style={{ maxWidth: 500 }}

src/view/download/index.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 import { Table, Modal, Popconfirm, Button, message } from 'antd';
-import { invoke, path, shell, fs } from '@tauri-apps/api';
+import { invoke, path, fs } from '@tauri-apps/api';
 
-import useInit from '@/hooks/useInit';
 import useJson from '@/hooks/useJson';
 import useData from '@/hooks/useData';
 import useColumns from '@/hooks/useColumns';
+import FilePath from '@/components/FilePath';
 import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
 import { chatRoot, CHAT_DOWNLOAD_JSON } from '@/utils';
 import { downloadColumns } from './config';
@@ -19,7 +19,6 @@ function renderFile(buff: Uint8Array, type: string) {
 }
 
 export default function Download() {
-  const [downloadPath, setDownloadPath] = useState('');
   const [source, setSource] = useState('');
   const [isVisible, setVisible] = useState(false);
   const { opData, opInit, opReplace, opSafeKey } = useData([]);
@@ -28,11 +27,6 @@ export default function Download() {
   const { json, refreshJson, updateJson } = useJson<any[]>(CHAT_DOWNLOAD_JSON);
   const selectedItems = rowSelection.selectedRowKeys || [];
 
-  useInit(async () => {
-    const file = await path.join(await chatRoot(), CHAT_DOWNLOAD_JSON);
-    setDownloadPath(file);
-  });
-
   useEffect(() => {
     if (!json || json.length <= 0) return;
     opInit(json);
@@ -118,11 +112,7 @@ export default function Download() {
           )}
         </div>
       </div>
-      <div className="chat-table-tip">
-        <div className="chat-file-path">
-          <div>PATH: <a onClick={() => shell.open(downloadPath)} title={downloadPath}>{downloadPath}</a></div>
-        </div>
-      </div>
+      <FilePath paths={CHAT_DOWNLOAD_JSON} />
       <Table
         rowKey="id"
         columns={columns}

src/view/markdown/index.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Breadcrumb } from 'antd';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import MarkdownEditor from '@/components/Markdown/Editor';
+
+import useInit from '@/hooks/useInit';
+import { getPath } from '@/view/notes/config';
+
+export default function Markdown() {
+  const [filePath, setFilePath] = useState('');
+  const location = useLocation();
+  const state = location?.state;
+
+  useInit(async () => {
+    setFilePath(await getPath(state));
+  })
+
+  return (
+    <>
+      <Breadcrumb separator=" ">
+        <Breadcrumb.Item href="">
+          <ArrowLeftOutlined />
+        </Breadcrumb.Item>
+        <Breadcrumb.Item href="">
+          {filePath}
+        </Breadcrumb.Item>
+      </Breadcrumb>
+      <MarkdownEditor />
+    </>
+  );
+}

src/view/model/SyncCustom/index.tsx

@@ -3,9 +3,9 @@ import { Table, Modal, Button, message } from 'antd';
 import { invoke, path, fs } from '@tauri-apps/api';
 
 import useData from '@/hooks/useData';
-import useChatModel, { useCacheModel } from '@/hooks/useChatModel';
 import useColumns from '@/hooks/useColumns';
 import { TABLE_PAGINATION } from '@/hooks/useTable';
+import useChatModel, { useCacheModel } from '@/hooks/useChatModel';
 import { CHAT_MODEL_JSON, chatRoot, readJSON, genCmd } from '@/utils';
 import { syncColumns, getPath } from './config';
 import SyncForm from './Form';

src/view/model/SyncPrompts/index.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 import { Table, Button, Popconfirm } from 'antd';
-import { invoke, path, shell } from '@tauri-apps/api';
+import { invoke, path } from '@tauri-apps/api';
 
 import useInit from '@/hooks/useInit';
 import useData from '@/hooks/useData';
 import useColumns from '@/hooks/useColumns';
+import FilePath from '@/components/FilePath';
 import useChatModel, { useCacheModel } from '@/hooks/useChatModel';
 import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
 import { fmtDate, chatRoot } from '@/utils';
@@ -80,8 +81,8 @@ export default function SyncPrompts() {
       </div>
       <div className="chat-table-tip">
         <div className="chat-sync-path">
-          <div>PATH: <a onClick={() => shell.open(promptsURL)} target="_blank" title={promptsURL}>f/awesome-chatgpt-prompts/prompts.csv</a></div>
-          <div>CACHE: <a onClick={() => shell.open(jsonPath)} target="_blank" title={jsonPath}>{jsonPath}</a></div>
+          <FilePath url={promptsURL} content="f/awesome-chatgpt-prompts/prompts.csv" />
+          <FilePath label="CACHE" paths="cache_model/chatgpt_prompts.json" />
         </div>
         {lastUpdated && <span style={{ marginLeft: 10, color: '#888', fontSize: 12 }}>Last updated on {fmtDate(lastUpdated)}</span>}
       </div>

src/view/model/SyncRecord/index.tsx

@@ -2,14 +2,15 @@ import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import { Table, Button } from 'antd';
-import { shell, path } from '@tauri-apps/api';
+import { path } from '@tauri-apps/api';
 
-import useColumns from '@/hooks/useColumns';
 import useData from '@/hooks/useData';
+import useColumns from '@/hooks/useColumns';
+import FilePath from '@/components/FilePath';
 import { useCacheModel } from '@/hooks/useChatModel';
 import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
-import { fmtDate, chatRoot } from '@/utils';
 import { getPath } from '@/view/model/SyncCustom/config';
+import { fmtDate, chatRoot } from '@/utils';
 import { syncColumns } from './config';
 import useInit from '@/hooks/useInit';
 
@@ -66,8 +67,8 @@ export default function SyncRecord() {
       </div>
       <div className="chat-table-tip">
         <div className="chat-sync-path">
-          <div>PATH: <a onClick={() => shell.open(filePath)} target="_blank" title={filePath}>{filePath}</a></div>
-          <div>CACHE: <a onClick={() => shell.open(jsonPath)} target="_blank" title={jsonPath}>{jsonPath}</a></div>
+          <FilePath url={filePath} />
+          <FilePath label="CACHE" paths={`cache_model/${state?.id}.json`} />
         </div>
         {state?.last_updated && <span style={{ marginLeft: 10, color: '#888', fontSize: 12 }}>Last updated on {fmtDate(state?.last_updated)}</span>}
       </div>

src/view/model/UserCustom/index.tsx

@@ -1,11 +1,12 @@
 import { useState, useRef, useEffect } from 'react';
 import { Table, Button, Modal, message } from 'antd';
-import { shell, path } from '@tauri-apps/api';
+import { path } from '@tauri-apps/api';
 
 import useInit from '@/hooks/useInit';
 import useData from '@/hooks/useData';
-import useChatModel, { useCacheModel } from '@/hooks/useChatModel';
 import useColumns from '@/hooks/useColumns';
+import FilePath from '@/components/FilePath';
+import useChatModel, { useCacheModel } from '@/hooks/useChatModel';
 import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
 import { chatRoot, fmtDate } from '@/utils';
 import { modelColumns } from './config';
@@ -108,11 +109,8 @@ export default function LanguageModel() {
           )}
         </div>
       </div>
-      {/* <div className="chat-model-path">PATH: <span onClick={handleOpenFile}>{modelPath}</span></div> */}
       <div className="chat-table-tip">
-        <div className="chat-sync-path">
-          <div>CACHE: <a onClick={() => shell.open(jsonPath)} title={jsonPath}>{jsonPath}</a></div>
-        </div>
+        <FilePath label="CACHE" paths="cache_model/user_custom.json" />
         {lastUpdated && <span style={{ marginLeft: 10, color: '#888', fontSize: 12 }}>Last updated on {fmtDate(lastUpdated)}</span>}
       </div>
       <Table

src/view/notes/config.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 import { Space, Popconfirm } from 'antd';
 import { path, shell } from '@tauri-apps/api';
 
@@ -40,7 +41,7 @@ export const notesColumns = () => [
       return (
         <Space>
           <a onClick={() => actions.setRecord(row, 'preview')}>Preview</a>
-          <a onClick={() => actions.setRecord(row, 'edit')}>Edit</a>
+          <Link to={`/md/${row.id}`} state={row}>Edit</Link>
           <Popconfirm
             title="Are you sure to delete this file?"
             onConfirm={() => actions.setRecord(row, 'delete')}

src/view/notes/index.tsx

@@ -1,18 +1,17 @@
 import { useEffect, useState } from 'react';
 import { Table, Modal, Popconfirm, Button, message } from 'antd';
-import { invoke, path, shell, fs } from '@tauri-apps/api';
+import { invoke, path, fs } from '@tauri-apps/api';
 
-import useInit from '@/hooks/useInit';
 import useJson from '@/hooks/useJson';
 import useData from '@/hooks/useData';
 import useColumns from '@/hooks/useColumns';
 import Markdown from '@/components/Markdown';
+import FilePath from '@/components/FilePath';
 import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
 import { chatRoot, CHAT_NOTES_JSON } from '@/utils';
 import { notesColumns } from './config';
 
 export default function Notes() {
-  const [notesPath, setNotesPath] = useState('');
   const [source, setSource] = useState('');
   const [isVisible, setVisible] = useState(false);
   const { opData, opInit, opReplace, opSafeKey } = useData([]);
@@ -21,11 +20,6 @@ export default function Notes() {
   const { json, refreshJson, updateJson } = useJson<any[]>(CHAT_NOTES_JSON);
   const selectedItems = rowSelection.selectedRowKeys || [];
 
-  useInit(async () => {
-    const file = await path.join(await chatRoot(), CHAT_NOTES_JSON);
-    setNotesPath(file);
-  });
-
   useEffect(() => {
     if (!json || json.length <= 0) return;
     opInit(json);
@@ -42,9 +36,6 @@ export default function Notes() {
         setVisible(true);
         return;
       }
-      if (opInfo.opType === 'edit') {
-        alert('TODO');
-      }
       if (opInfo.opType === 'delete') {
         await fs.removeFile(file);
         await handleRefresh();
@@ -111,11 +102,7 @@ export default function Notes() {
           )}
         </div>
       </div>
-      <div className="chat-table-tip">
-        <div className="chat-file-path">
-          <div>PATH: <a onClick={() => shell.open(notesPath)} title={notesPath}>{notesPath}</a></div>
-        </div>
-      </div>
+      <FilePath paths={CHAT_NOTES_JSON} />
       <Table
         rowKey="id"
         columns={columns}