chore: sync

src/view/model/SyncMore/config.tsx

@@ -0,0 +1,15 @@
+export const recordColumns = () => [
+  {
+    title: 'URL',
+    dataIndex: 'url',
+    key: 'url',
+  },
+  {
+    title: 'File Type',
+    dataIndex: 'file_type',
+    key: 'file_type',
+  },
+  {
+    title: 'Action',
+  }
+];

src/view/model/SyncMore/index.scss

@@ -0,0 +1,28 @@
+.chat-prompts-tags {
+  .ant-tag {
+    margin: 2px;
+  }
+}
+
+.add-btn {
+  margin-bottom: 10px;
+}
+
+.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/SyncMore/index.tsx

@@ -0,0 +1,20 @@
+import { Table, Button } from 'antd';
+
+import { TABLE_PAGINATION } from '@/hooks/useTable';
+import './index.scss';
+
+export default function SyncMore() {
+  return (
+    <div>
+      <Button className="add-btn" type="primary">Add URL</Button>
+      <Table
+        key="id"
+        rowKey="url"
+        columns={[]}
+        scroll={{ x: 'auto' }}
+        dataSource={[]}
+        pagination={TABLE_PAGINATION}
+      />
+    </div>
+  )
+}

src/view/model/SyncPrompts/config.tsx

@@ -0,0 +1,47 @@
+import { Switch, Tag, Tooltip } from 'antd';
+
+import { genCmd } from '@/utils';
+
+export const modelColumns = () => [
+  {
+    title: '/{cmd}',
+    dataIndex: 'cmd',
+    fixed: 'left',
+    // width: 120,
+    key: 'cmd',
+    render: (_: string, row: Record<string, string>) => (
+      <Tag color="#2a2a2a">/{genCmd(row.act)}</Tag>
+    ),
+  },
+  {
+    title: 'Act',
+    dataIndex: 'act',
+    key: 'act',
+    // width: 200,
+  },
+  {
+    title: 'Tags',
+    dataIndex: 'tags',
+    key: 'tags',
+    // width: 150,
+    render: () => <Tag>chatgpt-prompts</Tag>,
+  },
+  {
+    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>
+    ),
+  },
+];

src/view/model/SyncPrompts/index.scss

@@ -0,0 +1,41 @@
+.chat-prompts-tags {
+  .ant-tag {
+    margin: 2px;
+  }
+}
+
+.add-btn {
+  margin-bottom: 5px;
+}
+
+.chat-table-tip, .chat-table-btns {
+  display: flex;
+  justify-content: space-between;
+}
+
+.chat-table-btns {
+  margin-bottom: 5px;
+
+  .num {
+    margin-left: 10px;
+  }
+}
+
+.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/SyncPrompts/index.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react';
+import { Table, Button, message, Popconfirm } from 'antd';
+import { invoke } from '@tauri-apps/api';
+import { fetch, ResponseType } from '@tauri-apps/api/http';
+import { writeTextFile } from '@tauri-apps/api/fs';
+
+import useColumns from '@/hooks/useColumns';
+import useData from '@/hooks/useData';
+import useChatModel from '@/hooks/useChatModel';
+import useTable, { TABLE_PAGINATION } from '@/hooks/useTable';
+import { fmtDate, chatPromptsPath, GITHUB_PROMPTS_CSV_URL, genCmd } from '@/utils';
+import { modelColumns } from './config';
+import './index.scss';
+
+const promptsURL = 'https://github.com/f/awesome-chatgpt-prompts/blob/main/prompts.csv';
+
+export default function LanguageModel() {
+  const { rowSelection, selectedRowIDs } = useTable();
+  const [lastUpdated, setLastUpdated] = useState();
+  const { modelJson, modelSet } = useChatModel('sys_sync_prompts');
+  const { opData, opInit, opReplace, opReplaceItems, opSafeKey } = useData([]);
+  const { columns, ...opInfo } = useColumns(modelColumns());
+
+  const selectedItems = rowSelection.selectedRowKeys || [];
+
+  useEffect(() => {
+    if (!modelJson?.sys_sync_prompts) return;
+    opInit(modelJson?.sys_sync_prompts);
+    if (lastUpdated) return;
+    (async () => {
+      const fileData: Record<string, any> = await invoke('metadata', { path: await chatPromptsPath() });
+      setLastUpdated(fileData.accessedAtMs);
+    })();
+  }, [modelJson?.sys_sync_prompts])
+
+  const handleSync = async () => {
+    const res = await fetch(GITHUB_PROMPTS_CSV_URL, {
+      method: 'GET',
+      responseType: ResponseType.Text,
+    });
+    const data = (res.data || '') as string;
+    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!');
+    }
+  };
+
+  useEffect(() => {
+    if (opInfo.opType === 'enable') {
+      const data = opReplace(opInfo?.opRecord?.[opSafeKey], opInfo?.opRecord);
+      modelSet(data);
+    }
+  }, [opInfo.opTime]);
+
+  const handleEnable = (isEnable: boolean) => {
+    const data = opReplaceItems(selectedRowIDs, { enable: isEnable })
+    modelSet(data);
+  };
+
+  return (
+    <div>
+      <div className="chat-table-btns">
+        <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>
+        <Popconfirm
+          title={<span>Data sync will enable all prompts,<br/>are you sure you want to sync?</span>}
+          placement="topLeft"
+          onConfirm={handleSync}
+          okText="Yes"
+          cancelText="No"
+        >
+          <Button type="primary">Sync</Button>
+        </Popconfirm>
+      </div>
+      <div className="chat-table-tip">
+        <span className="chat-model-path">URL: <a href={promptsURL} target="_blank" title={promptsURL}>f/awesome-chatgpt-prompts/prompts.csv</a></span>
+        {lastUpdated && <span style={{ marginLeft: 10, color: '#999' }}>Last updated on {fmtDate(lastUpdated)}</span>}
+      </div>
+      <Table
+        key={lastUpdated}
+        rowKey="act"
+        columns={columns}
+        scroll={{ x: 'auto' }}
+        dataSource={opData}
+        rowSelection={rowSelection}
+        pagination={TABLE_PAGINATION}
+      />
+    </div>
+  )
+}

