feat: chatgpt prompts

src/view/LanguageModel/Form.tsx

@@ -0,0 +1,59 @@
+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="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 />
+      </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/LanguageModel/config.tsx

@@ -0,0 +1,39 @@
+import { Tag, Switch, Tooltip, Space } from 'antd';
+
+export const modelColumns = () => [
+  {
+    title: 'Act',
+    dataIndex: 'act',
+    key: 'act',
+  },
+  {
+    title: 'Tags',
+    dataIndex: 'tags',
+    key: 'tags',
+    render: (v: string[]) => v?.map(i => <Tag key={i}>{i}</Tag>),
+  },
+  {
+    title: 'Enable',
+    dataIndex: 'enable',
+    key: 'enable',
+    render: (v: boolean = false) => <Switch checked={v} disabled />,
+  },
+  {
+    title: 'Prompt',
+    dataIndex: 'prompt',
+    key: 'prompt',
+    render: (v: string) => (
+      <Tooltip overlayInnerStyle={{ width: 350 }} title={v}><span className="chat-prompts-val">{v}</span></Tooltip>
+    ),
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    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>
+      </Space>
+    ),
+  }
+];

src/view/LanguageModel/index.scss

@@ -0,0 +1,12 @@
+.chat-prompts-val {
+  display: inline-block;
+  width: 100%;
+  max-width: 300px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.add-btn {
+  margin-bottom: 20px;
+}

src/view/LanguageModel/index.tsx

@@ -0,0 +1,79 @@
+import { useState, useRef, useEffect } from 'react';
+import { Table, Button, Modal } from 'antd';
+
+import useChatModel from '@/hooks/useChatModel';
+import useColumns from '@/hooks/useColumns';
+import useData from '@/hooks/useData';
+import { modelColumns } from './config';
+import LanguageModelForm from './Form';
+import './index.scss';
+
+export default function LanguageModel() {
+  const [isVisible, setVisible] = useState(false);
+  const { modelData, modelSet } = useChatModel();
+  const { opData, opAdd, opRemove, opReplace, opSafeKey } = useData(modelData);
+  const { columns, ...opInfo } = useColumns(modelColumns());
+  const formRef = useRef<any>(null);
+
+  const hide = () => {
+    setVisible(false);
+    opInfo.resetRecord();
+  };
+
+  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;
+        }
+        modelSet(data)
+        hide();
+      })
+  };
+
+  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]);
+
+  const modalTitle = `${({ new: 'Create', edit: 'Edit' })[opInfo.opType]} Language Model`;
+
+  return (
+    <div>
+      <Button className="add-btn" type="primary" onClick={opInfo.opNew}>Add Model</Button>
+      <Table
+        rowKey="act"
+        columns={columns}
+        dataSource={opData}
+        pagination={{
+          hideOnSinglePage: true,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          defaultPageSize: 5,
+          pageSizeOptions: [5, 10, 15, 20],
+          showTotal: (total) => <span>Total {total} items</span>,
+        }}
+      />
+      <Modal
+        open={isVisible}
+        onCancel={hide}
+        title={modalTitle}
+        onOk={handleOk}
+        destroyOnClose
+        maskClosable={false}
+      >
+        <LanguageModelForm record={opInfo?.opRecord} ref={formRef} />
+      </Modal>
+    </div>
+  )
+}