Skip to content

Commit 2cd8db0

Browse files
HenryHengZJHenryHengZJ
authored
Bugfix/Generator Prompt Markdown Format (#4592)
* add ui fixes * refactor: update image structure in CustomAssistantLayout to use object format
1 parent 8793ed6 commit 2cd8db0

15 files changed

+234
-52
lines changed

‎packages/ui/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
"rehype-raw": "^7.0.0",
6969
"remark-gfm": "^3.0.1",
7070
"remark-math": "^5.1.1",
71+
"showdown": "^2.1.0",
7172
"tippy.js": "^6.3.7",
7273
"uuid": "^9.0.1",
7374
"yup": "^0.32.9"

‎packages/ui/src/ui-component/dialog/AgentflowGeneratorDialog.jsx

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { Dropdown } from '@/ui-component/dropdown/Dropdown'
1515
import { useTheme } from '@mui/material/styles'
1616
import assistantsApi from '@/api/assistants'
1717
import { baseURL } from '@/store/constant'
18-
import { initNode } from '@/utils/genericHelper'
18+
import { initNode, showHideInputParams } from '@/utils/genericHelper'
1919
import DocStoreInputHandler from '@/views/docstore/DocStoreInputHandler'
2020
import useApi from '@/hooks/useApi'
2121

@@ -55,6 +55,15 @@ const AgentflowGeneratorDialog = ({ show, dialogProps, onCancel, onConfirm }) =>
5555
const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
5656
const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
5757

58+
const handleChatModelDataChange = ({ inputParam, newValue }) => {
59+
setSelectedChatModel((prevData) => {
60+
const updatedData = { ...prevData }
61+
updatedData.inputs[inputParam.name] = newValue
62+
updatedData.inputParams = showHideInputParams(updatedData)
63+
return updatedData
64+
})
65+
}
66+
5867
useEffect(() => {
5968
if (getChatModelsApi.data) {
6069
setChatModelsComponents(getChatModelsApi.data)
@@ -303,10 +312,15 @@ const AgentflowGeneratorDialog = ({ show, dialogProps, onCancel, onConfirm }) =>
303312
borderRadius: 2
304313
}}
305314
>
306-
{(selectedChatModel.inputParams ?? [])
307-
.filter((inputParam) => !inputParam.hidden)
315+
{showHideInputParams(selectedChatModel)
316+
.filter((inputParam) => !inputParam.hidden && inputParam.display !== false)
308317
.map((inputParam, index) => (
309-
<DocStoreInputHandler key={index} inputParam={inputParam} data={selectedChatModel} />
318+
<DocStoreInputHandler
319+
key={index}
320+
inputParam={inputParam}
321+
data={selectedChatModel}
322+
onNodeDataChange={handleChatModelDataChange}
323+
/>
310324
))}
311325
</Box>
312326
)}

‎packages/ui/src/ui-component/dialog/NodeInfoDialog.jsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,11 @@ const NodeInfoDialog = ({ show, dialogProps, onCancel }) => {
8181
height: 50,
8282
marginRight: 10,
8383
borderRadius: '50%',
84-
backgroundColor: 'white'
84+
backgroundColor: 'white',
85+
flexShrink: 0,
86+
display: 'flex',
87+
alignItems: 'center',
88+
justifyContent: 'center'
8589
}}
8690
>
8791
<img

‎packages/ui/src/ui-component/extended/SpeechToText.jsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,11 @@ const SpeechToText = ({ dialogProps }) => {
379379
width: 50,
380380
height: 50,
381381
borderRadius: '50%',
382-
backgroundColor: 'white'
382+
backgroundColor: 'white',
383+
flexShrink: 0,
384+
display: 'flex',
385+
alignItems: 'center',
386+
justifyContent: 'center'
383387
}}
384388
>
385389
<img

‎packages/ui/src/views/assistants/custom/CustomAssistantConfigurePreview.jsx

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ import { baseURL } from '@/store/constant'
5353
import { SET_CHATFLOW, closeSnackbar as closeSnackbarAction, enqueueSnackbar as enqueueSnackbarAction } from '@/store/actions'
5454

5555
// Utils
56-
import { initNode } from '@/utils/genericHelper'
56+
import { initNode, showHideInputParams } from '@/utils/genericHelper'
5757
import useNotifier from '@/utils/useNotifier'
5858
import { toolAgentFlow } from './toolAgentFlow'
5959

