Skip to content

Commit 00b5eee

Browse files
devhelprdevhelpr
committed
api key form dialog now has a field to enter googlegemini api key. keys can optionally be stored in session storage
1 parent 6bfa3c6 commit 00b5eee

File tree

9 files changed

+138
-63
lines changed

9 files changed

+138
-63
lines changed

‎examples-test-flows/google-gemini-flash-create-mermaid-diagram-and-openapi-yaml.json‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
"id": "c3a8bd9e-f4d5-46db-9384-b1de17a33c5f",
1111
"x": 3914.0981303650296,
1212
"y": 1509.8835261671454,
13-
"width": 119.99997204228195,
14-
"height": 56.00007878462439,
13+
"width": 120.0001953794722,
14+
"height": 272.00002877196243,
1515
"nodeType": "Shape",
1616
"nodeInfo": {
1717
"type": "show-input",
@@ -45,8 +45,8 @@
4545
"id": "8b7d6c8d-1806-4596-a47a-514038cffe13",
4646
"x": 3149.212174053084,
4747
"y": 1326.861468973325,
48-
"width": 174.4219254771454,
49-
"height": 83.99998042959736,
48+
"width": 174.42197730022014,
49+
"height": 84.00000888545898,
5050
"nodeType": "Shape",
5151
"nodeInfo": {
5252
"type": "scope-variable",
@@ -64,10 +64,10 @@
6464
},
6565
{
6666
"id": "342b786f-955e-4ef8-968e-60b24427b75a",
67-
"x": 3465.45461899076,
67+
"x": 3465.454621654088,
6868
"y": 1255.391240672226,
69-
"width": 174.4219254771454,
70-
"height": 83.99998042959736,
69+
"width": 174.42197730022014,
70+
"height": 84.00000888545898,
7171
"nodeType": "Shape",
7272
"nodeInfo": {
7373
"type": "scope-variable",
@@ -85,10 +85,10 @@
8585
},
8686
{
8787
"id": "be45d12a-a496-4fd5-b70c-7d779b8ed7bb",
88-
"x": 3313.952349588795,
89-
"y": 1505.1885836305773,
88+
"x": 3313.952444530195,
89+
"y": 1505.1885017162472,
9090
"width": 200,
91-
"height": 165,
91+
"height": 165.03125,
9292
"nodeType": "Shape",
9393
"nodeInfo": {
9494
"type": "composition-cb3e91c2-6654-4014-af63-b445dffc7f22",
@@ -105,8 +105,8 @@
105105
"id": "2ea8b5ec-c20a-440c-a9b1-2e91b099086c",
106106
"x": 3725.328825736654,
107107
"y": 1715.7699016658066,
108-
"width": 119.99997204228195,
109-
"height": 271.9999366291724,
108+
"width": 120.0001953794722,
109+
"height": 56.00000592363933,
110110
"nodeType": "Shape",
111111
"nodeInfo": {
112112
"type": "show-input",
@@ -122,8 +122,8 @@
122122
"id": "c29665a3-2bdd-4a30-b2b8-a67f3d6d7c18",
123123
"x": 4243.814455933351,
124124
"y": 1402.1353921330267,
125-
"width": 200,
126-
"height": 100,
125+
"width": 199.99983846989537,
126+
"height": 148.23431039820878,
127127
"nodeType": "Shape",
128128
"nodeInfo": {
129129
"type": "mermaid-node",
@@ -157,7 +157,7 @@
157157
"x": 3319.9035792065756,
158158
"y": 2054.039831924315,
159159
"width": 200,
160-
"height": 165,
160+
"height": 165.03125,
161161
"nodeType": "Shape",
162162
"nodeInfo": {
163163
"type": "composition-cb3e91c2-6654-4014-af63-b445dffc7f22",
@@ -174,8 +174,8 @@
174174
"id": "14c6949e-1438-4780-a09e-c305be78dd9e",
175175
"x": 4104.257555693473,
176176
"y": 2205.2278375828564,
177-
"width": 119.99997204228195,
178-
"height": 55.99998695306491,
177+
"width": 119.99983000755348,
178+
"height": 272.00002877196243,
179179
"nodeType": "Shape",
180180
"nodeInfo": {
181181
"type": "show-input",
@@ -189,8 +189,8 @@
189189
},
190190
{
191191
"id": "3735612d-a425-45c2-ae8f-8a3adfcde306",
192-
"x": 3513.952349588795,
193-
"y": 1565.1885766411478,
192+
"x": 3513.952444530195,
193+
"y": 1565.2196985171856,
194194
"endX": 3914.0981303650296,
195195
"endY": 1539.8835261671454,
196196
"startNodeId": "be45d12a-a496-4fd5-b70c-7d779b8ed7bb",
@@ -206,8 +206,8 @@
206206
"id": "3595bb23-681a-43d1-b8c5-0a3cd2b68bfc",
207207
"x": 2926.3640311889217,
208208
"y": 1553.1434885344127,
209-
"endX": 3313.952349588795,
210-
"endY": 1565.1885836305773,
209+
"endX": 3313.952444530195,
210+
"endY": 1565.2197517162472,
211211
"startNodeId": "9f1f3e1c-787f-406f-b52b-b6db3e7b85dd",
212212
"endNodeId": "be45d12a-a496-4fd5-b70c-7d779b8ed7bb",
213213
"startThumbName": "output",
@@ -219,8 +219,8 @@
219219
},
220220
{
221221
"id": "00a0e5fc-39b9-4662-bc1b-dc982dcb50fe",
222-
"x": 3513.952349588795,
223-
"y": 1615.1885766411478,
222+
"x": 3513.952444530195,
223+
"y": 1615.2196985171856,
224224
"endX": 3725.328825736654,
225225
"endY": 1745.7699016658066,
226226
"startNodeId": "be45d12a-a496-4fd5-b70c-7d779b8ed7bb",
@@ -234,10 +234,10 @@
234234
},
235235
{
236236
"id": "c66d47a3-a145-453c-8f48-b20629a15065",
237-
"x": 4034.0981024073117,
237+
"x": 4034.098325744502,
238238
"y": 1539.8835261671454,
239239
"endX": 4243.814455933351,
240-
"endY": 1452.1353921330267,
240+
"endY": 1476.2525473321311,
241241
"startNodeId": "c3a8bd9e-f4d5-46db-9384-b1de17a33c5f",
242242
"endNodeId": "c29665a3-2bdd-4a30-b2b8-a67f3d6d7c18",
243243
"startThumbName": "output",
@@ -252,7 +252,7 @@
252252
"x": 2924.2454873300067,
253253
"y": 2099.360986881521,
254254
"endX": 3319.9035792065756,
255-
"endY": 2114.039831924315,
255+
"endY": 2114.071081924315,
256256
"startNodeId": "1438dcf5-ebdf-47c3-b793-818ec7676f04",
257257
"endNodeId": "d392400d-d256-4a13-93f0-48ef7f441833",
258258
"startThumbName": "output",
@@ -265,7 +265,7 @@
265265
{
266266
"id": "fa69fcd7-6fc0-4640-987f-07b361bac08b",
267267
"x": 3519.9035792065756,
268-
"y": 2114.039916766445,
268+
"y": 2114.0710287252537,
269269
"endX": 4104.257555693473,
270270
"endY": 2235.2278375828564,
271271
"startNodeId": "d392400d-d256-4a13-93f0-48ef7f441833",
@@ -305,15 +305,15 @@
305305
},
306306
{
307307
"id": "e8bad215-deb0-42d9-a3e1-156090717777",
308-
"x": 3663.978499769079,
309-
"y": 1511.6350314922647,
308+
"x": 3663.9784997690786,
309+
"y": 1511.6350634287994,
310310
"width": 200,
311311
"height": 200,
312312
"nodeType": "Shape",
313313
"nodeInfo": {
314314
"type": "fetch",
315315
"formValues": {
316-
"url": "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=[openai-key]",
316+
"url": "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=[googleGeminiAI-key]",
317317
"http-method": "post",
318318
"headers": ""
319319
},
@@ -416,8 +416,8 @@
416416
"id": "6a22f828-b47c-4123-bde9-6ebe2940cc0a",
417417
"x": 3498.0575709629506,
418418
"y": 1602.3180647659217,
419-
"endX": 3663.978499769079,
420-
"endY": 1611.6350314922647,
419+
"endX": 3663.9784997690786,
420+
"endY": 1611.6350634287994,
421421
"startNodeId": "1bc4104f-6c09-4bd2-9a65-9ed23137a1db",
422422
"endNodeId": "e8bad215-deb0-42d9-a3e1-156090717777",
423423
"startThumbName": "output",
@@ -444,8 +444,8 @@
444444
},
445445
{
446446
"id": "41770511-b5bf-4014-9b95-1dee2abd53de",
447-
"x": 3863.978499769079,
448-
"y": 1541.6350314922647,
447+
"x": 3863.9784997690786,
448+
"y": 1541.6350634287994,
449449
"endX": 4003.48228233086,
450450
"endY": 1541.442820331771,
451451
"startNodeId": "e8bad215-deb0-42d9-a3e1-156090717777",
@@ -489,8 +489,8 @@
489489
},
490490
{
491491
"id": "9707c237-11e3-472b-a25f-a94fd96f7947",
492-
"x": 3863.978499769079,
493-
"y": 1591.6350314922647,
492+
"x": 3863.9784997690786,
493+
"y": 1591.6350634287994,
494494
"endX": 4918.737747840005,
495495
"endY": 1667.9890301621356,
496496
"startNodeId": "e8bad215-deb0-42d9-a3e1-156090717777",

‎libs/app-canvas/src/app/components/node-sidebar-menu.tsx‎

Lines changed: 71 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ import {
2222
transformCameraSpaceToWorldSpace,
2323
getPointerPos,
2424
pointerDown,
25+
createFormDialog,
26+
FormFieldType,
27+
IFormsComponent,
2528
} from '@devhelpr/visual-programming-system';
2629
import {
2730
getFollowNodeExecution,
@@ -32,7 +35,6 @@ import {
3235
getNodeFactoryNames,
3336
NodeInfo,
3437
} from '@devhelpr/web-flow-executor';
35-
import { createInputDialog } from '../utils/create-input-dialog';
3638

3739
export class NodeSidebarMenuComponent extends Component<
3840
AppNavComponentsProps<NodeInfo>
@@ -643,29 +645,76 @@ export class NodeSidebarMenuComponent extends Component<
643645
return false;
644646
}
645647
const openAIKey = canvasApp.getTempData('openai-key') ?? '';
646-
createInputDialog(
647-
this.rootAppElement,
648-
'Openai-key',
649-
openAIKey,
650-
(_name) => {
651-
return {
652-
valid: true,
653-
};
654-
},
655-
{
656-
isPassword: true,
657-
}
658-
).then((value) => {
659-
if (value === false) {
660-
return;
661-
}
662-
const canvasApp = this.props.getCanvasApp();
663-
if (!canvasApp) {
664-
return;
648+
const googleGeminiAIKey = canvasApp.getTempData('googleGeminiAI-key') ?? '';
649+
createFormDialog(
650+
[
651+
{
652+
fieldType: FormFieldType.Text,
653+
fieldName: 'openAIAPIKey',
654+
label: 'OpenAI API Key',
655+
value: openAIKey ?? '',
656+
enablePassword: true,
657+
onChange: (_value: string, _formComponent: IFormsComponent) => {
658+
//
659+
},
660+
},
661+
{
662+
fieldType: FormFieldType.Text,
663+
fieldName: 'googleGeminiAPIKey',
664+
label: 'Google Gemini API Key',
665+
value: googleGeminiAIKey ?? '',
666+
enablePassword: true,
667+
onChange: (_value: string, _formComponent: IFormsComponent) => {
668+
//
669+
},
670+
},
671+
{
672+
fieldType: FormFieldType.Checkbox,
673+
fieldName: 'storeInSessionStorage',
674+
label: 'Store in browser session storage',
675+
value: 'false',
676+
onChange: (_value: boolean, _formComponent: IFormsComponent) => {
677+
//
678+
},
679+
},
680+
],
681+
this.rootAppElement
682+
).then((values) => {
683+
console.log('form values', values);
684+
canvasApp.setTempData('openai-key', values['openAIAPIKey']);
685+
canvasApp.setTempData('googleGeminiAI-key', values['googleGeminiAPIKey']);
686+
if (values['storeInSessionStorage']) {
687+
sessionStorage.setItem('openai-key', values['openAIAPIKey']);
688+
sessionStorage.setItem(
689+
'googleGeminiAI-key',
690+
values['googleGeminiAPIKey']
691+
);
665692
}
666-
canvasApp.setTempData('openai-key', value);
667-
console.log('openai-key value', value);
668693
});
694+
// const openAIKey = canvasApp.getTempData('openai-key') ?? '';
695+
// createInputDialog(
696+
// this.rootAppElement,
697+
// 'Openai-key',
698+
// openAIKey,
699+
// (_name) => {
700+
// return {
701+
// valid: true,
702+
// };
703+
// },
704+
// {
705+
// isPassword: true,
706+
// }
707+
// ).then((value) => {
708+
// if (value === false) {
709+
// return;
710+
// }
711+
// const canvasApp = this.props.getCanvasApp();
712+
// if (!canvasApp) {
713+
// return;
714+
// }
715+
// canvasApp.setTempData('openai-key', value);
716+
// console.log('openai-key value', value);
717+
// });
669718
return false;
670719
};
671720

‎libs/app-canvas/src/app/flow-app.element.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,16 @@ export class FlowAppElement extends AppElement<NodeInfo> {
279279

280280
let intervalCancel: any = undefined;
281281
let intervalPreview: any = undefined;
282+
283+
const openAIKey = sessionStorage.getItem('openai-key');
284+
const googleGeminiAIKey = sessionStorage.getItem('googleGeminiAI-key');
285+
if (openAIKey) {
286+
this.canvasApp.setTempData('openai-key', openAIKey);
287+
}
288+
if (googleGeminiAIKey) {
289+
this.canvasApp.setTempData('googleGeminiAI-key', googleGeminiAIKey);
290+
}
291+
282292
this.canvasApp.setOnDraggingOverNode((node, draggedNode, isCancelling) => {
283293
const connection = draggedNode as IConnectionNodeComponent<NodeInfo>;
284294
if (connection.startNodeThumb) {

‎libs/visual-programming-system/src/forms/FormField.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export type FormField = (
2626
fieldType: 'Text';
2727
value: string;
2828
enableAutoComplete?: boolean;
29+
enablePassword?: boolean;
2930
onKeyDown?: (event: KeyboardEvent) => void;
3031
onKeyUp?: (event: KeyboardEvent) => void;
3132
onChange?: (value: string, formComponent: IFormsComponent) => void;

‎libs/visual-programming-system/src/forms/form-component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -278,6 +278,7 @@ export class FormsComponent
278278
isRow: formControl.isRow,
279279
settings,
280280
enableAutoComplete: this.props.enableAutoComplete,
281+
enablePassword: formControl.enablePassword,
281282
setValue: this.setValue,
282283
onChange: (value) => this.onChange(formControl, value),
283284
onKeyDown: formControl.onKeyDown,

‎libs/visual-programming-system/src/forms/form-fields/input.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export interface InputFieldProps extends BaseFormFieldProps {
1515
isRow?: boolean;
1616
isLast?: boolean;
1717
enableAutoComplete?: boolean;
18+
enablePassword?: boolean;
1819
onChange?: (value: string, formComponent: IFormsComponent) => void;
1920
onKeyDown?: (event: KeyboardEvent) => void;
2021
onKeyUp?: (event: KeyboardEvent) => void;
@@ -42,9 +43,11 @@ export class InputFieldChildComponent extends FormFieldComponent<InputFieldProps
4243
<input class="block w-full p-1"
4344
name="${props.fieldName}"
4445
${props.enableAutoComplete ? '' : "autocomplete='off'"}
46+
4547
id="${props.formId}_${props.fieldName}"
4648
value="${props.value ?? ''}"
47-
type="text"></input>
49+
${props.enablePassword ? 'type="password"' : 'type="text"'}
50+
></input>
4851
</div>`
4952
);
5053

‎libs/visual-programming-system/src/utils/create-form-dialog.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const createFormDialog = (
5959
});
6060
const dialogElement = createElement(
6161
'dialog',
62-
{ class: 'input-dialog modal-dialog-form bg-slate-600' },
62+
{ class: 'input-dialog modal-dialog-form bg-slate-600 p-4' },
6363
rootElement || document.body,
6464
formWrapperElement
6565
);

0 commit comments

Comments
 (0)