farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-29 07:01:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

update UI

Browse Source
This commit is contained in:
Henry
2023-12-05 03:01:13 +00:00
parent acac9ee68d
commit 264a571abf
3 changed files with 368 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/assets/images/prompt_empty.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

packages/ui/src/ui-component/dialog/PromptLangsmithHubDialog.js
+229 -87
View File
@@ -1,6 +1,14 @@
import { createPortal } from 'react-dom' import { createPortal } from 'react-dom'
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import rehypeMathjax from 'rehype-mathjax'
import rehypeRaw from 'rehype-raw'
import remarkGfm from 'remark-gfm'
import remarkMath from 'remark-math'
// MUI
import { import {
Box, Box,
Button, Button,
@@ -10,7 +18,7 @@ import {
DialogActions, DialogActions,
DialogContent, DialogContent,
DialogTitle, DialogTitle,
Divider, Chip,
Grid, Grid,
InputLabel, InputLabel,
List, List,
@@ -18,23 +26,30 @@ import {
ListItemText, ListItemText,
OutlinedInput, OutlinedInput,
Select, Select,
Typography Typography,
Stack,
IconButton,
FormControl,
Checkbox,
MenuItem
} from '@mui/material' } from '@mui/material'
import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '../../store/actions'
import { useDispatch } from 'react-redux'
import FormControl from '@mui/material/FormControl'
import Checkbox from '@mui/material/Checkbox'
import MenuItem from '@mui/material/MenuItem'
import ReactMarkdown from 'react-markdown'
import CredentialInputHandler from '../../views/canvas/CredentialInputHandler'
import promptApi from '../../api/prompt'
import { StyledButton } from '../button/StyledButton'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import { styled } from '@mui/material/styles'
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp'
import MuiAccordion from '@mui/material/Accordion' import MuiAccordion from '@mui/material/Accordion'
import MuiAccordionSummary from '@mui/material/AccordionSummary' import MuiAccordionSummary from '@mui/material/AccordionSummary'
import MuiAccordionDetails from '@mui/material/AccordionDetails' import MuiAccordionDetails from '@mui/material/AccordionDetails'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp'
import ClearIcon from '@mui/icons-material/Clear'
import { styled } from '@mui/material/styles'
//Project Import
import CredentialInputHandler from 'views/canvas/CredentialInputHandler'
import { StyledButton } from 'ui-component/button/StyledButton'
import { MemoizedReactMarkdown } from 'ui-component/markdown/MemoizedReactMarkdown'
import { CodeBlock } from 'ui-component/markdown/CodeBlock'
import promptEmptySVG from 'assets/images/prompt_empty.svg'
import promptApi from 'api/prompt'
import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
const NewLineToBr = ({ children = '' }) => { const NewLineToBr = ({ children = '' }) => {
return children.split('\n').reduce(function (arr, line) { return children.split('\n').reduce(function (arr, line) {
@@ -73,6 +88,7 @@ const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => { const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
const portalElement = document.getElementById('portal') const portalElement = document.getElementById('portal')
const dispatch = useDispatch() const dispatch = useDispatch()
const customization = useSelector((state) => state.customization)
useEffect(() => { useEffect(() => {
if (show) dispatch({ type: SHOW_CANVAS_DIALOG }) if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
@@ -141,19 +157,24 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
const [selectedPrompt, setSelectedPrompt] = useState({}) const [selectedPrompt, setSelectedPrompt] = useState({})
const [credentialId, setCredentialId] = useState('') const [credentialId, setCredentialId] = useState('')
const [accordionExpanded, setAccordionExpanded] = useState('panel2') const [accordionExpanded, setAccordionExpanded] = useState(['prompt'])
const handleAccordionChange = (panel) => { const handleAccordionChange = (accordionName) => (event, isExpanded) => {
setAccordionExpanded(panel) const accordians = [...accordionExpanded]
if (!isExpanded) setAccordionExpanded(accordians.filter((accr) => accr !== accordionName))
else {
accordians.push(accordionName)
setAccordionExpanded(accordians)
}
} }
const handleListItemClick = async (event, index) => { const handleListItemClick = async (index, overridePromptNameList = []) => {
const prompt = availablePrompNameList[index] const prompt = overridePromptNameList.length ? overridePromptNameList[index] : availablePrompNameList[index]
if (!prompt.detailed) { if (!prompt.detailed) {
const createResp = await promptApi.getPrompt({ const createResp = await promptApi.getPrompt({
credential: credentialId, credential: credentialId,
promptName: selectedPrompt.full_name promptName: prompt.full_name
}) })
if (createResp.data) { if (createResp.data) {
prompt.detailed = createResp.data.templates prompt.detailed = createResp.data.templates
@@ -180,6 +201,7 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
}) })
if (createResp.data) { if (createResp.data) {
setAvailablePrompNameList(createResp.data.repos) setAvailablePrompNameList(createResp.data.repos)
if (createResp.data.repos?.length) handleListItemClick(0, createResp.data.repos)
} }
} }
@@ -217,12 +239,21 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
setLanguage(removeDuplicates(value)) setLanguage(removeDuplicates(value))
} }
const clear = () => {
setModelName([])
setUsecase([])
setLanguage([])
setSelectedPrompt({})
setAvailablePrompNameList([])
setAccordionExpanded(['prompt'])
}
const component = show ? ( const component = show ? (
<Dialog <Dialog
onClose={onCancel} onClose={onCancel}
open={show} open={show}
fullWidth fullWidth
maxWidth='lg' maxWidth={credentialId ? 'lg' : 'sm'}
aria-labelledby='prompt-dialog-title' aria-labelledby='prompt-dialog-title'
aria-describedby='prompt-dialog-description' aria-describedby='prompt-dialog-description'
> >
@@ -230,12 +261,12 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
Load Prompts from Langsmith Hub ({promptType === 'template' ? 'PromptTemplate' : 'ChatPromptTemplate'}) Load Prompts from Langsmith Hub ({promptType === 'template' ? 'PromptTemplate' : 'ChatPromptTemplate'})
</DialogTitle> </DialogTitle>
<DialogContent dividers sx={{ p: 1 }}> <DialogContent dividers sx={{ p: 1 }}>
<Box sx={{ width: '100%' }} style={{ display: 'flex', flexDirection: 'row', p: 1, m: 0 }}> <Box sx={{ width: credentialId ? '40%' : '100%', display: 'flex', flexDirection: 'row', p: 2, alignItems: 'center' }}>
<Typography style={{ alignSelf: 'center' }} sx={{ mr: 5 }} variant='overline'> <Typography sx={{ mr: 2 }}>
Langsmith Credential Langsmith Credential &nbsp;
<span style={{ color: 'red' }}>*</span> <span style={{ color: 'red' }}>*</span>
</Typography> </Typography>
<FormControl style={{ width: '30%' }} xs={4} sx={{ m: 1 }}> <FormControl sx={{ flex: 1 }}>
<CredentialInputHandler <CredentialInputHandler
size='small' size='small'
sx={{ flexGrow: 1 }} sx={{ flexGrow: 1 }}
@@ -249,18 +280,14 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
}} }}
onSelect={(newValue) => { onSelect={(newValue) => {
setCredentialId(newValue) setCredentialId(newValue)
if (!newValue) clear()
}} }}
/> />
</FormControl> </FormControl>
</Box> </Box>
<Box sx={{ width: '100%' }} style={{ display: 'flex', flexDirection: 'row' }}> {credentialId && (
<FormControl <Box sx={{ display: 'flex', flexDirection: 'row', p: 2, pt: 1, alignItems: 'center' }}>
style={{ <FormControl sx={{ mr: 1, width: '30%' }}>
width: '30%'
}}
xs={4}
sx={{ m: 1 }}
>
<InputLabel size='small' id='model-checkbox-label'> <InputLabel size='small' id='model-checkbox-label'>
Model Model
</InputLabel> </InputLabel>
@@ -274,6 +301,20 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
onChange={handleModelChange} onChange={handleModelChange}
input={<OutlinedInput label='Model' />} input={<OutlinedInput label='Model' />}
renderValue={(selected) => selected.map((x) => x.name).join(', ')} renderValue={(selected) => selected.map((x) => x.name).join(', ')}
endAdornment={
modelName.length ? (
<IconButton sx={{ mr: 2 }} onClick={() => setModelName([])}>
<ClearIcon style={{ width: 20, height: 20 }} />
</IconButton>
) : (
false
)
}
sx={{
'.MuiSvgIcon-root ': {
fill: customization.isDarkMode ? 'white !important' : ''
}
}}
MenuProps={MenuProps} MenuProps={MenuProps}
> >
{models.map((variant) => ( {models.map((variant) => (
@@ -284,13 +325,7 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
))} ))}
</Select> </Select>
</FormControl> </FormControl>
<FormControl <FormControl sx={{ mr: 1, width: '30%' }}>
xs={4}
style={{
width: '30%'
}}
sx={{ m: 1 }}
>
<InputLabel size='small' id='usecase-checkbox-label'> <InputLabel size='small' id='usecase-checkbox-label'>
Usecase Usecase
</InputLabel> </InputLabel>
@@ -305,6 +340,20 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
onChange={handleUsecaseChange} onChange={handleUsecaseChange}
input={<OutlinedInput label='Usecase' />} input={<OutlinedInput label='Usecase' />}
renderValue={(selected) => selected.map((x) => x.name).join(', ')} renderValue={(selected) => selected.map((x) => x.name).join(', ')}
endAdornment={
usecase.length ? (
<IconButton sx={{ mr: 2 }} onClick={() => setUsecase([])}>
<ClearIcon style={{ width: 20, height: 20 }} />
</IconButton>
) : (
false
)
}
sx={{
'.MuiSvgIcon-root ': {
fill: customization.isDarkMode ? 'white !important' : ''
}
}}
MenuProps={MenuProps} MenuProps={MenuProps}
> >
{usecases.map((variant) => ( {usecases.map((variant) => (
@@ -315,13 +364,7 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
))} ))}
</Select> </Select>
</FormControl> </FormControl>
<FormControl <FormControl sx={{ mr: 1, width: '30%' }}>
style={{
width: '25%'
}}
xs={3}
sx={{ m: 1 }}
>
<InputLabel size='small' id='language-checkbox-label'> <InputLabel size='small' id='language-checkbox-label'>
Language Language
</InputLabel> </InputLabel>
@@ -335,6 +378,20 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
onChange={handleLanguageChange} onChange={handleLanguageChange}
input={<OutlinedInput label='language' />} input={<OutlinedInput label='language' />}
renderValue={(selected) => selected.map((x) => x.name).join(', ')} renderValue={(selected) => selected.map((x) => x.name).join(', ')}
endAdornment={
language.length ? (
<IconButton sx={{ mr: 2 }} onClick={() => setLanguage([])}>
<ClearIcon style={{ width: 20, height: 20 }} />
</IconButton>
) : (
false
)
}
sx={{
'.MuiSvgIcon-root ': {
fill: customization.isDarkMode ? 'white !important' : ''
}
}}
MenuProps={MenuProps} MenuProps={MenuProps}
> >
{languages.map((variant) => ( {languages.map((variant) => (
@@ -345,23 +402,28 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
))} ))}
</Select> </Select>
</FormControl> </FormControl>
<FormControl <FormControl sx={{ width: '10%' }}>
style={{
width: '5%'
}}
xs={1}
sx={{ m: 1 }}
>
<Button disableElevation variant='outlined' onClick={fetchPrompts}> <Button disableElevation variant='outlined' onClick={fetchPrompts}>
Fetch Search
</Button> </Button>
</FormControl> </FormControl>
</Box> </Box>
<Divider sx={{ mb: 2 }} /> )}
{availablePrompNameList && availablePrompNameList.length == 0 && (
<Stack sx={{ alignItems: 'center', justifyContent: 'center', width: '100%', pb: 3 }} flexDirection='column'>
<Box sx={{ p: 5, height: 'auto' }}>
<img style={{ objectFit: 'cover', height: '20vh', width: 'auto' }} src={promptEmptySVG} alt='promptEmptySVG' />
</Box>
<div>No Available Prompts</div>
</Stack>
)}
{availablePrompNameList && availablePrompNameList.length > 0 && (
<Stack sx={{ alignItems: 'center', justifyContent: 'center', width: '100%' }} flexDirection='column'>
<Box sx={{ width: '100%', p: 2 }}>
<Grid xs={12} container spacing={1} justifyContent='center' alignItems='center'> <Grid xs={12} container spacing={1} justifyContent='center' alignItems='center'>
<Grid xs={4} item style={{ textAlign: 'left' }}> <Grid xs={4} item sx={{ textAlign: 'left' }}>
<Box sx={{ width: '100%', maxWidth: 360 }}> <Box sx={{ width: '100%', maxWidth: 360 }}>
<Card variant='outlined' style={{ height: 470, overflow: 'auto', borderRadius: 0 }}> <Card variant='outlined' sx={{ height: 470, overflow: 'auto', borderRadius: 0 }}>
<CardContent sx={{ p: 1 }}> <CardContent sx={{ p: 1 }}>
<Typography sx={{ fontSize: 10 }} color='text.secondary' gutterBottom> <Typography sx={{ fontSize: 10 }} color='text.secondary' gutterBottom>
Available Prompts Available Prompts
@@ -371,9 +433,29 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
<ListItemButton <ListItemButton
key={item.id} key={item.id}
selected={item.id === selectedPrompt?.id} selected={item.id === selectedPrompt?.id}
onClick={(event) => handleListItemClick(event, index)} onClick={() => handleListItemClick(index)}
> >
<ListItemText>{item.full_name}</ListItemText> <div style={{ display: 'flex', flexDirection: 'column' }}>
<Typography sx={{ fontSize: 16, p: 1, fontWeight: 500 }}>
{item.full_name}
</Typography>
<div
style={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
marginTop: 5
}}
>
{item.tags.map((tag, index) => (
<Chip
key={index}
label={tag}
style={{ marginRight: 5, marginBottom: 5 }}
/>
))}
</div>
</div>
</ListItemButton> </ListItemButton>
))} ))}
</List> </List>
@@ -381,25 +463,14 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
</Card> </Card>
</Box> </Box>
</Grid> </Grid>
<Grid xs={8} item style={{ textAlign: 'left' }}> <Grid xs={8} item sx={{ textAlign: 'left' }}>
<Box sx={{ width: '100%' }} style={{ display: 'flex', flexDirection: 'column' }}> <Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Card variant='outlined' style={{ height: 470, overflow: 'auto', borderRadius: 0 }}> <Card sx={{ height: 470, overflow: 'auto' }}>
<CardContent sx={{ p: 0.5 }}> <CardContent sx={{ p: 0.5 }}>
<Accordion expanded={accordionExpanded === 'panel1'} onChange={() => handleAccordionChange('panel1')}> <Accordion
<AccordionSummary expanded={accordionExpanded.includes('prompt')}
aria-controls='panel1d-content' onChange={handleAccordionChange('prompt')}
expandIcon={<ExpandMoreIcon />}
id='panel1d-header'
> >
<Typography>Description</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography sx={{ fontSize: 12, wordWrap: 'true' }} color='text.primary'>
{selectedPrompt?.description}
</Typography>
</AccordionDetails>
</Accordion>
<Accordion expanded={accordionExpanded === 'panel2'} onChange={() => handleAccordionChange('panel2')}>
<AccordionSummary <AccordionSummary
aria-controls='panel2d-content' aria-controls='panel2d-content'
expandIcon={<ExpandMoreIcon />} expandIcon={<ExpandMoreIcon />}
@@ -408,18 +479,20 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
<Typography>Prompt</Typography> <Typography>Prompt</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Typography sx={{ fontSize: 12, wordWrap: 'true' }} color='text.primary'> <Typography sx={{ wordWrap: 'true' }} color='text.primary'>
{selectedPrompt?.detailed?.map((item) => ( {selectedPrompt?.detailed?.map((item) => (
<> <>
<Typography sx={{ fontSize: 12 }} color='text.secondary' gutterBottom> <Typography sx={{ fontSize: 12 }} color='text.secondary' gutterBottom>
{item.typeDisplay.toUpperCase()} {item.typeDisplay.toUpperCase()}
</Typography> </Typography>
<Typography sx={{ fontSize: 12 }}> <Typography>
<p <p
style={{ style={{
whiteSpace: 'pre-wrap -moz-pre-wrap -pre-wrap -o-pre-wrap', whiteSpace: 'pre-wrap -moz-pre-wrap -pre-wrap -o-pre-wrap',
wordWrap: 'break-word', wordWrap: 'break-word',
fontFamily: 'inherit' fontFamily: 'inherit',
wordSpacing: '0.1rem',
lineHeight: '1.5rem'
}} }}
> >
<NewLineToBr>{item.template}</NewLineToBr> <NewLineToBr>{item.template}</NewLineToBr>
@@ -430,7 +503,30 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
</Typography> </Typography>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
<Accordion expanded={accordionExpanded === 'panel3'} onChange={() => handleAccordionChange('panel3')}> <Accordion
expanded={accordionExpanded.includes('description')}
onChange={handleAccordionChange('description')}
>
<AccordionSummary
aria-controls='panel1d-content'
expandIcon={<ExpandMoreIcon />}
id='panel1d-header'
>
<Typography>Description</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography
sx={{ wordWrap: 'true', wordSpacing: '0.1rem', lineHeight: '1.5rem' }}
color='text.primary'
>
{selectedPrompt?.description}
</Typography>
</AccordionDetails>
</Accordion>
<Accordion
expanded={accordionExpanded.includes('readme')}
onChange={handleAccordionChange('readme')}
>
<AccordionSummary <AccordionSummary
expandIcon={<ExpandMoreIcon />} expandIcon={<ExpandMoreIcon />}
aria-controls='panel3d-content' aria-controls='panel3d-content'
@@ -439,12 +535,49 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
<Typography>Readme</Typography> <Typography>Readme</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<ReactMarkdown <div
sx={{ fontSize: 11, wordWrap: 'true', width: '100%' }} style={{
style={{ width: '100%', flexGrow: 1, resize: 'none' }} lineHeight: 1.75,
'& a': {
display: 'block',
marginRight: '2.5rem',
wordWrap: 'break-word',
color: '#16bed7',
fontWeight: 500
},
'& a:hover': { opacity: 0.8 },
'& code': {
color: '#0ab126',
fontWeight: 500,
whiteSpace: 'pre-wrap !important'
}
}}
>
<MemoizedReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax, rehypeRaw]}
components={{
code({ inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '')
return !inline ? (
<CodeBlock
key={Math.random()}
isDialog={true}
language={(match && match[1]) || ''}
value={String(children).replace(/\n$/, '')}
{...props}
/>
) : (
<code className={className} {...props}>
{children}
</code>
)
}
}}
> >
{selectedPrompt?.readme} {selectedPrompt?.readme}
</ReactMarkdown> </MemoizedReactMarkdown>
</div>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
</CardContent> </CardContent>
@@ -452,13 +585,22 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
</Box> </Box>
</Grid> </Grid>
</Grid> </Grid>
</Box>
</Stack>
)}
</DialogContent> </DialogContent>
{availablePrompNameList && availablePrompNameList.length > 0 && (
<DialogActions> <DialogActions>
<Button onClick={onCancel}>Cancel</Button> <Button onClick={onCancel}>Cancel</Button>
<StyledButton disabled={!selectedPrompt?.detailed} onClick={() => onSubmit(selectedPrompt.detailed)} variant='contained'> <StyledButton
Submit disabled={!selectedPrompt?.detailed}
onClick={() => onSubmit(selectedPrompt.detailed)}
variant='contained'
>
Load
</StyledButton> </StyledButton>
</DialogActions> </DialogActions>
)}
</Dialog> </Dialog>
) : null ) : null
packages/ui/src/views/canvas/NodeInputHandler.js
+1 -1
View File
@@ -231,7 +231,7 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isA
flexDirection: 'row', flexDirection: 'row',
width: '100%' width: '100%'
}} }}
sx={{ borderRadius: 25, width: '100%', mb: 2, mt: 2 }} sx={{ borderRadius: 25, width: '100%', mb: 2, mt: 0 }}
variant='outlined' variant='outlined'
onClick={() => onShowPromptHubButtonClicked()} onClick={() => onShowPromptHubButtonClicked()}
endIcon={<IconAutoFixHigh />} endIcon={<IconAutoFixHigh />}