chore: awesome

src/components/Markdown/Editor.tsx

@@ -8,9 +8,10 @@ import './index.scss';
 interface MarkdownEditorProps {
   value?: string;
   onChange?: (v: string) => void;
+  mode?: string;
 }
 
-const MarkdownEditor: FC<MarkdownEditorProps> = ({ value = '', onChange }) => {
+const MarkdownEditor: FC<MarkdownEditorProps> = ({ value = '', onChange, mode = 'split' }) => {
   const [content, setContent] = useState(value);
 
   useEffect(() => {
@@ -23,20 +24,26 @@ const MarkdownEditor: FC<MarkdownEditorProps> = ({ value = '', onChange }) => {
     onChange && onChange(e);
   }
 
+  const isSplit = mode === 'split';
+
   return (
     <div className="md-main">
       <PanelGroup direction="horizontal">
-        <Panel>
+        {['md', 'split'].includes(mode) && (
-          <Editor
+          <Panel>
-            language="markdown"
+            <Editor
-            value={content}
+              language="markdown"
-            onChange={handleEdit}
+              value={content}
-          />
+              onChange={handleEdit}
-        </Panel>
+            />
-        <PanelResizeHandle className="resize-handle" />
+          </Panel>
-        <Panel collapsible={true}>
+        )}
-          <Markdown className="edit-preview">{content}</Markdown>
+        {isSplit && <PanelResizeHandle className="resize-handle" />}
-        </Panel>
+        {['doc', 'split'].includes(mode) && (
+          <Panel>
+            <Markdown className="edit-preview">{content}</Markdown>
+          </Panel>
+        )}
         </PanelGroup>
     </div>
   )

src/components/Tags/index.tsx

@@ -8,9 +8,11 @@ import { DISABLE_AUTO_COMPLETE } from '@/utils';
 interface TagsProps {
   value?: string[];
   onChange?: (v: string[]) => void;
+  addTxt?: string;
+  max?: number;
 }
 
-const Tags: FC<TagsProps> = ({ value = [], onChange }) => {
+const Tags: FC<TagsProps> = ({ max = 99, value = [], onChange, addTxt = 'New Tag' }) => {
   const [tags, setTags] = useState<string[]>(value);
   const [inputVisible, setInputVisible] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState('');
@@ -86,9 +88,9 @@ const Tags: FC<TagsProps> = ({ value = [], onChange }) => {
           {...DISABLE_AUTO_COMPLETE}
         />
       )}
-      {!inputVisible && (
+      {!inputVisible && tags.length < max && (
         <Tag onClick={showInput} className="chat-tag-new">
-          <PlusOutlined /> New Tag
+          <PlusOutlined /> {addTxt}
         </Tag>
       )}
     </>

src/icons/SplitIcon.tsx

@@ -0,0 +1,17 @@
+import Icon from "@ant-design/icons";
+import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface IconProps {
+  onClick: () => void;
+}
+
+export default function SplitIcon(props: Partial<CustomIconComponentProps & IconProps>) {
+  return <Icon
+    {...props}
+    component={() => (
+      <svg className="chatico" viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
+        <path d="M252.068571 906.496h520.283429c89.581714 0 134.144-44.562286 134.144-132.845714V250.331429c0-88.283429-44.562286-132.845714-134.144-132.845715H252.068571c-89.142857 0-134.582857 44.141714-134.582857 132.845715V773.668571c0 88.704 45.44 132.845714 134.582857 132.845715z m1.28-68.992c-42.843429 0-66.852571-22.710857-66.852571-67.291429V253.805714c0-44.580571 24.009143-67.291429 66.852571-67.291428h222.866286v651.008z m517.723429-651.008c42.422857 0 66.432 22.710857 66.432 67.291429V770.194286c0 44.580571-24.009143 67.291429-66.432 67.291428H548.205714V186.496z" />
+      </svg>
+    )}
+  />
+}

src/layout/index.tsx

@@ -66,7 +66,7 @@ export default function ChatLayout() {
             theme={ appInfo.appTheme === "dark" ? "dark" : "light" }
             inlineIndent={12}
             items={menuItems}
-            defaultOpenKeys={['/model']}
+            // defaultOpenKeys={['/model']}
             onClick={(i) => go(i.key)}
           />
         </Sider>

src/main.scss

@@ -57,6 +57,7 @@ html, body {
   margin-bottom: 5px;
 }
 
+.chat-tags,
 .chat-prompts-tags {
   .ant-tag {
     margin: 2px;
@@ -95,4 +96,8 @@ html, body {
     cursor: pointer;
     text-decoration: underline;
   }
+}
+
+.chatico {
+  cursor: pointer;
 }

src/routes.tsx

@@ -7,10 +7,12 @@ import {
   UserOutlined,
   DownloadOutlined,
   FormOutlined,
+  GlobalOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
 
-import General from '@view/General';
+import General from '@/view/General';
+import Awesome from '@/view/awesome';
 import UserCustom from '@/view/model/UserCustom';
 import SyncPrompts from '@/view/model/SyncPrompts';
 import SyncCustom from '@/view/model/SyncCustom';
@@ -35,10 +37,10 @@ type ChatRouteObject = {
 export const routes: Array<ChatRouteObject> = [
   {
     path: '/',
-    element: <General />,
+    element: <Awesome />,
     meta: {
-      label: 'General',
+      label: 'Awesome',
-      icon: <SettingOutlined />,
+      icon: <GlobalOutlined />,
     },
   },
   {
@@ -101,6 +103,14 @@ export const routes: Array<ChatRouteObject> = [
       icon: <DownloadOutlined />,
     },
   },
+  {
+    path: '/general',
+    element: <General />,
+    meta: {
+      label: 'General',
+      icon: <SettingOutlined />,
+    },
+  },
 ];
 
 type MenuItem = Required<MenuProps>['items'][number];

src/utils.ts

@@ -6,9 +6,11 @@ export const CHAT_CONF_JSON = 'chat.conf.json';
 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_AWESOME_JSON = 'chat.awesome.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 = {
   autoCapitalize: 'off',
   autoComplete: 'off',

src/view/awesome/Form.tsx

@@ -0,0 +1,63 @@
+import { useEffect, ForwardRefRenderFunction, useImperativeHandle, forwardRef } from 'react';
+import { Form, Input, Switch } from 'antd';
+import type { FormProps } from 'antd';
+
+import Tags from '@comps/Tags';
+import { DISABLE_AUTO_COMPLETE } from '@/utils';
+
+interface AwesomeFormProps {
+  record?: Record<string|symbol, any> | null;
+}
+
+const initFormValue = {
+  title: '',
+  url: '',
+  enable: true,
+  tags: [],
+  category: '',
+};
+
+const AwesomeForm: ForwardRefRenderFunction<FormProps, AwesomeFormProps> = ({ record }, ref) => {
+  const [form] = Form.useForm();
+  useImperativeHandle(ref, () => ({ form }));
+
+  useEffect(() => {
+    if (record) {
+      form.setFieldsValue(record);
+    }
+  }, [record]);
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 4 }}
+      initialValues={initFormValue}
+    >
+      <Form.Item
+        label="Title"
+        name="title"
+        rules={[{ required: true, message: 'Please enter a title!' }]}
+      >
+        <Input placeholder="Please enter a title" {...DISABLE_AUTO_COMPLETE} />
+      </Form.Item>
+      <Form.Item
+        label="URL"
+        name="url"
+        rules={[{ required: true, message: 'Please enter the URL' }]}
+      >
+        <Input placeholder="Please enter the URL" {...DISABLE_AUTO_COMPLETE} />
+      </Form.Item>
+      <Form.Item label="Category" name="category">
+        <Input placeholder="Please enter a category" {...DISABLE_AUTO_COMPLETE} />
+      </Form.Item>
+      <Form.Item label="Tags" name="tags">
+        <Tags value={record?.tags} />
+      </Form.Item>
+      <Form.Item label="Enable" name="enable" valuePropName="checked">
+        <Switch />
+      </Form.Item>
+    </Form>
+  )
+}
+
+export default forwardRef(AwesomeForm);

src/view/awesome/config.tsx

@@ -0,0 +1,68 @@
+import { Tag, Space, Popconfirm, Switch } from 'antd';
+
+export const awesomeColumns = () => [
+  {
+    title: 'Title',
+    dataIndex: 'title',
+    fixed: 'left',
+    key: 'title',
+    width: 160,
+  },
+  {
+    title: 'URL',
+    dataIndex: 'url',
+    key: 'url',
+    width: 120,
+  },
+  // {
+  //   title: 'Icon',
+  //   dataIndex: 'icon',
+  //   key: 'icon',
+  //   width: 120,
+  // },
+  {
+    title: 'Enable',
+    dataIndex: 'enable',
+    key: 'enable',
+    width: 80,
+    render: (v: boolean = true, row: Record<string, any>, action: Record<string, any>) => (
+      <Switch checked={v} onChange={(v) => action.setRecord({ ...row, enable: v }, 'enable')} />
+    ),
+  },
+  {
+    title: 'Category',
+    dataIndex: 'category',
+    key: 'category',
+    width: 200,
+    render: (v: string) => <Tag color="geekblue">{v}</Tag>
+  },
+  {
+    title: 'Tags',
+    dataIndex: 'tags',
+    key: 'tags',
+    width: 150,
+    render: (v: string[]) => (
+      <span className="chat-tags">{v?.map(i => <Tag key={i}>{i}</Tag>)}</span>
+    ),
+  },
+  {
+    title: 'Action',
+    fixed: 'right',
+    width: 150,
+    render: (_: any, row: any, actions: any) => {
+      return (
+        <Space>
+          <a onClick={() => actions.setRecord(row, 'edit')}>Edit</a>
+          <Popconfirm
+            title="Are you sure you want to delete this URL?"
+            onConfirm={() => actions.setRecord(row, 'delete')}
+            okText="Yes"
+            cancelText="No"
+          >
+            <a>Delete</a>
+          </Popconfirm>
+        </Space>
+      )
+    }
+  }
+];

src/view/awesome/index.tsx

@@ -0,0 +1,125 @@
+import { useRef, useEffect, useState } from 'react';
+import { Table, Modal, Popconfirm, Button, message } from 'antd';
+
+import useJson from '@/hooks/useJson';
+import useData from '@/hooks/useData';
+import useColumns from '@/hooks/useColumns';
+import FilePath from '@/components/FilePath';
+import { CHAT_AWESOME_JSON } from '@/utils';
+import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
+import { awesomeColumns } from './config';
+import AwesomeForm from './Form';
+
+export default function Awesome() {
+  const formRef = useRef<any>(null);
+  const [isVisible, setVisible] = useState(false);
+  const { opData, opInit, opAdd, opReplace, opReplaceItems, opRemove, opSafeKey } = useData([]);
+  const { columns, ...opInfo } = useColumns(awesomeColumns());
+  const { rowSelection, selectedRowIDs } = useTableRowSelection();
+  const { json, updateJson } = useJson<any[]>(CHAT_AWESOME_JSON);
+  const selectedItems = rowSelection.selectedRowKeys || [];
+
+  useEffect(() => {
+    if (!json || json.length <= 0) return;
+    opInit(json);
+  }, [json?.length]);
+
+  useEffect(() => {
+    if (!opInfo.opType) return;
+    if (['edit', 'new'].includes(opInfo.opType)) {
+      setVisible(true);
+    }
+    if (['delete'].includes(opInfo.opType)) {
+      const data = opRemove(opInfo?.opRecord?.[opSafeKey]);
+      updateJson(data);
+      opInfo.resetRecord();
+    }
+  }, [opInfo.opType, formRef]);
+
+  const hide = () => {
+    setVisible(false);
+    opInfo.resetRecord();
+  };
+
+  useEffect(() => {
+    if (opInfo.opType === 'enable') {
+      const data = opReplace(opInfo?.opRecord?.[opSafeKey], opInfo?.opRecord);
+      updateJson(data);
+    }
+  }, [opInfo.opTime])
+
+  const handleDelete = () => {
+
+  };
+
+  const handleOk = () => {
+    formRef.current?.form?.validateFields()
+      .then(async (vals: Record<string, any>) => {
+        if (opInfo.opType === 'new') {
+          const data = opAdd(vals);
+          await updateJson(data);
+          opInit(data);
+          message.success('Data added successfully');
+        }
+        if (opInfo.opType === 'edit') {
+          const data = opReplace(opInfo?.opRecord?.[opSafeKey], vals);
+          await updateJson(data);
+          message.success('Data updated successfully');
+        }
+        hide();
+      })
+  };
+
+  const handleEnable = (isEnable: boolean) => {
+    const data = opReplaceItems(selectedRowIDs, { enable: isEnable })
+    updateJson(data);
+  };
+
+  const modalTitle = `${({ new: 'Create', edit: 'Edit' })[opInfo.opType]} URL`;
+
+  return (
+    <div>
+      <div className="chat-table-btns">
+        <Button className="chat-add-btn" type="primary" onClick={opInfo.opNew}>Add URL</Button>
+        <div>
+          {selectedItems.length > 0 && (
+            <>
+              <Button type="primary" onClick={() => handleEnable(true)}>Enable</Button>
+              <Button onClick={() => handleEnable(false)}>Disable</Button>
+              <Popconfirm
+                overlayStyle={{ width: 250 }}
+                title="URLs cannot be recovered after deletion, are you sure you want to delete them?"
+                placement="topLeft"
+                onConfirm={handleDelete}
+                okText="Yes"
+                cancelText="No"
+              >
+                <Button>Delete</Button>
+              </Popconfirm>
+              <span className="num">Selected {selectedItems.length} items</span>
+            </>
+          )}
+        </div>
+      </div>
+      <FilePath paths={CHAT_AWESOME_JSON} />
+      <Table
+        rowKey="url"
+        columns={columns}
+        scroll={{ x: 800 }}
+        dataSource={opData}
+        rowSelection={rowSelection}
+        pagination={TABLE_PAGINATION}
+      />
+      <Modal
+        open={isVisible}
+        title={modalTitle}
+        onCancel={hide}
+        onOk={handleOk}
+        destroyOnClose
+        maskClosable={false}
+      >
+        <AwesomeForm ref={formRef} record={opInfo?.opRecord} />
+      </Modal>
+    </div>
+  )
+}

src/view/download/index.tsx

@@ -105,7 +105,7 @@ export default function Download() {
                 okText="Yes"
                 cancelText="No"
               >
-                <Button>Batch delete</Button>
+                <Button>Delete</Button>
               </Popconfirm>
               <span className="num">Selected {selectedItems.length} items</span>
             </>

src/view/markdown/index.scss

@@ -1,6 +1,8 @@
 
 .md-task {
   margin-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
 
   .ant-breadcrumb-link {
     padding: 3px 5px;

src/view/markdown/index.tsx

@@ -6,12 +6,20 @@ import MarkdownEditor from '@/components/Markdown/Editor';
 import { fs, shell } from '@tauri-apps/api';
 
 import useInit from '@/hooks/useInit';
+import SplitIcon from '@/icons/SplitIcon';
 import { getPath } from '@/view/notes/config';
 import './index.scss';
 
+const modeMap: any = {
+  0: 'split',
+  1: 'md',
+  2: 'doc',
+}
+
 export default function Markdown() {
   const [filePath, setFilePath] = useState('');
   const [source, setSource] = useState('');
+  const [previewMode, setPreviewMode] = useState(0);
   const location = useLocation();
   const state = location?.state;
 
@@ -25,6 +33,12 @@ export default function Markdown() {
     await fs.writeTextFile(filePath, v);
   };
 
+  const handlePreview = () => {
+    let mode = previewMode + 1;
+    if (mode > 2) mode = 0;
+    setPreviewMode(mode);
+  };
+
   return (
     <>
       <div className="md-task">
@@ -36,8 +50,11 @@ export default function Markdown() {
             {filePath}
           </Breadcrumb.Item>
         </Breadcrumb>
+        <div>
+          <SplitIcon onClick={handlePreview} style={{ fontSize: 18, color: 'rgba(0,0,0,0.5)' }} />
+        </div>
       </div>
-      <MarkdownEditor value={source} onChange={handleChange} />
+      <MarkdownEditor value={source} onChange={handleChange} mode={modeMap[previewMode]} />
     </>
   );
 }

src/view/model/SyncCustom/Form.tsx

@@ -84,14 +84,14 @@ const SyncForm: ForwardRefRenderFunction<FormProps, SyncFormProps> = ({ record,
         <Form.Item
           label="Name"
           name="name"
-          rules={[{ required: true, message: 'Please input name!' }]}
+          rules={[{ required: true, message: 'Please enter a name!' }]}
         >
-          <Input placeholder="Please input name" {...DISABLE_AUTO_COMPLETE} />
+          <Input placeholder="Please enter a name" {...DISABLE_AUTO_COMPLETE} />
         </Form.Item>
         <Form.Item
           label="PATH"
           name="path"
-          rules={[{ required: true, message: 'Please input path!' }]}
+          rules={[{ required: true, message: 'Please enter the path!' }]}
           >
           <Input
             placeholder="YOUR_PATH"

src/view/model/SyncCustom/index.tsx

@@ -96,13 +96,16 @@ export default function SyncCustom() {
   const handleOk = () => {
     formRef.current?.form?.validateFields()
       .then((vals: Record<string, any>) => {
-        let data = [];
+        if (opInfo.opType === 'new') {
-        switch (opInfo.opType) {
+          const data = opAdd(vals);
-          case 'new': data = opAdd(vals); break;
+          modelSet(data);
-          case 'edit': data = opReplace(opInfo?.opRecord?.[opSafeKey], vals); break;
+          message.success('Data added successfully');
-          default: break;
+        }
+        if (opInfo.opType === 'edit') {
+          const data = opReplace(opInfo?.opRecord?.[opSafeKey], vals);
+          modelSet(data);
+          message.success('Data updated successfully');
         }
-        modelSet(data);
         hide();
       })
   };

src/view/model/UserCustom/Form.tsx

@@ -35,16 +35,16 @@ const UserCustomForm: ForwardRefRenderFunction<FormProps, UserCustomFormProps> =
       <Form.Item
         label="/{cmd}"
         name="cmd"
-        rules={[{ required: true, message: 'Please input {cmd}!' }]}
+        rules={[{ required: true, message: 'Please enter the {cmd}!' }]}
       >
-        <Input placeholder="Please input {cmd}" {...DISABLE_AUTO_COMPLETE} />
+        <Input placeholder="Please enter the {cmd}" {...DISABLE_AUTO_COMPLETE} />
       </Form.Item>
       <Form.Item
         label="Act"
         name="act"
-        rules={[{ required: true, message: 'Please input act!' }]}
+        rules={[{ required: true, message: 'Please enter the Act!' }]}
       >
-        <Input placeholder="Please input act" {...DISABLE_AUTO_COMPLETE} />
+        <Input placeholder="Please enter the Act" {...DISABLE_AUTO_COMPLETE} />
       </Form.Item>
       <Form.Item label="Tags" name="tags">
         <Tags value={record?.tags} />
@@ -55,9 +55,9 @@ const UserCustomForm: ForwardRefRenderFunction<FormProps, UserCustomFormProps> =
       <Form.Item
         label="Prompt"
         name="prompt"
-        rules={[{ required: true, message: 'Please input prompt!' }]}
+        rules={[{ required: true, message: 'Please enter a prompt!' }]}
       >
-        <Input.TextArea rows={4} placeholder="Please input prompt" {...DISABLE_AUTO_COMPLETE} />
+        <Input.TextArea rows={4} placeholder="Please enter a prompt" {...DISABLE_AUTO_COMPLETE} />
       </Form.Item>
     </Form>
   )

src/view/model/UserCustom/index.tsx

@@ -52,14 +52,6 @@ export default function LanguageModel() {
     }
   }, [opInfo.opTime])
 
-
-  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);

src/view/notes/index.tsx

@@ -95,7 +95,7 @@ export default function Notes() {
                 okText="Yes"
                 cancelText="No"
               >
-                <Button>Batch delete</Button>
+                <Button>Delete</Button>
               </Popconfirm>
               <span className="num">Selected {selectedItems.length} items</span>
             </>