chore: export

src/view/download/config.tsx

@@ -1,37 +1,57 @@
+import { useState } from 'react';
 import { Tag, Space, Popconfirm } from 'antd';
+import { path, shell } from '@tauri-apps/api';
 
-import { fmtDate } from '@/utils';
+import { EditRow } from '@/hooks/useColumns';
+
+import useInit from '@/hooks/useInit';
+import { fmtDate, chatRoot } from '@/utils';
 
 const colorMap: any = {
   pdf: 'blue',
   png: 'orange',
 }
 
-export const syncColumns = () => [
+export const downloadColumns = () => [
   {
     title: 'Name',
     dataIndex: 'name',
     fixed: 'left',
     key: 'name',
+    width: 240,
+    render: (_: string, row: any, actions: any) => (
+      <EditRow rowKey="name" row={row} actions={actions} />
+    ),
   },
   {
     title: 'Extension',
     dataIndex: 'ext',
     key: 'ext',
+    width: 120,
     render: (v: string) => <Tag color={colorMap[v]}>{v}</Tag>,
   },
+  {
+    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: 150,
     render: (_: any, row: any, actions: any) => {
       return (
         <Space>
-          <a onClick={() => actions.setRecord(row, 'view')}>View</a>
+          <a onClick={() => actions.setRecord(row, 'preview')}>Preview</a>
           <Popconfirm
             title="Are you sure to delete this file?"
             onConfirm={() => actions.setRecord(row, 'delete')}
@@ -46,9 +66,15 @@ export const syncColumns = () => [
   }
 ];
 
-// {
-//   id: '',
-//   name: '',
-//   type: '.png',
-//   created: '2022.01.01',
-// }
+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(), 'download', isImg ? 'img' : row.ext, row.id) + `.${row.ext}`;
+}

src/view/download/index.scss

@@ -1,12 +0,0 @@
-.chat-table-tip, .chat-table-btns {
-  display: flex;
-  justify-content: space-between;
-}
-
-.chat-table-btns {
-  margin-bottom: 5px;
-
-  .num {
-    margin-left: 10px;
-  }
-}

src/view/download/index.tsx

@@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react';
-import { Table, Modal } from 'antd';
-import { path, shell, fs } from '@tauri-apps/api';
+import { Table, Modal, Popconfirm, Button, message } from 'antd';
+import { invoke, path, shell, 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 useTable, { TABLE_PAGINATION } from '@/hooks/useTable';
+import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
 import { chatRoot, CHAT_DOWNLOAD_JSON } from '@/utils';
-import { syncColumns } from './config';
-import './index.scss';
+import { downloadColumns } from './config';
 
 function renderFile(buff: Uint8Array, type: string) {
   const renderType = {
@@ -19,52 +19,124 @@ function renderFile(buff: Uint8Array, type: string) {
 }
 
 export default function SyncPrompts() {
-  const { rowSelection, selectedRowIDs } = useTable();
-  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);
+  const { opData, opInit, opReplace, opSafeKey } = useData([]);
+  const { columns, ...opInfo } = useColumns(downloadColumns());
+  const { rowSelection, selectedRows, rowReset } = useTableRowSelection({ rowType: 'row' });
+  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');
+    const file = await path.join(await chatRoot(), CHAT_DOWNLOAD_JSON);
     setDownloadPath(file);
   });
 
+  useEffect(() => {
+    if (!json || json.length <= 0) return;
+    opInit(json);
+  }, [json?.length]);
+
   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') {
+      if (opInfo.opType === 'preview') {
         const data = await fs.readBinaryFile(file);
         const sourceData = renderFile(data, record?.ext);
         setSource(sourceData);
         setVisible(true);
+        return;
+      }
+      if (opInfo.opType === 'file') {
+        await shell.open(file);
+      }
+      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 downloadDir = await path.join(await chatRoot(), 'download');
+      await fs.removeDir(downloadDir, { recursive: true });
+      await handleRefresh();
+      rowReset();
+      message.success('All files have been cleared!');
+      return;
+    }
+
+    const rows = selectedRows.map(async (i) => {
+      const isImg = ['png'].includes(i?.ext);
+      const file = await path.join(await chatRoot(), 'download', isImg ? 'img' : i?.ext, `${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_DOWNLOAD_JSON });
+    refreshJson();
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+    opInfo.resetRecord();
+  };
+
   return (
     <div>
+      <div className="chat-table-btns">
+        <div>
+          {selectedItems.length > 0 && (
+            <>
+              <Popconfirm
+                overlayStyle={{ width: 250 }}
+                title="Sync will overwrite the previous data, confirm to sync?"
+                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(downloadPath)} title={downloadPath}>{downloadPath}</a></div>
         </div>
       </div>
       <Table
-        rowKey="name"
+        rowKey="id"
         columns={columns}
-        scroll={{ x: 'auto' }}
-        dataSource={json}
+        scroll={{ x: 800 }}
+        dataSource={opData}
         rowSelection={rowSelection}
         pagination={TABLE_PAGINATION}
       />
       <Modal
         open={isVisible}
-        onCancel={() => setVisible(false)}
+        title={<div>{opInfo?.opRecord?.name || ''}</div>}
+        onCancel={handleCancel}
         footer={false}
         destroyOnClose
       >

src/view/model/SyncPrompts/config.tsx

@@ -1,4 +1,4 @@
-import { Switch, Tag, Tooltip } from 'antd';
+import { Table, Switch, Tag } from 'antd';
 
 import { genCmd } from '@/utils';
 
@@ -35,13 +35,14 @@ export const syncColumns = () => [
       <Switch checked={v} onChange={(v) => action.setRecord({ ...row, enable: v }, 'enable')} />
     ),
   },
+  Table.EXPAND_COLUMN,
   {
     title: 'Prompt',
     dataIndex: 'prompt',
     key: 'prompt',
     // width: 300,
     render: (v: string) => (
-      <Tooltip overlayInnerStyle={{ width: 350 }} title={v}><span className="chat-prompts-val">{v}</span></Tooltip>
+      <span className="chat-prompts-val">{v}</span>
     ),
   },
 ];

src/view/model/SyncPrompts/index.tsx

@@ -6,7 +6,7 @@ import useInit from '@/hooks/useInit';
 import useData from '@/hooks/useData';
 import useColumns from '@/hooks/useColumns';
 import useChatModel, { useCacheModel } from '@/hooks/useChatModel';
-import useTable, { TABLE_PAGINATION } from '@/hooks/useTable';
+import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
 import { fmtDate, chatRoot } from '@/utils';
 import { syncColumns } from './config';
 import './index.scss';
@@ -14,7 +14,7 @@ import './index.scss';
 const promptsURL = 'https://github.com/f/awesome-chatgpt-prompts/blob/main/prompts.csv';
 
 export default function SyncPrompts() {
-  const { rowSelection, selectedRowIDs } = useTable();
+  const { rowSelection, selectedRowIDs } = useTableRowSelection();
   const [jsonPath, setJsonPath] = useState('');
   const { modelJson, modelSet } = useChatModel('sync_prompts');
   const { modelCacheJson, modelCacheSet } = useCacheModel(jsonPath);
@@ -93,6 +93,7 @@ export default function SyncPrompts() {
         dataSource={opData}
         rowSelection={rowSelection}
         pagination={TABLE_PAGINATION}
+        expandable={{expandedRowRender: (record) => <div style={{ padding: 10 }}>{record.prompt}</div>}}
       />
     </div>
   )

src/view/model/SyncRecord/config.tsx

@@ -1,4 +1,4 @@
-import { Switch, Tag, Tooltip } from 'antd';
+import { Switch, Tag, Table } from 'antd';
 
 import { genCmd } from '@/utils';
 
@@ -37,13 +37,14 @@ export const syncColumns = () => [
       <Switch checked={v} onChange={(v) => action.setRecord({ ...row, enable: v }, 'enable')} />
     ),
   },
+  Table.EXPAND_COLUMN,
   {
     title: 'Prompt',
     dataIndex: 'prompt',
     key: 'prompt',
     // width: 300,
     render: (v: string) => (
-      <Tooltip overlayInnerStyle={{ width: 350 }} title={v}><span className="chat-prompts-val">{v}</span></Tooltip>
+      <span className="chat-prompts-val">{v}</span>
     ),
   },
 ];

src/view/model/SyncRecord/index.tsx

@@ -7,7 +7,7 @@ import { shell, path } from '@tauri-apps/api';
 import useColumns from '@/hooks/useColumns';
 import useData from '@/hooks/useData';
 import { useCacheModel } from '@/hooks/useChatModel';
-import useTable, { TABLE_PAGINATION } from '@/hooks/useTable';
+import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
 import { fmtDate, chatRoot } from '@/utils';
 import { getPath } from '@/view/model/SyncCustom/config';
 import { syncColumns } from './config';
@@ -19,7 +19,7 @@ export default function SyncRecord() {
   const [jsonPath, setJsonPath] = useState('');
   const state = location?.state;
 
-  const { rowSelection, selectedRowIDs } = useTable();
+  const { rowSelection, selectedRowIDs } = useTableRowSelection();
   const { modelCacheJson, modelCacheSet } = useCacheModel(jsonPath);
   const { opData, opInit, opReplace, opReplaceItems, opSafeKey } = useData([]);
   const { columns, ...opInfo } = useColumns(syncColumns());
@@ -79,6 +79,7 @@ export default function SyncRecord() {
         dataSource={opData}
         rowSelection={rowSelection}
         pagination={TABLE_PAGINATION}
+        expandable={{expandedRowRender: (record) => <div style={{ padding: 10 }}>{record.prompt}</div>}}
       />
     </div>
   )

src/view/model/UserCustom/config.tsx

@@ -1,4 +1,4 @@
-import { Tag, Switch, Tooltip, Space, Popconfirm } from 'antd';
+import { Tag, Switch, Space, Popconfirm, Table } from 'antd';
 
 export const modelColumns = () => [
   {
@@ -33,13 +33,14 @@ export const modelColumns = () => [
       <Switch checked={v} onChange={(v) => action.setRecord({ ...row, enable: v }, 'enable')} />
     ),
   },
+  Table.EXPAND_COLUMN,
   {
     title: 'Prompt',
     dataIndex: 'prompt',
     key: 'prompt',
     width: 300,
     render: (v: string) => (
-      <Tooltip overlayInnerStyle={{ width: 350 }} title={v}><span className="chat-prompts-val">{v}</span></Tooltip>
+      <span className="chat-prompts-val">{v}</span>
     ),
   },
   {

src/view/model/UserCustom/index.tsx

@@ -6,13 +6,13 @@ import useInit from '@/hooks/useInit';
 import useData from '@/hooks/useData';
 import useChatModel, { useCacheModel } from '@/hooks/useChatModel';
 import useColumns from '@/hooks/useColumns';
-import useTable, { TABLE_PAGINATION } from '@/hooks/useTable';
+import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
 import { chatRoot, fmtDate } from '@/utils';
 import { modelColumns } from './config';
 import UserCustomForm from './Form';
 
 export default function LanguageModel() {
-  const { rowSelection, selectedRowIDs } = useTable();
+  const { rowSelection, selectedRowIDs } = useTableRowSelection();
   const [isVisible, setVisible] = useState(false);
   const [jsonPath, setJsonPath] = useState('');
   const { modelJson, modelSet } = useChatModel('user_custom');
@@ -123,6 +123,7 @@ export default function LanguageModel() {
         dataSource={opData}
         rowSelection={rowSelection}
         pagination={TABLE_PAGINATION}
+        expandable={{expandedRowRender: (record) => <div style={{ padding: 10 }}>{record.prompt}</div>}}
       />
       <Modal
         open={isVisible}