Skip to content

Commit ebf446f

Browse files
frankpaganfrankpagan
committed
feat: define selectors to target and valu-types to parse for
1 parent 3deb68c commit ebf446f

File tree

1 file changed

+59
-134
lines changed

1 file changed

+59
-134
lines changed

‎src/client.js‎

Lines changed: 59 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import crud from '@cocreate/crud-client'
22
import Actions from '@cocreate/actions'
3+
import { queryElements } from '@cocreate/utils';
34

45
const model = 'gpt-4-1106-preview'
56
const max_tokens = 3300;
@@ -9,57 +10,7 @@ const stop = '###STOP###';
910

1011
const forms = new Map()
1112

12-
const componentsReference = {
13-
"componentsReference": {
14-
"socket": {
15-
"functions": {
16-
"send": "<data>",
17-
"listen": "<method>"
18-
},
19-
"data": { 'broadcast': 'boolean', 'broadcast-sender': 'boolean', 'broadcast-browser': 'boolean' },
20-
"html-attributes": ['broadcast', 'broadcast-sender', 'broadcast-browser', 'namespace', 'room', 'balancer']
21-
},
22-
"crud": {
23-
"functions": {
24-
"send": "<data>",
25-
"listen": "<method>"
26-
},
27-
"methods": ["database.create", "database.read", "database.update", "database.delete", "array.create", "array.read", "array.update", "array.delete", "index.create", "index.read", "index.update", "index.delete", "object.create", "object.read", "object.update", "object.delete"],
28-
"data": { method: "", database: "", array: "", index: "", object: {} || [], filter: {} },
29-
"html-attributes": ['storage', 'database', 'array', 'object', 'key', 'index', 'save', 'read', 'update', 'delete', 'realtime', 'crud', 'upsert', 'value-type', 'value-prefix', 'value-suffix']
30-
},
31-
"filter": {
32-
"functions": {
33-
"getFilter": "<filter>",
34-
"setFilter": "<filter>"
35-
},
36-
"filter": { query: [{ key: "", value: "", operator: "$eq | $ne | $includes", logicalOperator: "", caseSensitive: "true | false" }], sort: [{ key: "", direction: "asc | desc" }], search: [{ value: "", operator: "", caseSensitive: "true | false" }] },
37-
"html-attributes": ['filter-selector', 'filter-closest', 'filter-parent', 'filter-prvious', 'filter-next', 'filter-key', 'filter-value', 'filter-value-type', 'filter-case-sensitive', 'filter-operator', 'filter-logical-opertor', 'filter-sort-key', 'filter-sort-direction', 'filter-search', 'filter-limit', 'filter-count', 'filter-on']
38-
},
39-
"crdt": {
40-
"functions": ["init", "getText", "updateText", "replaceText", "undoText", "redoText"],
41-
"data": { array: "", object: "_id", key: "", value: "", attribute: "bold | italic", start: 0, length: 0 },
42-
"html-attributes": ['crdt']
43-
},
44-
"cursors": {
45-
"functions": { sendPosition: "<data>" },
46-
"data": { array: [], object: "_id", key: "", start: 0, end: 0 },
47-
"html-attributes": ['cursors']
48-
},
49-
"events": {
50-
"functions": { init: "<data>" },
51-
"data": { prefix: "", events: [] },
52-
"predefined-prefixes": ['click', 'change', 'input', 'onload', 'observer', 'mousedown', 'mousemove', 'mouseup', 'toggle', 'hover', 'selected'],
53-
"html-attributes": ['<prefix>-selector', '<prefix>-selector', '<prefix>-closest', '<prefix>-parent', '<prefix>-previous', '<prefix>-next']
54-
},
55-
"state": {
56-
"html-attributes": ['state_to', 'state_id', 'state-<attribute>', 'state-overwrite']
57-
},
58-
}
59-
60-
};
61-
62-
async function send(conversation) {
13+
async function send(conversation, action) {
6314
try {
6415
let data = await crud.socket.send({
6516
method: 'openai.chat.completions.create',
@@ -75,13 +26,30 @@ async function send(conversation) {
7526

7627
if (data) {
7728
let content = data.openai.choices[0].message.content;
78-
content = content.replace(/```json\n|\n```/g, '');
79-
content = JSON.parse(content)
8029

81-
// TODO: check if careers exist else create
82-
let responseElement = document.querySelector('[openai="response"]')
83-
if (responseElement) {
84-
responseElement.setValue(content)
30+
let valueType = action.element.getAttribute('openai-value-type');
31+
content = parseContent(content, valueType)
32+
let elements = queryElements({ element: action.element, prefix: 'openai' });
33+
34+
35+
36+
let type = action.element.getAttribute('openai-type');
37+
if (type === 'form') {
38+
if (typeof content !== "object")
39+
return
40+
for (let form of elements) {
41+
const inputs = form.querySelectorAll('[name], [key]');
42+
inputs.forEach(element => {
43+
const key = element.getAttribute('key') || element.getAttribute('name');
44+
if (content[key]) {
45+
element.setValue(content[key]);
46+
}
47+
});
48+
}
49+
} else {
50+
for (let element of elements) {
51+
element.setValue(content)
52+
}
8553
}
8654
}
8755

@@ -105,6 +73,31 @@ async function send(conversation) {
10573

10674
}
10775

76+
function parseContent(content, valueType) {
77+
let parsedContent;
78+
79+
if (valueType === 'json') {
80+
content = content.replace(/```json\n|\n```/g, '');
81+
parsedContent = JSON.parse(content);
82+
} else if (valueType === 'javascript') {
83+
content = content.replace(/```javascript\n|\n```/g, '');
84+
parsedContent = content;
85+
} else if (valueType === 'html') {
86+
content = content.replace(/```html\n|\n```/g, '');
87+
parsedContent = content;
88+
} else if (valueType === 'css') {
89+
content = content.replace(/```css\n|\n```/g, '');
90+
parsedContent = content;
91+
} else if (valueType === 'markdown') {
92+
parsedContent = content;
93+
} else {
94+
// Default case to handle any other types or plain text
95+
parsedContent = content;
96+
}
97+
98+
return parsedContent;
99+
}
100+
108101
// Function to extract the object from the generated code
109102
function extractObjectFromCode(code) {
110103
try {
@@ -121,85 +114,16 @@ function extractObjectFromCode(code) {
121114
}
122115
}
123116

124-
async function openaiAction(form) {
117+
async function openaiAction(action) {
118+
let form = action.form
119+
if (!form)
120+
return
121+
125122
let elements = form.querySelectorAll('[openai]')
126123

127124
let conversation = forms.get(form)
128-
// if (!conversation) {
129-
// const crudReference = {
130-
// data: {
131-
// method: "database.create | database.read | database.update | database.delete | array.create | array.read | array.update | array.delete | index.create | index.read | index.update | index.delete | object.create | object.read | object.update | object.delete",
132-
// storage: "" || [""],
133-
// database: "" || [""],
134-
// array: "" || [""],
135-
// index: "" || [""],
136-
// object: {} || [{}],
137-
// filter: {
138-
// query: [{ key: "", value: "", operator: "$eq | $ne | $includes", logicalOperator: "", caseSensitive: "true | false" }],
139-
// sort: [{ key: "", direction: "asc | desc" }],
140-
// search: [{ value: "", operator: "", caseSensitive: "true | false" }]
141-
// }
142-
// }
143-
// }
144-
// const crudObjectReference = {
145-
// data: {
146-
// method: " object.create | object.read | object.update | object.delete",
147-
// array: "" || [""],
148-
// object: {} || [{}],
149-
// filter: {
150-
// query: [{ key: "", value: "", operator: "$eq | $ne | $includes", logicalOperator: "", caseSensitive: "true | false" }],
151-
// sort: [{ key: "", direction: "asc | desc" }],
152-
// search: [{ value: "", operator: "", caseSensitive: "true | false" }],
153-
// limit: 0
154-
// }
155-
// }
156-
// }
157-
158-
// const filterObjectReference = {
159-
// data: {
160-
// method: " object.create | object.read | object.update | object.delete",
161-
// array: "files",
162-
// object: [{
163-
// "_id": "",
164-
// "name": "",
165-
// "src": "",
166-
// "host": [
167-
// "*",
168-
// ],
169-
// "directory": "/",
170-
// "path": "",
171-
// "content-type": "",
172-
// "public": "true"
173-
// }]
174-
// }
175-
// }
176-
177-
// const htmlAttributesReference = {
178-
// "socket-html-attributes": ['broadcast', 'broadcast-sender', 'broadcast-browser', 'namespace', 'room', 'balancer'],
179-
// "crud-html-attributes": ['storage', 'database', 'array', 'object', 'key', 'index', 'save', 'read', 'update', 'delete', 'realtime', 'crud', 'upsert', 'value-type', 'value-prefix', 'value-suffix', 'listen'],
180-
// "filter-html-attributes": ['filter-selector', 'filter-closest', 'filter-parent', 'filter-previous', 'filter-next', 'filter-key', 'filter-value', 'filter-value-type', 'filter-case-sensitive', 'filter-operator', 'filter-logical-opertor', 'filter-sort-key', 'filter-sort-direction', 'filter-search', 'filter-limit', 'filter-count', 'filter-on'],
181-
// "render-html-attributes": ['render', 'render-selector', 'render-closest', 'render-parent', 'render-previous', 'render-next', 'render-as']
182-
// }
183-
184-
// conversation = [
185-
// { role: 'system', content: 'If the users request seem to want to perform a CRUD operation, return a CoCreateJS CRUD data object as a response. Else reply as best you can to users queries' },
186-
// { role: 'system', content: 'data.method should default to "object.create", "object.read", "object.update", "object.delete"' },
187-
// { role: 'system', content: 'To perform CRUD operations on the objects contained within an array, use the following methods: "object.create" for creating objects, "object.read" for reading and returning one or more objects, "object.update" for updating objects, and "object.delete" for deleting objects. The array property must be defined to perform crud operations on objects' },
188-
// { role: 'system', content: 'data.storage and data.database is not required and should only be defined if the user specifically requests it. example: delete test database from indexeddb storage' },
189-
// { role: 'system', content: 'In the context of CoCreateJS, an "array" corresponds to a "table" in SQL databases or a "collection" in NoSQL databases.' },
190-
// { role: 'system', content: 'In the context of CoCreateJS, an "object" corresponds to a "row" in SQL databases or a "document" in NoSQL databases.' },
191-
// { role: 'system', content: 'crud reference' + JSON.stringify(crudReference) },
192-
// { role: 'system', content: 'crud object reference' + JSON.stringify(crudObjectReference) },
193-
// { role: 'system', content: 'When using object.update or object.delete methods the data.object._id should be defined or a filter used to return and excute on matches' },
194-
// { role: 'system', content: 'file object reference' + JSON.stringify(filterObjectReference) },
195-
// { role: 'system', content: 'If the users request seem to want to create a file or code return the code/source in the data.object.src . This will make the file available over network request using the defined path' },
196-
// { role: 'system', content: 'html attributes reference' + JSON.stringify(htmlAttributesReference) },
197-
// { role: 'system', content: 'component reference' + JSON.stringify(componentsReference) },
198-
199-
// ]
200125
if (!conversation)
201126
forms.set(form, conversation = [])
202-
// }
203127

204128
// 3 types avialable system, user, assistant
205129
for (let element of elements) {
@@ -253,9 +177,11 @@ async function openaiAction(form) {
253177
// conversation.push({ role, content })
254178
// } else if (role === 'message' && content)
255179
// conversation.push({ role: 'user', content })
180+
256181
}
182+
257183
if (conversation.length)
258-
send(conversation);
184+
send(conversation, action);
259185
}
260186

261187
export default { send }
@@ -264,7 +190,6 @@ Actions.init({
264190
name: "openAi",
265191
endEvent: "openAi",
266192
callback: (action) => {
267-
if (action.form)
268-
openaiAction(action.form);
193+
openaiAction(action);
269194
}
270195
})

0 commit comments

Comments
 (0)