chore: sync

src/view/model/UserCustom/index.scss

@@ -1,39 +0,0 @@
-.chat-prompts-val {
-  display: inline-block;
-  width: 100%;
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
-
-.chat-prompts-tags {
-  .ant-tag {
-    margin: 2px;
-  }
-}
-
-.add-btn {
-  margin-bottom: 5px;
-}
-
-.chat-model-path {
-  font-size: 12px;
-  font-weight: bold;
-  color: #888;
-  margin-bottom: 5px;
-
-  span {
-    display: inline-block;
-    // background-color: #d8d8d8;
-    color: #4096ff;
-    padding: 0 8px;
-    height: 20px;
-    line-height: 20px;
-    border-radius: 4px;
-    cursor: pointer;
-    text-decoration: underline;
-  }
-}

src/view/model/UserCustom/index.tsx

@@ -1,29 +1,36 @@
 import { useState, useRef, useEffect } from 'react';
 import { Table, Button, Modal, message } from 'antd';
-import { invoke } from '@tauri-apps/api';
+import { shell, path } from '@tauri-apps/api';
 
 import useInit from '@/hooks/useInit';
 import useData from '@/hooks/useData';
-import useChatModel from '@/hooks/useChatModel';
+import useChatModel, { useCacheModel } from '@/hooks/useChatModel';
 import useColumns from '@/hooks/useColumns';
-import { TABLE_PAGINATION } from '@/hooks/useTable';
-import { chatModelPath } from '@/utils';
+import useTable, { TABLE_PAGINATION } from '@/hooks/useTable';
+import { chatRoot, fmtDate } from '@/utils';
 import { modelColumns } from './config';
 import UserCustomForm from './Form';
-import './index.scss';
 
 export default function LanguageModel() {
+  const { rowSelection, selectedRowIDs } = useTable();
   const [isVisible, setVisible] = useState(false);
-  const [modelPath, setChatModelPath] = useState('');
-  const { modelData, modelSet } = useChatModel('user_custom');
-  const { opData, opInit, opAdd, opRemove, opReplace, opSafeKey } = useData([]);
+  const [jsonPath, setJsonPath] = useState('');
+  const { modelJson, modelSet } = useChatModel('user_custom');
+  const { modelCacheJson, modelCacheSet } = useCacheModel(jsonPath);
+  const { opData, opInit, opReplaceItems, opAdd, opRemove, opReplace, opSafeKey } = useData([]);
   const { columns, ...opInfo } = useColumns(modelColumns());
+  const lastUpdated = modelJson?.user_custom?.last_updated;
+  const selectedItems = rowSelection.selectedRowKeys || [];
   const formRef = useRef<any>(null);
 
+  useInit(async () => {
+    setJsonPath(await path.join(await chatRoot(), 'cache_model', 'user_custom.json'));
+  });
+
   useEffect(() => {
-    if (modelData.length <= 0) return;
-    opInit(modelData);
-  }, [modelData]);
+    if (modelCacheJson.length <= 0) return;
+    opInit(modelCacheJson);
+  }, [modelCacheJson.length]);
 
   useEffect(() => {
     if (!opInfo.opType) return;
@@ -32,7 +39,7 @@ export default function LanguageModel() {
     }
     if (['delete'].includes(opInfo.opType)) {
       const data = opRemove(opInfo?.opRecord?.[opSafeKey]);
-      modelSet(data);
+      modelCacheSet(data);
       opInfo.resetRecord();
     }
   }, [opInfo.opType, formRef]);
@@ -40,14 +47,22 @@ export default function LanguageModel() {
   useEffect(() => {
     if (opInfo.opType === 'enable') {
       const data = opReplace(opInfo?.opRecord?.[opSafeKey], opInfo?.opRecord);
-      modelSet(data);
+      modelCacheSet(data);
     }
   }, [opInfo.opTime])
 
-  useInit(async () => {
-    const path = await chatModelPath();
-    setChatModelPath(path);
-  })
+
+  useEffect(() => {
+    if (opInfo.opType === 'enable') {
+      const data = opReplace(opInfo?.opRecord?.[opSafeKey], opInfo?.opRecord);
+      modelCacheSet(data);
+    }
+  }, [opInfo.opTime]);
+
+  const handleEnable = (isEnable: boolean) => {
+    const data = opReplaceItems(selectedRowIDs, { enable: isEnable })
+    modelCacheSet(data);
+  };
 
   const hide = () => {
     setVisible(false);
@@ -56,8 +71,8 @@ export default function LanguageModel() {
 
   const handleOk = () => {
     formRef.current?.form?.validateFields()
-      .then((vals: Record<string, any>) => {
-        if (modelData.map((i: any) => i.cmd).includes(vals.cmd) && opInfo?.opRecord?.cmd !== vals.cmd) {
+      .then(async (vals: Record<string, any>) => {
+        if (modelCacheJson.map((i: any) => i.cmd).includes(vals.cmd) && opInfo?.opRecord?.cmd !== vals.cmd) {
           message.warning(`"cmd: /${vals.cmd}" already exists, please change the "${vals.cmd}" name and resubmit.`);
           return;
         }
@@ -67,28 +82,46 @@ export default function LanguageModel() {
           case 'edit': data = opReplace(opInfo?.opRecord?.[opSafeKey], vals); break;
           default: break;
         }
-        modelSet(data);
-        opInfo.setExtra(Date.now());
+        await modelCacheSet(data);
+        opInit(data);
+        modelSet({
+          id: 'user_custom',
+          last_updated: Date.now(),
+        });
         hide();
       })
   };
 
-  const handleOpenFile = () => {
-    invoke('open_file', { path: modelPath });
-  };
-
   const modalTitle = `${({ new: 'Create', edit: 'Edit' })[opInfo.opType]} Model`;
 
   return (
     <div>
-      <Button className="add-btn" type="primary" onClick={opInfo.opNew}>Add Model</Button>
-      <div className="chat-model-path">PATH: <span onClick={handleOpenFile}>{modelPath}</span></div>
+      <div className="chat-table-btns">
+        <Button className="chat-add-btn" type="primary" onClick={opInfo.opNew}>Add Model</Button>
+        <div>
+          {selectedItems.length > 0 && (
+            <>
+              <Button type="primary" onClick={() => handleEnable(true)}>Enable</Button>
+              <Button onClick={() => handleEnable(false)}>Disable</Button>
+              <span className="num">Selected {selectedItems.length} items</span>
+            </>
+          )}
+        </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>
+        {lastUpdated && <span style={{ marginLeft: 10, color: '#888', fontSize: 12 }}>Last updated on {fmtDate(lastUpdated)}</span>}
+      </div>
       <Table
-        key={opInfo.opExtra}
+        key={lastUpdated}
         rowKey="cmd"
         columns={columns}
         scroll={{ x: 'auto' }}
         dataSource={opData}
+        rowSelection={rowSelection}
         pagination={TABLE_PAGINATION}
       />
       <Modal