@@ -127,6 +127,28 @@ const CustomAssistantConfigurePreview = () => {
127127
const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
128128
const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
129129

130+
const handleChatModelDataChange = ({ inputParam, newValue }) => {
131+
setSelectedChatModel((prevData) => {
132+
const updatedData = { ...prevData }
133+
updatedData.inputs[inputParam.name] = newValue
134+
updatedData.inputParams = showHideInputParams(updatedData)
135+
return updatedData
136+
})
137+
}
138+
139+
const handleToolDataChange =
140+
(toolIndex) =>
141+
({ inputParam, newValue }) => {
142+
setSelectedTools((prevTools) => {
143+
const updatedTools = [...prevTools]
144+
const updatedTool = { ...updatedTools[toolIndex] }
145+
updatedTool.inputs[inputParam.name] = newValue
146+
updatedTool.inputParams = showHideInputParams(updatedTool)
147+
updatedTools[toolIndex] = updatedTool
148+
return updatedTools
149+
})
150+
}
151+
130152
const displayWarning = () => {
131153
enqueueSnackbar({
132154
message: 'Please fill in all mandatory fields.',
@@ -1126,13 +1148,14 @@ const CustomAssistantConfigurePreview = () => {
11261148
borderRadius: 2
11271149
}}
11281150
>
1129-
{(selectedChatModel.inputParams ?? [])
1130-
.filter((inputParam) => !inputParam.hidden)
1151+
{showHideInputParams(selectedChatModel)
1152+
.filter((inputParam) => !inputParam.hidden && inputParam.display !== false)
11311153
.map((inputParam, index) => (
11321154
<DocStoreInputHandler
11331155
key={index}
11341156
inputParam={inputParam}
11351157
data={selectedChatModel}
1158+
onNodeDataChange={handleChatModelDataChange}
11361159
/>
11371160
))}
11381161
</Box>
@@ -1217,13 +1240,16 @@ const CustomAssistantConfigurePreview = () => {
12171240
mb: 1
12181241
}}
12191242
>
1220-
{(tool.inputParams ?? [])
1221-
.filter((inputParam) => !inputParam.hidden)
1222-
.map((inputParam, index) => (
1243+
{showHideInputParams(tool)
1244+
.filter(
1245+
(inputParam) => !inputParam.hidden && inputParam.display !== false
1246+
)
1247+
.map((inputParam, inputIndex) => (
12231248
<DocStoreInputHandler
1224-
key={index}
1249+
key={inputIndex}
12251250
inputParam={inputParam}
12261251
data={tool}
1252+
onNodeDataChange={handleToolDataChange(index)}
12271253
/>
12281254
))}
12291255
</Box>

‎packages/ui/src/views/assistants/custom/CustomAssistantLayout.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,9 @@ const CustomAssistantLayout = () => {
6464
const getImages = (details) => {
6565
const images = []
6666
if (details && details.chatModel && details.chatModel.name) {
67-
images.push(`${baseURL}/api/v1/node-icon/${details.chatModel.name}`)
67+
images.push({
68+
imageSrc: `${baseURL}/api/v1/node-icon/${details.chatModel.name}`
69+
})
6870
}
6971
return images
7072
}

‎packages/ui/src/views/canvas/NodeInputHandler.jsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Handle, Position, useUpdateNodeInternals } from 'reactflow'
33
import { useEffect, useRef, useState, useContext } from 'react'
44
import { useSelector, useDispatch } from 'react-redux'
55
import { cloneDeep } from 'lodash'
6+
import showdown from 'showdown'
67

78
// material-ui
89
import { useTheme, styled } from '@mui/material/styles'
@@ -98,6 +99,13 @@ const StyledPopper = styled(Popper)({
9899
}
99100
})
100101

102+
const markdownConverter = new showdown.Converter({
103+
simplifiedAutoLink: true,
104+
strikethrough: true,
105+
tables: true,
106+
tasklists: true
107+
})
108+
101109
// ===========================|| NodeInputHandler ||=========================== //
102110

103111
const NodeInputHandler = ({
@@ -1389,7 +1397,12 @@ const NodeInputHandler = ({
13891397
onCancel={() => setPromptGeneratorDialogOpen(false)}
13901398
onConfirm={(generatedInstruction) => {
13911399
try {
1392-
data.inputs[inputParam.name] = generatedInstruction
1400+
if (inputParam?.acceptVariable && window.location.href.includes('v2/agentcanvas')) {
1401+
const htmlContent = markdownConverter.makeHtml(generatedInstruction)
1402+
data.inputs[inputParam.name] = htmlContent
1403+
} else {
1404+
data.inputs[inputParam.name] = generatedInstruction
1405+
}
13931406
setPromptGeneratorDialogOpen(false)
13941407
} catch (error) {
13951408
enqueueSnackbar({

‎packages/ui/src/views/credentials/CredentialListDialog.jsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,11 @@ const CredentialListDialog = ({ show, dialogProps, onCancel, onCredentialSelecte
140140
width: 50,
141141
height: 50,
142142
borderRadius: '50%',
143-
backgroundColor: 'white'
143+
backgroundColor: 'white',
144+
flexShrink: 0,
145+
display: 'flex',
146+
alignItems: 'center',
147+
justifyContent: 'center'
144148
}}
145149
>
146150
<img

‎packages/ui/src/views/docstore/ComponentsListDialog.jsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,11 @@ const ComponentsListDialog = ({ show, dialogProps, onCancel, apiCall, onSelected
153153
width: 50,
154154
height: 50,
155155
borderRadius: '50%',
156-
backgroundColor: 'white'
156+
backgroundColor: 'white',
157+
flexShrink: 0,
158+
display: 'flex',
159+
alignItems: 'center',
160+
justifyContent: 'center'
157161
}}
158162
>
159163
<img

‎packages/ui/src/views/docstore/DocStoreInputHandler.jsx

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import PropTypes from 'prop-types'
2-
import { useState } from 'react'
2+
import { useState, useContext } from 'react'
33
import { useSelector } from 'react-redux'
44

55
// material-ui
@@ -20,21 +20,32 @@ import { CodeEditor } from '@/ui-component/editor/CodeEditor'
2020
import ExpandTextDialog from '@/ui-component/dialog/ExpandTextDialog'
2121
import ManageScrapedLinksDialog from '@/ui-component/dialog/ManageScrapedLinksDialog'
2222
import CredentialInputHandler from '@/views/canvas/CredentialInputHandler'
23+
import { flowContext } from '@/store/context/ReactFlowContext'
2324

2425
// const
2526
import { FLOWISE_CREDENTIAL_ID } from '@/store/constant'
2627

2728
// ===========================|| DocStoreInputHandler ||=========================== //
2829

29-
const DocStoreInputHandler = ({ inputParam, data, disabled = false }) => {
30+
const DocStoreInputHandler = ({ inputParam, data, disabled = false, onNodeDataChange }) => {
3031
const customization = useSelector((state) => state.customization)
32+
const flowContextValue = useContext(flowContext)
33+
const nodeDataChangeHandler = onNodeDataChange || flowContextValue?.onNodeDataChange
3134

3235
const [showExpandDialog, setShowExpandDialog] = useState(false)
3336
const [expandDialogProps, setExpandDialogProps] = useState({})
3437
const [showManageScrapedLinksDialog, setShowManageScrapedLinksDialog] = useState(false)
3538
const [manageScrapedLinksDialogProps, setManageScrapedLinksDialogProps] = useState({})
3639
const [reloadTimestamp, setReloadTimestamp] = useState(Date.now().toString())
3740

41+
const handleDataChange = ({ inputParam, newValue }) => {
42+
data.inputs[inputParam.name] = newValue
43+
const allowedShowHideInputTypes = ['boolean', 'asyncOptions', 'asyncMultiOptions', 'options', 'multiOptions']
44+
if (allowedShowHideInputTypes.includes(inputParam.type) && nodeDataChangeHandler) {
45+
nodeDataChangeHandler({ nodeId: data.id, inputParam, newValue })
46+
}
47+
}
48+
3849
const onExpandDialogClicked = (value, inputParam) => {
3950
const dialogProps = {
4051
value,
@@ -149,7 +160,7 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false }) => {
149160
{inputParam.type === 'boolean' && (
150161
<SwitchInput
151162
disabled={disabled}
152-
onChange={(newValue) => (data.inputs[inputParam.name] = newValue)}
163+
onChange={(newValue) => handleDataChange({ inputParam, newValue })}
153164
value={data.inputs[inputParam.name] ?? inputParam.default ?? false}
154165
/>
155166
)}
@@ -203,7 +214,7 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false }) => {
203214
disabled={disabled}
204215
name={inputParam.name}
205216
options={inputParam.options}
206-
onSelect={(newValue) => (data.inputs[inputParam.name] = newValue)}
217+
onSelect={(newValue) => handleDataChange({ inputParam, newValue })}
207218
value={data.inputs[inputParam.name] ?? inputParam.default ?? 'choose an option'}
208219
/>
209220
)}
@@ -213,7 +224,7 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false }) => {
213224
disabled={disabled}
214225
name={inputParam.name}
215226
options={inputParam.options}
216-
onSelect={(newValue) => (data.inputs[inputParam.name] = newValue)}
227+
onSelect={(newValue) => handleDataChange({ inputParam, newValue })}
217228
value={data.inputs[inputParam.name] ?? inputParam.default ?? 'choose an option'}
218229
/>
219230
)}
@@ -230,7 +241,7 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false }) => {
230241
freeSolo={inputParam.freeSolo}
231242
multiple={inputParam.type === 'asyncMultiOptions'}
232243
value={data.inputs[inputParam.name] ?? inputParam.default ?? 'choose an option'}
233-
onSelect={(newValue) => (data.inputs[inputParam.name] = newValue)}
244+
onSelect={(newValue) => handleDataChange({ inputParam, newValue })}
234245
onCreateNew={() => addAsyncOption(inputParam.name)}
235246
/>
236247
</div>
@@ -296,7 +307,8 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false }) => {
296307
DocStoreInputHandler.propTypes = {
297308
inputParam: PropTypes.object,
298309
data: PropTypes.object,
299-
disabled: PropTypes.bool
310+
disabled: PropTypes.bool,
311+
onNodeDataChange: PropTypes.func
300312
}
301313

302314
export default DocStoreInputHandler

0 commit comments

Comments
 (0)