src/view/model/UserCustom/Form.tsx

@@ -0,0 +1,66 @@
+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 LanguageModelProps {
+  record?: Record<string|symbol, any> | null;
+}
+
+const initFormValue = {
+  act: '',
+  enable: true,
+  tags: [],
+  prompt: '',
+};
+
+const LanguageModel: ForwardRefRenderFunction<FormProps, LanguageModelProps> = ({ 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="/{cmd}"
+        name="cmd"
+        rules={[{ required: true, message: 'Please input {cmd}!' }]}
+      >
+        <Input placeholder="Please input {cmd}" {...DISABLE_AUTO_COMPLETE} />
+      </Form.Item>
+      <Form.Item
+        label="Act"
+        name="act"
+        rules={[{ required: true, message: 'Please input act!' }]}
+      >
+        <Input placeholder="Please input act" {...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.Item
+        label="Prompt"
+        name="prompt"
+        rules={[{ required: true, message: 'Please input prompt!' }]}
+      >
+        <Input.TextArea rows={4} placeholder="Please input prompt" {...DISABLE_AUTO_COMPLETE} />
+      </Form.Item>
+    </Form>
+  )
+}
+
+export default forwardRef(LanguageModel);

src/view/model/UserCustom/config.tsx

@@ -0,0 +1,64 @@
+import { Tag, Switch, Tooltip, Space, Popconfirm } from 'antd';
+
+export const modelColumns = () => [
+  {
+    title: '/{cmd}',
+    dataIndex: 'cmd',
+    fixed: 'left',
+    width: 120,
+    key: 'cmd',
+    render: (v: string) => <Tag color="#2a2a2a">/{v}</Tag>
+  },
+  {
+    title: 'Act',
+    dataIndex: 'act',
+    key: 'act',
+    width: 200,
+  },
+  {
+    title: 'Tags',
+    dataIndex: 'tags',
+    key: 'tags',
+    width: 150,
+    render: (v: string[]) => (
+      <span className="chat-prompts-tags">{v?.map(i => <Tag key={i}>{i}</Tag>)}</span>
+    ),
+  },
+  {
+    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>
+    ),
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    fixed: 'right',
+    width: 120,
+    render: (_: any, row: any, actions: any) => (
+      <Space size="middle">
+        <a onClick={() => actions.setRecord(row, 'edit')}>Edit</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/model/UserCustom/index.scss

@@ -0,0 +1,39 @@
+.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

@@ -0,0 +1,105 @@
+import { useState, useRef, useEffect } from 'react';
+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 { TABLE_PAGINATION } from '@/hooks/useTable';
+import { chatModelPath, genCmd } from '@/utils';
+import { modelColumns } from './config';
+import LanguageModelForm from './Form';
+import './index.scss';
+
+export default function LanguageModel() {
+  const [isVisible, setVisible] = useState(false);
+  const [modelPath, setChatModelPath] = useState('');
+  const { modelData, modelSet } = useChatModel('user_custom');
+  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)) {
+      setVisible(true);
+    }
+    if (['delete'].includes(opInfo.opType)) {
+      const data = opRemove(opInfo?.opRecord?.[opSafeKey]);
+      modelSet(data);
+      opInfo.resetRecord();
+    }
+  }, [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);
+  })
+
+  const hide = () => {
+    setVisible(false);
+    opInfo.resetRecord();
+  };
+
+  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) {
+          message.warning(`"cmd: /${vals.cmd}" already exists, please change the "${vals.cmd}" name and resubmit.`);
+          return;
+        }
+        let data = [];
+        switch (opInfo.opType) {
+          case 'new': data = opAdd(vals); break;
+          case 'edit': data = opReplace(opInfo?.opRecord?.[opSafeKey], vals); break;
+          default: break;
+        }
+        modelSet(data)
+        hide();
+      })
+  };
+
+  const handleOpenFile = () => {
+    invoke('open_file', { path: modelPath });
+  };
+
+  const modalTitle = `${({ new: 'Create', edit: 'Edit' })[opInfo.opType]} Language 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>
+      <Table
+        key={opInfo.opTime}
+        rowKey="cmd"
+        columns={columns}
+        scroll={{ x: 'auto' }}
+        dataSource={opData}
+        pagination={TABLE_PAGINATION}
+      />
+      <Modal
+        open={isVisible}
+        onCancel={hide}
+        title={modalTitle}
+        onOk={handleOk}
+        destroyOnClose
+        maskClosable={false}
+      >
+        <LanguageModelForm record={opInfo?.opRecord} ref={formRef} />
+      </Modal>
+    </div>
+  )
+}