Skip to content

Commit 6f17323

Browse files
committed
✨ feat: openai
1 parent 4636d5e commit 6f17323

17 files changed

Lines changed: 177 additions & 127 deletions

File tree

README.md

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,42 @@
11
## 关于
22

3-
低代码工具
3+
低代码工具,支持 ChatGPT
44

55
[详细文档](https://lowcoding.gitee.io/)
66

7-
## 常用功能
7+
> 文档不经常更新,新功能使用方法可查看 [releases](https://github.com/lowcoding/lowcode-vscode/releases)
8+
9+
## 支持 ChatGPT
10+
11+
![gpt1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c30eede4784e4f81a61102c3e85ed06c~tplv-k3u1fbpfcp-zoom-1.image?)
12+
13+
![gpt2.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e27171a5e6f4d128f6193628a48adb5~tplv-k3u1fbpfcp-zoom-1.image?)
14+
15+
### 配置 ChatGPT
16+
17+
![gpt.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/647980a8dddd403bab7fd15194ee16f2~tplv-k3u1fbpfcp-zoom-1.image?)
18+
19+
### 预置 Prompt 模板
20+
21+
使用 lowcode 原有代码片段功能,可以随意预置 Prompt,支持 EJS 模板语法,可快速创建分析代码、重构代码、代码添加注释等 Prompt。
22+
23+
![gpt1.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c121c1cf260e4f96b2b68bbcdc3cd5d4~tplv-k3u1fbpfcp-zoom-1.image?)
24+
25+
拉到最底部,配置 chatGPT 字段:
26+
27+
![gpt2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9366c6928c445eb984e9eb036c3d55d~tplv-k3u1fbpfcp-zoom-1.image?)
28+
29+
commandPrompt 既右键菜单选择模板后发送的内容,支持 EJS 模板语法。
30+
31+
viewPrompt 为 代码片段或者区块物料可视化详情页点 Ask ChatGPT 按钮后发送的内容。
32+
33+
### lowcode 代码生成功能结合 ChatGPT
34+
35+
很好的解决了代码变量的命名难题。
36+
37+
![gpt.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e74e5ce7c3c4462e8ad7ff099b3dca80~tplv-k3u1fbpfcp-zoom-1.image?)
38+
39+
## 不用 ChatGPT ,也可以使用一些常用功能
840

941
### 快速创建组件
1042

@@ -351,5 +383,3 @@ https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b24b7d804ac4db1a3673fd2aa4aa4
351383
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ff82a358f9c4934859330099386d21d~tplv-k3u1fbpfcp-zoom-1.image)
352384

353385
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c7954e3951049a69eb29d938d9823ca~tplv-k3u1fbpfcp-zoom-1.image)
354-
355-
[xrender 文档](https://xrender.fun/form-render)

package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "lowcode",
33
"displayName": "lowcode",
4-
"description": "lowcode tool",
4+
"description": "lowcode tool,support ChatGPT",
55
"author": "wjkang <ruoxieme@gmail.com>",
66
"version": "1.4.3",
77
"icon": "asset/icon.png",
@@ -27,6 +27,9 @@
2727
"Other"
2828
],
2929
"keywords": [
30+
"ChatGPT",
31+
"openai",
32+
"GPT",
3033
"yapi",
3134
"yapi to ts",
3235
"typescript to json",
@@ -282,7 +285,6 @@
282285
"globby": "^11.0.1",
283286
"is-url": "^1.2.4",
284287
"json-schema-to-typescript": "^9.1.1",
285-
"openai": "^3.2.1",
286288
"strip-comments": "^2.0.1",
287289
"strip-json-comments": "^3.1.1",
288290
"tar": "^6.0.5",

src/commands/addSnippet.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,11 @@ export const createOrShowWebview = (context: vscode.ExtensionContext) => {
1111
task: { task: 'addSnippets', data: { content } },
1212
});
1313
}),
14+
vscode.commands.registerCommand('lowcode.addPromptTemplate', () => {
15+
showWebView({
16+
key: 'main',
17+
task: { task: 'addSnippets' },
18+
});
19+
}),
1420
);
1521
};

