chore: export

src/hooks/useJson.ts

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+import { readJSON } from '@/utils';
+import useInit from '@/hooks/useInit';
+
+export default function useJson<T>(file: string) {
+  const [json, setData] = useState<T>();
+
+  const refreshJson = async () => {
+    const data = await readJSON(file);
+    setData(data);
+  };
+
+  useInit(refreshJson);
+
+  return { json, refreshJson };
+}

src/utils.ts

@@ -4,6 +4,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_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/config.tsx

@@ -1,28 +1,37 @@
-import { Switch, Tag, Tooltip, Space, Popconfirm } from 'antd';
+import { Tag, Space, Popconfirm } from 'antd';
+
+import { fmtDate } from '@/utils';
+
+const colorMap: any = {
+  pdf: 'blue',
+  png: 'orange',
+}
 
 export const syncColumns = () => [
   {
     title: 'Name',
     dataIndex: 'name',
     fixed: 'left',
-    // width: 120,
     key: 'name',
   },
   {
-    title: 'Type',
-    dataIndex: 'type',
-    key: 'type',
-    render: () => {
-      return <Tag>{}</Tag>;
-    }
-    // width: 200,
+    title: 'Extension',
+    dataIndex: 'ext',
+    key: 'ext',
+    render: (v: string) => <Tag color={colorMap[v]}>{v}</Tag>,
+  },
+  {
+    title: 'Created',
+    dataIndex: 'created',
+    key: 'created',
+    render: fmtDate,
   },
   {
     title: 'Action',
     render: (_: any, row: any, actions: any) => {
       return (
         <Space>
-          <a>View</a>
+          <a onClick={() => actions.setRecord(row, 'view')}>View</a>
           <Popconfirm
             title="Are you sure to delete this file?"
             onConfirm={() => actions.setRecord(row, 'delete')}

src/view/download/index.tsx

@@ -1,27 +1,52 @@
-import { useState } from 'react';
-import { Table } from 'antd';
-import { path, shell } from '@tauri-apps/api';
+import { useEffect, useState } from 'react';
+import { Table, Modal } from 'antd';
+import { path, shell, fs } from '@tauri-apps/api';
 
 import useInit from '@/hooks/useInit';
+import useJson from '@/hooks/useJson';
 import useColumns from '@/hooks/useColumns';
 import useTable, { TABLE_PAGINATION } from '@/hooks/useTable';
-import { chatRoot, readJSON } from '@/utils';
+import { chatRoot, CHAT_DOWNLOAD_JSON } from '@/utils';
 import { syncColumns } from './config';
 import './index.scss';
 
+function renderFile(buff: Uint8Array, type: string) {
+  const renderType = {
+    pdf: 'application/pdf',
+    png: 'image/png',
+  }[type];
+  return URL.createObjectURL(new Blob([buff], { type: renderType }));
+}
+
 export default function SyncPrompts() {
   const { rowSelection, selectedRowIDs } = useTable();
-  const [downloadPath, setDownloadPath] = useState('');
-  const [downloadData, setDownloadData] = useState([]);
   const { columns, ...opInfo } = useColumns(syncColumns());
+  const [downloadPath, setDownloadPath] = useState('');
+  const { json } = useJson<any[]>(CHAT_DOWNLOAD_JSON);
+  const [source, setSource] = useState('');
+  const [isVisible, setVisible] = useState(false);
 
   useInit(async () => {
     const file = await path.join(await chatRoot(), 'chat.download.json');
     setDownloadPath(file);
-    const data = await readJSON(file, { isRoot: true, isList: true });
-    setDownloadData(data);
   });
 
+  useEffect(() => {
+    if (!opInfo.opType) return;
+    (async () => {
+      const record = opInfo?.opRecord;
+      const isImg = ['png'].includes(record?.ext);
+      const file = await path.join(await chatRoot(), 'download', isImg ? 'img' : record?.ext, `${record?.id}.${record?.ext}`);
+      if (opInfo.opType === 'view') {
+        const data = await fs.readBinaryFile(file);
+        const sourceData = renderFile(data, record?.ext);
+        setSource(sourceData);
+        setVisible(true);
+      }
+      opInfo.resetRecord();
+    })()
+  }, [opInfo.opType])
+
   return (
     <div>
       <div className="chat-table-tip">
@@ -33,10 +58,18 @@ export default function SyncPrompts() {
         rowKey="name"
         columns={columns}
         scroll={{ x: 'auto' }}
-        dataSource={downloadData}
+        dataSource={json}
         rowSelection={rowSelection}
         pagination={TABLE_PAGINATION}
       />
+      <Modal
+        open={isVisible}
+        onCancel={() => setVisible(false)}
+        footer={false}
+        destroyOnClose
+      >
+        <img style={{ maxWidth: '100%' }} src={source} />
+      </Modal>
     </div>
   )
 }