artin/ChatGPT
1
0
Fork 0
mirror of https://github.com/lencx/ChatGPT.git synced 2026-02-06 11:26:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: awesome

Browse Source
This commit is contained in:
lencx 2023-01-20 21:28:57 +08:00
parent 1af173cb24
commit 5f1c33d750
18 changed files with 359 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Markdown/Editor.tsx vendored
View File

@ -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>
<Editor
language="markdown"
value={content}
onChange={handleEdit}
/>
</Panel>
<PanelResizeHandle className="resize-handle" />
<Panel collapsible={true}>
<Markdown className="edit-preview">{content}</Markdown>
</Panel>
{['md', 'split'].includes(mode) && (
<Panel>
<Editor
language="markdown"
value={content}
onChange={handleEdit}
/>
</Panel>
)}
{isSplit && <PanelResizeHandle className="resize-handle" />}
{['doc', 'split'].includes(mode) && (
<Panel>
<Markdown className="edit-preview">{content}</Markdown>
</Panel>
)}
</PanelGroup>
</div>
)

8
src/components/Tags/index.tsx vendored
View File

@ -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>
)}
</>

17
src/icons/SplitIcon.tsx vendored Normal file
View File

@ -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>
)}
/>
}

2
src/layout/index.tsx vendored
View File

@ -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>

5
src/main.scss vendored
View File

@ -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;
}

18
src/routes.tsx vendored
View File

@ -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',
icon: <SettingOutlined />,
label: 'Awesome',
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];

2
src/utils.ts vendored
View File

@ -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',

63
src/view/awesome/Form.tsx vendored Normal file
View File

@ -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);

68
src/view/awesome/config.tsx vendored Normal file
View File

@ -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>
)
}
}
];

125
src/view/awesome/index.tsx vendored Normal file
View File

@ -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>
)
}

2
src/view/download/index.tsx vendored
View File

@ -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>
</>

2
src/view/markdown/index.scss vendored
View File

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

19
src/view/markdown/index.tsx vendored
View File

@ -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]} />
</>
);
}

6
src/view/model/SyncCustom/Form.tsx vendored
View File

@ -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"

15
src/view/model/SyncCustom/index.tsx vendored
View File

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

12
src/view/model/UserCustom/Form.tsx vendored
View File

@ -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>
)

8
src/view/model/UserCustom/index.tsx vendored
View File

@ -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);

2
src/view/notes/index.tsx vendored
View File

@ -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>
</>