Skip to content

Commit 59ccff9

Browse files
rachitkrsinghrachitkrsingh
committed
Adding functionality and modal for showing disclaimer for using LLMs such as OpenAI and AWS Bedrock Cluade
1 parent 6fc9c8c commit 59ccff9

4 files changed

Lines changed: 174 additions & 42 deletions

File tree

‎src/components/molecules/headers/TabPanelHeader.js‎

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,15 @@ import HorizontalDivider from 'components/atoms/common/HorizontalDivider';
1616
import { JsonView, allExpanded, collapseAllNested, darkStyles, defaultStyles } from 'react-json-view-lite';
1717
import 'react-json-view-lite/dist/index.css';
1818
import { LogLevel } from '../flow/graph/GraphLogger';
19-
import { ShieldCheckIcon, BarsArrowUpIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
19+
import GenAIUsageDisclaimer from '../modals/GenAIUsageDisclaimer';
20+
import { getLocalStorageItem } from 'utils/common';
2021

2122
const TabPanelHeader = () => {
2223
const focusTabId = useTabStore((state) => state.focusTabId);
2324
const tabs = useTabStore((state) => state.tabs);
2425
const focusTab = tabs.find((t) => t.id === focusTabId);
2526

27+
const graphRunLogs = useCanvasStore((state) => state.logs);
2628
const setTimeout = useCanvasStore((state) => state.setTimeout);
2729

2830
const [slidingPaneState, setSlidingPaneState] = useState({
@@ -32,6 +34,7 @@ const TabPanelHeader = () => {
3234
subtitle: 'Not Available',
3335
});
3436

37+
const [genAiUsageDisclaimerModalOpen, setGenAiUsageDisclaimerModalOpen] = useState(false);
3538
const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false);
3639

3740
const renderLog = (log) => {
@@ -44,26 +47,28 @@ const TabPanelHeader = () => {
4447

4548
if (log.node != undefined) {
4649
const type = log.node.type;
47-
const data = log.node.data;
4850
if (type === 'outputNode') {
4951
json = {
50-
output: data.output,
52+
output: log.node.data,
5153
};
5254
}
5355

5456
if (type === 'assertNode') {
57+
const data = log.node.data;
5558
message = `Assert : ${data.var1} of type ${typeof data.var1} ${data.operator} ${data.var2} of type ${typeof data.var2} = ${data.result}`;
5659
}
5760

5861
if (type === 'delayNode') {
59-
message = `Waiting for ${data.delay} ms`;
62+
message = `Waiting for ${log.node.data} ms`;
6063
}
6164

6265
if (type === 'setVarNode') {
66+
const data = log.node.data;
6367
message = `Setting Variable: ${data.name} = ${data.value}`;
6468
}
6569

6670
if (type === 'requestNode') {
71+
const data = log.node.data;
6772
message = `${data.request.type.toUpperCase()} ${data.request.url}`;
6873
json = data;
6974
}
@@ -110,32 +115,8 @@ const TabPanelHeader = () => {
110115
}
111116
};
112117

113-
const renderFlowScan = (flowScan) => {
114-
if (flowScan.upload === 'disabled') {
115-
return (
116-
<div className='flex flex-col items-start'>
117-
<Tippy content={flowScan.message} placement='top'>
118-
<BarsArrowUpIcon className='h-4 w-4' />
119-
</Tippy>
120-
{'Activate Flow Scan'}
121-
</div>
122-
);
123-
} else if (flowScan.upload === 'success') {
124-
return (
125-
<div className='flex flex-col items-start'>
126-
<ShieldCheckIcon className='h-4 w-4' />
127-
{flowScan.url}
128-
</div>
129-
);
130-
} else if (flowScan.upload === 'fail') {
131-
return (
132-
<div className='flex flex-col items-start'>
133-
<ExclamationTriangleIcon className='h-4 w-4' />
134-
{flowScan.message}
135-
{flowScan?.reason}
136-
</div>
137-
);
138-
}
118+
const showDisclaimerMsg = () => {
119+
return getLocalStorageItem('show_gen_ai_disclaimer');
139120
};
140121

141122
return (
@@ -161,7 +142,7 @@ const TabPanelHeader = () => {
161142
<div className='flex h-12 items-center justify-center'>
162143
<SaveFlowModal tab={focusTab} />
163144
</div>
164-
{focusTab.type === OBJ_TYPES.flowtest && focusTab.run.logs && focusTab.run.logs.length != 0 ? (
145+
{focusTab.type === OBJ_TYPES.flowtest && graphRunLogs.length != 0 ? (
165146
<div>
166147
<Button
167148
id='graph-logs-side-sheet'
@@ -205,8 +186,7 @@ const TabPanelHeader = () => {
205186
className='drawer-overlay'
206187
></label>
207188
<ul className='menu min-h-full bg-base-200 p-4 text-base-content'>
208-
<li key='scan'>{renderFlowScan(focusTab.run.scan)}</li>
209-
{focusTab.run.logs.map((item, index) => (
189+
{graphRunLogs.map((item, index) => (
210190
<li key={index}>{renderLog(item)}</li>
211191
))}
212192
</ul>
@@ -220,18 +200,35 @@ const TabPanelHeader = () => {
220200
<Button
221201
btnType={BUTTON_TYPES.secondary}
222202
isDisabled={false}
223-
onClickHandle={() => setGenerateFlowTestModalOpen(true)}
203+
onClickHandle={() => {
204+
const showMsg = showDisclaimerMsg();
205+
console.log(`\n \n showMsg : ${showMsg} \n`);
206+
if (showMsg === 'false') {
207+
setGenerateFlowTestModalOpen(true);
208+
} else {
209+
setGenAiUsageDisclaimerModalOpen(true);
210+
}
211+
}}
224212
fullWidth={true}
225213
className='flex items-center justify-between gap-x-4'
226214
>
227215
<SparklesIcon className='h-5 w-5' />
228216
Generate
229217
</Button>
230-
<GenerateFlowTestModal
231-
closeFn={() => setGenerateFlowTestModalOpen(false)}
232-
open={generateFlowTestModalOpen}
233-
collectionId={focusTab.collectionId}
234-
/>
218+
{/* ToDo: Discuss: I think having a user profile file on disk for this setting and all the future settings will be better */}
219+
{showDisclaimerMsg() === 'false' ? (
220+
<GenerateFlowTestModal
221+
closeFn={() => setGenerateFlowTestModalOpen(false)}
222+
open={generateFlowTestModalOpen}
223+
collectionId={focusTab.collectionId}
224+
/>
225+
) : (
226+
<GenAIUsageDisclaimer
227+
closeFn={() => setGenAiUsageDisclaimerModalOpen(false)}
228+
open={genAiUsageDisclaimerModalOpen}
229+
collectionId={focusTab.collectionId}
230+
/>
231+
)}
235232
</div>
236233
)}
237234
</div>

‎src/components/molecules/modals/GenAIUsageDisclaimer.js‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import React, { Fragment, useState, useEffect } from 'react';
2+
import { PropTypes } from 'prop-types';
3+
import { Dialog, Transition } from '@headlessui/react';
4+
import Button from 'components/atoms/common/Button';
5+
import { BUTTON_INTENT_TYPES, BUTTON_TYPES } from 'constants/Common';
6+
import TextInput from 'components/atoms/common/TextInput';
7+
import GenerateFlowTestModal from './GenerateFlowTestModal';
8+
import { setLocalStorageItem } from 'utils/common';
9+
10+
const GenAIUsageDisclaimer = ({ closeFn = () => null, open = false, collectionId }) => {
11+
const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false);
12+
return (
13+
<>
14+
<Transition appear show={open} as={Fragment}>
15+
<Dialog
16+
as='div'
17+
className='relative z-10'
18+
onClose={() => {
19+
closeFn();
20+
}}
21+
>
22+
<Transition.Child
23+
as={Fragment}
24+
enter='ease-out duration-300'
25+
enterFrom='opacity-0'
26+
enterTo='opacity-100'
27+
leave='ease-in duration-200'
28+
leaveFrom='opacity-100'
29+
leaveTo='opacity-0'
30+
>
31+
<div className='fixed inset-0 bg-black/25' />
32+
</Transition.Child>
33+
34+
<div className='fixed inset-0 overflow-y-auto'>
35+
<div className='flex min-h-full items-center justify-center p-4 text-center'>
36+
<Transition.Child
37+
as={Fragment}
38+
enter='ease-out duration-300'
39+
enterFrom='opacity-0 scale-95'
40+
enterTo='opacity-100 scale-100'
41+
leave='ease-in duration-200'
42+
leaveFrom='opacity-100 scale-100'
43+
leaveTo='opacity-0 scale-95'
44+
>
45+
<Dialog.Panel className='w-full max-w-2xl transform overflow-hidden rounded bg-white p-6 text-left align-middle shadow-xl transition-all'>
46+
<Dialog.Title as='h3' className='border-b border-gray-300 pb-4 text-center text-lg font-semibold'>
47+
Disclaimer
48+
</Dialog.Title>
49+
<div className='flex flex-col pb-6'>
50+
<p className='mt-2 text-xl font-semibold italic 2xl:mt-4'>
51+
This tool utilizes OpenAI&#39;s and Amazon Bedrock Claude language model to provide information
52+
and assistance. While we strive to ensure the accuracy and reliability of the information
53+
provided, the responses generated by the model may not always be accurate, complete, or
54+
up-to-date.
55+
</p>
56+
<ul className='font-montserrat'>
57+
<li className='py-2'>
58+
<span className='font-semibold'>Information Accuracy:</span> The information and responses
59+
provided by the tool are generated based on the data and patterns recognized by OpenAI&#39;s
60+
language model. Users should independently verify any critical information before relying on it.
61+
</li>
62+
<li className='py-2'>
63+
<span className='font-semibold'>No Professional Advice:</span> The responses generated by the
64+
tool do not constitute professional advice, including but not limited to medical, legal,
65+
financial, or any other professional service. Always seek the advice of a qualified professional
66+
with any questions you may have.
67+
</li>
68+
<li className='py-2'>
69+
<span className='font-semibold'>User Responsibility:</span> Users are responsible for how they
70+
interpret and use the information provided by the tool. The developers and operators of this
71+
tool are not liable for any damages or losses resulting from the use or misuse of the tool.
72+
</li>
73+
<li className='py-2'>
74+
<span className='font-semibold'>Company Policies:</span> If your company has policies or
75+
guidelines related to the use of OpenAI or AI-generated content, please ensure that you adhere
76+
to those policies when using this tool. It is your responsibility to comply with your
77+
company&#39;s regulations and standards.
78+
</li>
79+
<li className='py-2'>
80+
<span className='font-semibold'>Privacy and Data Use:</span> The tool may collect data input by
81+
users to improve the quality of the service. Please review our privacy policy for more
82+
information on how we handle your data. By using this tool, you acknowledge that you understand
83+
and agree to this disclaimer and our terms of service.
84+
</li>
85+
</ul>
86+
</div>
87+
<div className='flex items-center gap-2 border-t border-gray-300 pt-6'>
88+
<Button
89+
btnType={BUTTON_TYPES.primary}
90+
intentType={BUTTON_INTENT_TYPES.error}
91+
isDisabled={false}
92+
onClickHandle={() => {
93+
closeFn();
94+
}}
95+
fullWidth={true}
96+
>
97+
Cancel
98+
</Button>
99+
<Button
100+
btnType={BUTTON_TYPES.primary}
101+
isDisabled={false}
102+
fullWidth={true}
103+
onClickHandle={() => {
104+
closeFn();
105+
setGenerateFlowTestModalOpen(true);
106+
setLocalStorageItem('show_gen_ai_disclaimer', false);
107+
}}
108+
>
109+
Acknowledge
110+
</Button>
111+
</div>
112+
</Dialog.Panel>
113+
</Transition.Child>
114+
</div>
115+
</div>
116+
</Dialog>
117+
</Transition>
118+
<GenerateFlowTestModal
119+
closeFn={() => setGenerateFlowTestModalOpen(false)}
120+
open={generateFlowTestModalOpen}
121+
collectionId={collectionId}
122+
/>
123+
</>
124+
);
125+
};
126+
127+
export default GenAIUsageDisclaimer;

‎src/components/molecules/modals/GenerateFlowTestModal.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
379379
className='nodrag nowheel block w-full bg-transparent p-2.5 outline-none'
380380
name='keyName'
381381
placeholder='Enter your OPENAI api key'
382-
value={modelKey}
382+
value={modelKey.trim()}
383383
//readOnly='readonly'
384384
onChange={(e) => setModelKey(e.target.value)}
385385
/>
@@ -408,7 +408,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
408408
className='nodrag nowheel block w-full bg-transparent p-2.5 outline-none'
409409
name='keyId'
410410
placeholder='Enter your BEDROCK access key id'
411-
value={bedrockAccessKeyId}
411+
value={bedrockAccessKeyId.trim()}
412412
//readOnly='readonly'
413413
onChange={(e) => setBedrockAccessKeyId(e.target.value)}
414414
/>
@@ -431,7 +431,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
431431
className='nodrag nowheel block w-full bg-transparent p-2.5 outline-none'
432432
name='keyName'
433433
placeholder='Enter your BEDROCK secret access key'
434-
value={bedrockSecretAccessKey}
434+
value={bedrockSecretAccessKey.trim()}
435435
//readOnly='readonly'
436436
onChange={(e) => setBedrockSecretAccessKey(e.target.value)}
437437
/>

‎src/utils/common.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,11 @@ export const isEmptyObj = (obj) => {
4545
}
4646
return JSON.stringify(obj) === JSON.stringify({});
4747
};
48+
49+
export const setLocalStorageItem = (itemKey, itemValue) => {
50+
localStorage.setItem(itemKey, itemValue);
51+
};
52+
53+
export const getLocalStorageItem = (itemKey) => {
54+
return localStorage.getItem(itemKey);
55+
};

0 commit comments

Comments
 (0)