src/commands/chatGPT.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,12 @@ export const registerChatGPTCommand = (context: vscode.ExtensionContext) => {
3434
(s) => s.preview.chatGPT && s.preview.chatGPT.commandPrompt,
3535
);
3636
if (templateList.length === 0) {
37-
vscode.window.showErrorMessage('请配置模板');
37+
vscode.window.showErrorMessage('请配置 Prompt 模板');
3838
return;
3939
}
4040
const templateResult = await vscode.window.showQuickPick(
4141
templateList.map((s) => s.name),
42-
{ placeHolder: '请选择模板' },
42+
{ placeHolder: '请选择 Prompt 模板' },
4343
);
4444
if (!templateResult) {
4545
return;

webview-react/src/components/HeaderControl/index.tsx

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
import React from 'react';
22
import { history, useModel } from 'umi';
3-
import { Radio, Menu, Dropdown, message, Modal, Form, Input, Select } from 'antd';
3+
import {
4+
Radio,
5+
Menu,
6+
Dropdown,
7+
message,
8+
Modal,
9+
Form,
10+
Input,
11+
Select,
12+
Button,
13+
} from 'antd';
414
import { executeVscodeCommand, refreshIntelliSense } from '@/webview/service';
515
import { usePresenter } from './presenter';
16+
import { getSchemaWebUrl } from '@/utils/schema';
617

718
export default () => {
819
const { tab, setTab } = useModel('tab');
@@ -106,19 +117,27 @@ export default () => {
106117
/>
107118
</Form.Item>
108119
<Form.Item label="schema 类型">
109-
<Select
110-
value={model.blockModal.schemaType}
111-
options={[
112-
{ label: 'form-render', value: 'form-render' },
113-
{ label: 'amis', value: 'amis' },
114-
{ label: 'formily', value: 'formily' },
115-
]}
116-
onChange={(value) => {
117-
model.setBlockModal((s) => {
118-
s.schemaType = value;
119-
});
120-
}}
121-
/>
120+
<div style={{ display: 'flex' }}>
121+
<Select
122+
value={model.blockModal.schemaType}
123+
options={[
124+
{ label: 'form-render', value: 'form-render' },
125+
{ label: 'amis', value: 'amis' },
126+
{ label: 'formily', value: 'formily' },
127+
]}
128+
onChange={(value) => {
129+
model.setBlockModal((s) => {
130+
s.schemaType = value;
131+
});
132+
}}
133+
/>
134+
<Button
135+
href={getSchemaWebUrl(model.blockModal.schemaType)}
136+
type="link"
137+
>
138+
可视化配置
139+
</Button>
140+
</div>
122141
</Form.Item>
123142
</Form>
124143
</Modal>

webview-react/src/components/HeaderControl/presenter.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export const usePresenter = () => {
141141
schema: model.blockModal.schemaType,
142142
chatGPT: {
143143
commandPrompt:
144-
'<%- rawSelectedText||rawClipboardText %> 解释这段代码的意思',
144+
'<%- rawSelectedText || rawClipboardText %> 解释这段代码的意思',
145145
viewPrompt:
146146
'<%- model %> \r\n将这段 json 中,中文 key 翻译为英文,使用驼峰语法,返回翻译后的markdown语法的代码块',
147147
},

webview-react/src/pages/chatGPT/components/ChatList/index.less

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
.drawer {
22
:global {
3+
.ant-drawer-content {
4+
padding: 0px;
5+
background-color: #343541;
6+
}
37
.ant-drawer-close {
48
color: #ffffff;
59
opacity: 0.8;
@@ -33,3 +37,10 @@
3337
}
3438
}
3539
}
40+
.drawerShow {
41+
:global {
42+
.ant-drawer-content {
43+
padding: 20px 0px;
44+
}
45+
}
46+
}

webview-react/src/pages/chatGPT/components/ChatList/index.tsx

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Drawer, List, message } from 'antd';
1+
import { Button, Drawer, List, Space, message } from 'antd';
22
import React from 'react';
33
import dayjs from 'dayjs';
44
import styles from './index.less';
@@ -33,17 +33,18 @@ const ChatList: React.FC<IProps> = (props) => {
3333

3434
return (
3535
<Drawer
36-
className={styles.drawer}
36+
className={`${styles.drawer} ${props.visible ? styles.drawerShow : ''}`}
3737
visible={props.visible}
3838
onClose={props.onClose}
39-
placement="left"
39+
placement="top"
4040
width="100vw"
41+
mask={false}
4142
bodyStyle={{ backgroundColor: '#343541', color: '#ffffff' }}
4243
>
4344
<List
44-
style={{ marginTop: '20px' }}
4545
itemLayout="horizontal"
4646
dataSource={chatStore.sessions}
47+
locale={{ emptyText: ' ' }}
4748
renderItem={(item) => {
4849
const actions = [];
4950
if (
@@ -55,7 +56,6 @@ const ChatList: React.FC<IProps> = (props) => {
5556
key="切换"
5657
onClick={() => {
5758
chatStore.changeSession(item.id);
58-
props.onClose();
5959
}}
6060
>
6161
切换
@@ -84,22 +84,17 @@ const ChatList: React.FC<IProps> = (props) => {
8484
编辑
8585
</a>,
8686
);
87-
if (
88-
chatStore.currentSessionIndex !== item.id &&
89-
chatStore.sessions.length > 1
90-
) {
91-
actions.push(
92-
<a
93-
key="删除"
94-
onClick={() => {
95-
chatStore.delSeesion(item.id);
96-
message.success('删除成功');
97-
}}
98-
>
99-
删除
100-
</a>,
101-
);
102-
}
87+
actions.push(
88+
<a
89+
key="删除"
90+
onClick={() => {
91+
chatStore.delSeesion(item.id);
92+
message.success('删除成功');
93+
}}
94+
>
95+
删除
96+
</a>,
97+
);
10398
return (
10499
<List.Item actions={actions}>
105100
<List.Item.Meta

webview-react/src/pages/chatGPT/index.less

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,15 @@
88
padding-bottom: 15px;
99
flex: 1;
1010
overflow: auto;
11+
margin-top: 0;
12+
transition: margin-top 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
1113
&::-webkit-scrollbar {
1214
display: none;
1315
}
1416
}
17+
.listMarginTop {
18+
margin-top: 256px;
19+
}
1520
.promptIcon {
1621
display: flex;
1722
justify-content: flex-end;

webview-react/src/pages/chatGPT/index.tsx

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,12 @@ const View = () => {
1515

1616
return (
1717
<div className={styles.chatGpt}>
18-
<div className={styles.list} ref={model.listRef}>
18+
<div
19+
className={`${styles.list} ${
20+
model.listVisible ? styles.listMarginTop : ''
21+
}`}
22+
ref={model.listRef}
23+
>
1924
{chatStore
2025
.currentSession()
2126
?.messages.filter((s) => s.role !== 'system')
@@ -114,7 +119,7 @@ const View = () => {
114119
<img src="https://gitee.com/img-hosting/img-hosting/raw/master/2023/06/09/1686284730956.svg"></img>
115120
</div>
116121
</Tooltip>
117-
<Tooltip placement="top" title="导出当前回话" arrowPointAtCenter>
122+
<Tooltip placement="top" title="导出当前会话" arrowPointAtCenter>
118123
<div
119124
className={styles.action}
120125
onClick={presenter.handleExportContent}
@@ -127,6 +132,14 @@ const View = () => {
127132
<img src="https://gitee.com/img-host/img-host/raw/master/2023/06/01/1685631448493.svg"></img>
128133
</div>
129134
</Tooltip>
135+
<Tooltip placement="top" title="预置 Prompt 模板" arrowPointAtCenter>
136+
<div
137+
className={styles.action}
138+
onClick={presenter.handleAddPromptTemplate}
139+
>
140+
<img src="https://gitee.com/img-host/img-host/raw/master/2023/06/10/1686326918582.svg"></img>
141+
</div>
142+
</Tooltip>
130143
<Tooltip placement="top" title="新建会话" arrowPointAtCenter>
131144
<div className={styles.action} onClick={presenter.handleNewSession}>
132145
<img src="https://gitee.com/img-host/img-host/raw/master/2023/06/08/1686155702318.svg"></img>

0 commit comments

Comments
 (0)