chore: export

src/hooks/useJson.ts

@@ -9,6 +9,7 @@ export default function useJson<T>(file: string) {
   const refreshJson = async () => {
     const data = await readJSON(file);
     setData(data);
+    return data;
   };
 
   const updateJson = async (data: any) => {

src/routes.tsx

@@ -1,11 +1,12 @@
 import { useRoutes } from 'react-router-dom';
 import {
-  DesktopOutlined,
+  SettingOutlined,
   BulbOutlined,
   SyncOutlined,
   FileSyncOutlined,
   UserOutlined,
   DownloadOutlined,
+  FormOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
 
@@ -15,6 +16,7 @@ import SyncPrompts from '@/view/model/SyncPrompts';
 import SyncCustom from '@/view/model/SyncCustom';
 import SyncRecord from '@/view/model/SyncRecord';
 import Download from '@/view/download';
+import Notes from '@/view/notes';
 
 export type ChatRouteMetaObject = {
   label: string;
@@ -35,15 +37,15 @@ export const routes: Array<ChatRouteObject> = [
     element: <General />,
     meta: {
       label: 'General',
-      icon: <DesktopOutlined />,
+      icon: <SettingOutlined />,
     },
   },
   {
-    path: 'download',
-    element: <Download />,
+    path: '/notes',
+    element: <Notes />,
     meta: {
-      label: 'Download',
-      icon: <DownloadOutlined />,
+      label: 'Notes',
+      icon: <FormOutlined />,
     },
   },
   {
@@ -85,6 +87,14 @@ export const routes: Array<ChatRouteObject> = [
       },
     ],
   },
+  {
+    path: 'download',
+    element: <Download />,
+    meta: {
+      label: 'Download',
+      icon: <DownloadOutlined />,
+    },
+  },
 ];
 
 type MenuItem = Required<MenuProps>['items'][number];

src/utils.ts

@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
 export const CHAT_MODEL_JSON = 'chat.model.json';
 export const CHAT_MODEL_CMD_JSON = 'chat.model.cmd.json';
 export const CHAT_DOWNLOAD_JSON = 'chat.download.json';
+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 DISABLE_AUTO_COMPLETE = {

src/view/download/index.tsx

@@ -18,7 +18,7 @@ function renderFile(buff: Uint8Array, type: string) {
   return URL.createObjectURL(new Blob([buff], { type: renderType }));
 }
 
-export default function SyncPrompts() {
+export default function Download() {
   const [downloadPath, setDownloadPath] = useState('');
   const [source, setSource] = useState('');
   const [isVisible, setVisible] = useState(false);
@@ -51,9 +51,6 @@ export default function SyncPrompts() {
         setVisible(true);
         return;
       }
-      if (opInfo.opType === 'file') {
-        await shell.open(file);
-      }
       if (opInfo.opType === 'delete') {
         await fs.removeFile(file);
         await handleRefresh();
@@ -90,8 +87,9 @@ export default function SyncPrompts() {
   };
 
   const handleRefresh = async () => {
-    await invoke('download_list', { pathname: CHAT_DOWNLOAD_JSON });
-    refreshJson();
+    await invoke('download_list', { pathname: CHAT_DOWNLOAD_JSON, dir: 'download' });
+    const data = await refreshJson();
+    opInit(data);
   };
 
   const handleCancel = () => {
@@ -107,7 +105,7 @@ export default function SyncPrompts() {
             <>
               <Popconfirm
                 overlayStyle={{ width: 250 }}
-                title="Sync will overwrite the previous data, confirm to sync?"
+                title="Files cannot be recovered after deletion, are you sure you want to delete them?"
                 placement="topLeft"
                 onConfirm={handleDelete}
                 okText="Yes"

src/view/notes/config.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { Space, Popconfirm } from 'antd';
+import { path, shell } from '@tauri-apps/api';
+
+import { EditRow } from '@/hooks/useColumns';
+
+import useInit from '@/hooks/useInit';
+import { fmtDate, chatRoot } from '@/utils';
+
+export const notesColumns = () => [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    fixed: 'left',
+    key: 'name',
+    width: 240,
+    render: (_: string, row: any, actions: any) => (
+      <EditRow rowKey="name" row={row} actions={actions} />
+    ),
+  },
+  {
+    title: 'Path',
+    dataIndex: 'path',
+    key: 'path',
+    width: 200,
+    render: (_: string, row: any) => <RenderPath row={row} />,
+  },
+  {
+    title: 'Created',
+    dataIndex: 'created',
+    key: 'created',
+    width: 150,
+    render: fmtDate,
+  },
+  {
+    title: 'Action',
+    fixed: 'right',
+    width: 160,
+    render: (_: any, row: any, actions: any) => {
+      return (
+        <Space>
+          <a onClick={() => actions.setRecord(row, 'preview')}>Preview</a>
+          <a onClick={() => actions.setRecord(row, 'edit')}>Edit</a>
+          <Popconfirm
+            title="Are you sure to delete this file?"
+            onConfirm={() => actions.setRecord(row, 'delete')}
+            okText="Yes"
+            cancelText="No"
+          >
+            <a>Delete</a>
+          </Popconfirm>
+        </Space>
+      )
+    }
+  }
+];
+
+const RenderPath = ({ row }: any) => {
+  const [filePath, setFilePath] = useState('');
+  useInit(async () => {
+      setFilePath(await getPath(row));
+  })
+  return <a onClick={() => shell.open(filePath)}>{filePath}</a>;
+};
+
+export const getPath = async (row: any) => {
+  const isImg = ['png'].includes(row?.ext);
+  return await path.join(await chatRoot(), 'notes', row.id) + `.${row.ext}`;
+}

src/view/notes/index.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useState } from 'react';
+import { Table, Modal, Popconfirm, Button, message } from 'antd';
+import { invoke, path, shell, fs } from '@tauri-apps/api';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+import useInit from '@/hooks/useInit';
+import useJson from '@/hooks/useJson';
+import useData from '@/hooks/useData';
+import useColumns from '@/hooks/useColumns';
+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([]);
+  const { columns, ...opInfo } = useColumns(notesColumns());
+  const { rowSelection, selectedRows, rowReset } = useTableRowSelection({ rowType: 'row' });
+  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);
+  }, [json?.length]);
+
+  useEffect(() => {
+    if (!opInfo.opType) return;
+    (async () => {
+      const record = opInfo?.opRecord;
+      const file = await path.join(await chatRoot(), 'notes', `${record?.id}.${record?.ext}`);
+      if (opInfo.opType === 'preview') {
+        const data = await fs.readTextFile(file);
+        setSource(data);
+        setVisible(true);
+        return;
+      }
+      if (opInfo.opType === 'edit') {
+        alert('TODO');
+      }
+      if (opInfo.opType === 'delete') {
+        await fs.removeFile(file);
+        await handleRefresh();
+      }
+      if (opInfo.opType === 'rowedit') {
+        const data = opReplace(opInfo?.opRecord?.[opSafeKey], opInfo?.opRecord);
+        await updateJson(data);
+        message.success('Name has been changed!');
+      }
+      opInfo.resetRecord();
+    })()
+  }, [opInfo.opType])
+
+  const handleDelete = async () => {
+    if (opData?.length === selectedRows.length) {
+      const notesDir = await path.join(await chatRoot(), 'notes');
+      await fs.removeDir(notesDir, { recursive: true });
+      await handleRefresh();
+      rowReset();
+      message.success('All files have been cleared!');
+      return;
+    }
+
+    const rows = selectedRows.map(async (i) => {
+      const file = await path.join(await chatRoot(), 'notes', `${i?.id}.${i?.ext}`);
+      await fs.removeFile(file);
+      return file;
+    })
+    Promise.all(rows).then(async () => {
+      await handleRefresh();
+      message.success('All files selected are cleared!');
+    });
+  };
+
+  const handleRefresh = async () => {
+    await invoke('download_list', { pathname: CHAT_NOTES_JSON, dir: 'notes' });
+    const data = await refreshJson();
+    opInit(data);
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+    opInfo.resetRecord();
+  };
+
+  return (
+    <div>
+      <div className="chat-table-btns">
+        <div>
+          {selectedItems.length > 0 && (
+            <>
+              <Popconfirm
+                overlayStyle={{ width: 250 }}
+                title="Files cannot be recovered after deletion, are you sure you want to delete them?"
+                placement="topLeft"
+                onConfirm={handleDelete}
+                okText="Yes"
+                cancelText="No"
+              >
+                <Button>Batch delete</Button>
+              </Popconfirm>
+              <span className="num">Selected {selectedItems.length} items</span>
+            </>
+          )}
+        </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>
+      <Table
+        rowKey="id"
+        columns={columns}
+        scroll={{ x: 800 }}
+        dataSource={opData}
+        rowSelection={rowSelection}
+        pagination={TABLE_PAGINATION}
+      />
+      <Modal
+        open={isVisible}
+        title={<div>{opInfo?.opRecord?.name || ''}</div>}
+        onCancel={handleCancel}
+        footer={false}
+        destroyOnClose
+      >
+        <ReactMarkdown
+          children={source}
+          components={{
+            code({node, inline, className, children, ...props}) {
+              const match = /language-(\w+)/.exec(className || '')
+              return !inline && match ? (
+                <SyntaxHighlighter
+                  children={String(children).replace(/\n$/, '')}
+                  style={a11yDark as any}
+                  language={match[1]}
+                  PreTag="div"
+                  {...props}
+                />
+              ) : (
+                <code className={className} {...props}>
+                  {children}
+                </code>
+              )
+            }
+          }}
+        />
+      </Modal>
+    </div>
+  )
+}