chore: optim

src-tauri/src/main.rs

@@ -10,19 +10,32 @@ mod utils;
 use app::{cmd, fs_extra, menu, setup};
 use conf::{ChatConfJson, ChatState};
 use tauri::api::path;
-use tauri_plugin_log::{fern::colors::ColoredLevelConfig, LogTarget, LoggerBuilder};
+use tauri_plugin_log::{
+    fern::colors::{Color, ColoredLevelConfig},
+    LogTarget, LoggerBuilder,
+};
 
 fn main() {
     ChatConfJson::init();
     let chat_conf = ChatConfJson::get_chat_conf();
     let context = tauri::generate_context!();
-    let colors = ColoredLevelConfig::default();
+    let colors = ColoredLevelConfig {
+        error: Color::Red,
+        warn: Color::Yellow,
+        debug: Color::Blue,
+        info: Color::BrightGreen,
+        trace: Color::Cyan,
+    };
 
     tauri::Builder::default()
         // https://github.com/tauri-apps/tauri/pull/2736
         .plugin(
             LoggerBuilder::new()
-                // .level(log::LevelFilter::Error)
+                .level(if cfg!(debug_assertions) {
+                    log::LevelFilter::Debug
+                } else {
+                    log::LevelFilter::Trace
+                })
                 .with_colors(colors)
                 .targets([
                     // LogTarget::LogDir,

src/hooks/useData.ts

@@ -7,9 +7,8 @@ export default function useData(oData: any[]) {
   const [opData, setData] = useState<any[]>([]);
 
   useEffect(() => {
-    const nData = oData.map(i => ({ [safeKey]: v4(), ...i }));
-    setData(nData);
-  }, [oData])
+    opInit(oData);
+  }, [])
 
   const opAdd = (val: any) => {
     const v = [val, ...opData];
@@ -17,6 +16,11 @@ export default function useData(oData: any[]) {
     return v;
   };
 
+  const opInit = (val: any[] = []) => {
+    const nData = val.map(i => ({ [safeKey]: v4(), ...i }));
+    setData(nData);
+  };
+
   const opRemove = (id: string) => {
     const nData = opData.filter(i => i[safeKey] !== id);
     setData(nData);
@@ -31,5 +35,5 @@ export default function useData(oData: any[]) {
     return nData;
   };
 
-  return { opSafeKey: safeKey, opReplace, opAdd, opRemove, opData };
+  return { opSafeKey: safeKey, opInit, opReplace, opAdd, opRemove, opData };
 }

src/layout/index.scss

@@ -19,6 +19,8 @@
 }
 
 .ant-menu {
+  user-select: none;
+  -webkit-user-select: none;
   .ant-menu-item {
     background-color: #f8f8f8;
   }

src/layout/index.tsx

@@ -34,7 +34,13 @@ const ChatLayout: FC<ChatLayoutProps> = ({ children }) => {
         }}
       >
         <div className="chat-logo"><img src="/logo.png" /></div>
-        <Menu defaultSelectedKeys={[location.pathname]} mode="vertical" items={menuItems} onClick={(i) => go(i.key)} />
+        <Menu
+          defaultSelectedKeys={[location.pathname]}
+          mode="inline"
+          inlineIndent={12}
+          items={menuItems}
+          onClick={(i) => go(i.key)}
+        />
       </Sider>
       <Layout className="chat-layout" style={{ marginLeft: collapsed ? 80 : 200, transition: 'margin-left 300ms ease-out' }}>
         <Content

src/routes.tsx

@@ -3,20 +3,27 @@ import {
   DesktopOutlined,
   BulbOutlined,
   SyncOutlined,
+  UserOutlined,
 } from '@ant-design/icons';
-import type { RouteObject } from 'react-router-dom';
 import type { MenuProps } from 'antd';
 
 import General from '@view/General';
 import LanguageModel from '@/view/LanguageModel';
 import SyncPrompts from '@/view/SyncPrompts';
 
-export type ChatRouteObject = {
+export type ChatRouteMetaObject = {
   label: string;
   icon?: React.ReactNode,
 };
 
-export const routes: Array<RouteObject & { meta: ChatRouteObject }> = [
+type ChatRouteObject = {
+  path: string;
+  element?: JSX.Element;
+  meta: ChatRouteMetaObject;
+  children?: ChatRouteObject[];
+}
+
+export const routes: Array<ChatRouteObject> = [
   {
     path: '/',
     element: <General />,
@@ -27,19 +34,28 @@ export const routes: Array<RouteObject & { meta: ChatRouteObject }> = [
   },
   {
     path: '/language-model',
-    element: <LanguageModel />,
     meta: {
       label: 'Language Model',
       icon: <BulbOutlined />,
     },
-  },
-  {
-    path: '/sync-prompts',
-    element: <SyncPrompts />,
-    meta: {
-      label: 'Sync Prompts',
-      icon: <SyncOutlined />,
-    },
+    children: [
+      {
+        path: 'user-custom',
+        element: <LanguageModel />,
+        meta: {
+          label: 'User Custom',
+          icon: <UserOutlined />,
+        },
+      },
+      {
+        path: 'sync-prompts',
+        element: <SyncPrompts />,
+        meta: {
+          label: 'Sync Prompts',
+          icon: <SyncOutlined />,
+        },
+      },
+    ]
   },
 ];
 
@@ -47,6 +63,8 @@ type MenuItem = Required<MenuProps>['items'][number];
 export const menuItems: MenuItem[] = routes.map(i => ({
   ...i.meta,
   key: i.path || '',
+  children: i?.children?.map((j) =>
+    ({ ...j.meta, key: `${i.path}/${j.path}` || ''})),
 }));
 
 export default () => {

src/view/LanguageModel/config.tsx

@@ -1,4 +1,4 @@
-import { Tag, Switch, Tooltip, Space } from 'antd';
+import { Tag, Switch, Tooltip, Space, Popconfirm } from 'antd';
 
 export const modelColumns = () => [
   {
@@ -29,7 +29,9 @@ export const modelColumns = () => [
     dataIndex: 'enable',
     key: 'enable',
     width: 80,
-    render: (v: boolean = false) => <Switch checked={v} disabled />,
+    render: (v: boolean = false, row: Record<string, any>, action: Record<string, any>) => (
+      <Switch checked={v} onChange={(v) => action.setRecord({ ...row, enable: v }, 'enable')} />
+    ),
   },
   {
     title: 'Prompt',
@@ -48,7 +50,14 @@ export const modelColumns = () => [
     render: (_: any, row: any, actions: any) => (
       <Space size="middle">
         <a onClick={() => actions.setRecord(row, 'edit')}>Edit</a>
-        <a onClick={() => actions.setRecord(row, 'delete')}>Delete</a>
+        <Popconfirm
+          title="Are you sure to delete this model?"
+          onConfirm={() => actions.setRecord(row, 'delete')}
+          okText="Yes"
+          cancelText="No"
+        >
+          <a>Delete</a>
+        </Popconfirm>
       </Space>
     ),
   }

src/view/LanguageModel/index.tsx

@@ -3,9 +3,9 @@ import { Table, Button, Modal, message } from 'antd';
 import { invoke } from '@tauri-apps/api';
 
 import useInit from '@/hooks/useInit';
+import useData from '@/hooks/useData';
 import useChatModel from '@/hooks/useChatModel';
 import useColumns from '@/hooks/useColumns';
-import useData from '@/hooks/useData';
 import { chatModelPath } from '@/utils';
 import { modelColumns } from './config';
 import LanguageModelForm from './Form';
@@ -15,10 +15,15 @@ export default function LanguageModel() {
   const [isVisible, setVisible] = useState(false);
   const [modelPath, setChatModelPath] = useState('');
   const { modelData, modelSet } = useChatModel('user_custom');
-  const { opData, opAdd, opRemove, opReplace, opSafeKey } = useData(modelData);
+  const { opData, opInit, opAdd, opRemove, opReplace, opSafeKey } = useData([]);
   const { columns, ...opInfo } = useColumns(modelColumns());
   const formRef = useRef<any>(null);
 
+  useEffect(() => {
+    if (modelData.length <= 0) return;
+    opInit(modelData);
+  }, [modelData])
+
   useEffect(() => {
     if (!opInfo.opType) return;
     if (['edit', 'new'].includes(opInfo.opType)) {
@@ -31,6 +36,13 @@ export default function LanguageModel() {
     }
   }, [opInfo.opType, formRef]);
 
+  useEffect(() => {
+    if (opInfo.opType === 'enable') {
+      const data = opReplace(opInfo?.opRecord?.[opSafeKey], opInfo?.opRecord);
+      modelSet(data);
+    }
+  }, [opInfo.opTime])
+
   useInit(async () => {
     const path = await chatModelPath();
     setChatModelPath(path);

src/view/SyncPrompts/config.tsx

@@ -1,4 +1,4 @@
-import { Tag } from 'antd';
+import { Switch, Tag, Tooltip } from 'antd';
 
 export const genCmd = (act: string) => act.replace(/\s+|\/+/g, '_').replace(/[^\d\w]/g, '').toLocaleLowerCase();
 
@@ -26,20 +26,22 @@ export const modelColumns = () => [
     // width: 150,
     render: () => <Tag>chatgpt-prompts</Tag>,
   },
-  // {
-  //   title: 'Enable',
-  //   dataIndex: 'enable',
-  //   key: 'enable',
-  //   width: 80,
-  //   render: (v: boolean = false) => <Switch checked={v} disabled />,
-  // },
+  {
+    title: 'Enable',
+    dataIndex: 'enable',
+    key: 'enable',
+    // width: 80,
+    render: (v: boolean = false, row: Record<string, any>, action: Record<string, any>) => (
+      <Switch checked={v} onChange={(v) => action.setRecord({ ...row, enable: v }, 'enable')} />
+    ),
+  },
   {
     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>
-    // ),
+    render: (v: string) => (
+      <Tooltip overlayInnerStyle={{ width: 350 }} title={v}><span className="chat-prompts-val">{v}</span></Tooltip>
+    ),
   },
 ];

src/view/SyncPrompts/index.tsx

@@ -1,33 +1,42 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Table, Button, message } from 'antd';
 import { invoke } from '@tauri-apps/api';
 import { fetch, ResponseType } from '@tauri-apps/api/http';
 import { writeTextFile, readTextFile } from '@tauri-apps/api/fs';
 
+import useInit from '@/hooks/useInit';
 import useColumns from '@/hooks/useColumns';
+import useData from '@/hooks/useData';
 import useChatModel from '@/hooks/useChatModel';
 import { fmtDate, chatPromptsPath, GITHUB_PROMPTS_CSV_URL } from '@/utils';
 import { modelColumns, genCmd } from './config';
 import './index.scss';
-import useInit from '@/hooks/useInit';
 
 const promptsURL = 'https://github.com/f/awesome-chatgpt-prompts/blob/main/prompts.csv';
 
 export default function LanguageModel() {
   const [loading, setLoading] = useState(false);
   const [lastUpdated, setLastUpdated] = useState();
-  const { modelSet } = useChatModel('sys_sync_prompts');
-  const [tableData, setTableData] = useState<Record<string, string>[]>([]);
+  const { modelJson, modelSet } = useChatModel('sys_sync_prompts');
+  const { opData, opInit, opReplace, opSafeKey } = useData([]);
   const { columns, ...opInfo } = useColumns(modelColumns());
 
-  useInit(async () => {
-    const filename = await chatPromptsPath();
-    const data = await readTextFile(filename);
-    const list: Record<string, string>[] = await invoke('parse_prompt', { data });
-    const fileData: Record<string, any> = await invoke('metadata', { path: filename });
-    setLastUpdated(fileData.accessedAtMs);
-    setTableData(list);
-  })
+  // useInit(async () => {
+  //   // const filename = await chatPromptsPath();
+  //   // const data = await readTextFile(filename);
+  //   // const list: Record<string, string>[] = await invoke('parse_prompt', { data });
+  //   // const fileData: Record<string, any> = await invoke('metadata', { path: filename });
+  //   // setLastUpdated(fileData.accessedAtMs);
+  //   // opInit(list);
+  //   console.log('«31» /view/SyncPrompts/index.tsx ~> ', modelJson);
+
+  //   opInit([]);
+  // })
+
+  useEffect(() => {
+    if (!modelJson?.sys_sync_prompts) return;
+    opInit(modelJson?.sys_sync_prompts)
+  }, [modelJson?.sys_sync_prompts])
 
   const handleSync = async () => {
     setLoading(true);
@@ -36,16 +45,27 @@ export default function LanguageModel() {
       responseType: ResponseType.Text,
     });
     const data = (res.data || '') as string;
-    // const content = data.replace(/"(\s+)?,(\s+)?"/g, '","');
-    await writeTextFile(await chatPromptsPath(), data);
-    const list: Record<string, string>[] = await invoke('parse_prompt', { data });
-    setTableData(list);
-    modelSet(list.map(i => ({ cmd: genCmd(i.act), enable: true, tags: ['chatgpt-prompts'], ...i })));
+    if (res.ok) {
+      // const content = data.replace(/"(\s+)?,(\s+)?"/g, '","');
+      await writeTextFile(await chatPromptsPath(), data);
+      const list: Record<string, string>[] = await invoke('parse_prompt', { data });
+      opInit(list);
+      modelSet(list.map(i => ({ cmd: genCmd(i.act), enable: true, tags: ['chatgpt-prompts'], ...i })));
+      setLastUpdated(fmtDate(Date.now()) as any);
+      message.success('ChatGPT Prompts data has been synchronized!');
+    } else {
+      message.error('ChatGPT Prompts data sync failed, please try again!');
+    }
     setLoading(false);
-    setLastUpdated(fmtDate(Date.now()) as any);
-    message.success('ChatGPT Prompts data synchronization completed!');
   };
 
+  useEffect(() => {
+    if (opInfo.opType === 'enable') {
+      const data = opReplace(opInfo?.opRecord?.[opSafeKey], opInfo?.opRecord);
+      modelSet(data);
+    }
+  }, [opInfo.opTime]);
+
   return (
     <div>
       <Button type="primary" loading={loading} onClick={handleSync}>Sync</Button>
@@ -56,7 +76,7 @@ export default function LanguageModel() {
         rowKey="act"
         columns={columns}
         scroll={{ x: 'auto' }}
-        dataSource={tableData}
+        dataSource={opData}
         pagination={{
           hideOnSinglePage: true,
           showSizeChanger: true,