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

Merge pull request #908 from FlowiseAI/feature/Analytic

Browse Source 
Feature/Add analytic
This commit is contained in:
Henry Heng
2023-09-13 08:46:24 +01:00
committed by GitHub
parent 032cf6bbda d19f72db6f
commit 3d35536de5
42 changed files with 742 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/assets/images/langchain.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

packages/ui/src/assets/images/langfuse.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

packages/ui/src/menu-items/settings.js
+9 -2
View File
@@ -1,8 +1,8 @@
// assets
import { IconTrash, IconFileUpload, IconFileExport, IconCopy } from '@tabler/icons'
import { IconTrash, IconFileUpload, IconFileExport, IconCopy, IconSearch } from '@tabler/icons'
// constant
const icons = { IconTrash, IconFileUpload, IconFileExport, IconCopy }
const icons = { IconTrash, IconFileUpload, IconFileExport, IconCopy, IconSearch }
// ==============================|| SETTINGS MENU ITEMS ||============================== //
@@ -32,6 +32,13 @@ const settings = {
url: '',
icon: icons.IconFileExport
},
{
id: 'analyseChatflow',
title: 'Analyse Chatflow',
type: 'item',
url: '',
icon: icons.IconSearch
},
{
id: 'deleteChatflow',
title: 'Delete Chatflow',
packages/ui/src/store/constant.js
+1
View File
@@ -6,3 +6,4 @@ export const maxScroll = 100000
export const baseURL = process.env.NODE_ENV === 'production' ? window.location.origin : window.location.origin.replace(':8080', ':3000')
export const uiBaseURL = window.location.origin
export const FLOWISE_CREDENTIAL_ID = 'FLOWISE_CREDENTIAL_ID'
export const REDACTED_CREDENTIAL_VALUE = '_FLOWISE_BLANK_07167752-1a71-43b1-bf8f-4f32252165db'
packages/ui/src/ui-component/dialog/AnalyseFlowDialog.js
+358
View File
@@ -0,0 +1,358 @@
import { createPortal } from 'react-dom'
import { useDispatch } from 'react-redux'
import { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from 'store/actions'
// material-ui
import {
Typography,
Box,
Button,
Dialog,
DialogContent,
DialogTitle,
DialogActions,
Accordion,
AccordionSummary,
AccordionDetails,
ListItem,
ListItemAvatar,
ListItemText
} from '@mui/material'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import { IconX } from '@tabler/icons'
// Project import
import CredentialInputHandler from 'views/canvas/CredentialInputHandler'
import { TooltipWithParser } from 'ui-component/tooltip/TooltipWithParser'
import { SwitchInput } from 'ui-component/switch/Switch'
import { Input } from 'ui-component/input/Input'
import { StyledButton } from 'ui-component/button/StyledButton'
import langsmithPNG from 'assets/images/langchain.png'
import langfusePNG from 'assets/images/langfuse.png'
// store
import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
import useNotifier from 'utils/useNotifier'
// API
import chatflowsApi from 'api/chatflows'
const analyticProviders = [
{
label: 'LangSmith',
name: 'langSmith',
icon: langsmithPNG,
url: 'https://smith.langchain.com',
inputs: [
{
label: 'Connect Credential',
name: 'credential',
type: 'credential',
credentialNames: ['langsmithApi']
},
{
label: 'Project Name',
name: 'projectName',
type: 'string',
optional: true,
description: 'If not provided, default will be used',
placeholder: 'default'
},
{
label: 'On/Off',
name: 'status',
type: 'boolean',
optional: true
}
]
},
{
label: 'LangFuse',
name: 'langFuse',
icon: langfusePNG,
url: 'https://langfuse.com',
inputs: [
{
label: 'Connect Credential',
name: 'credential',
type: 'credential',
credentialNames: ['langfuseApi']
},
{
label: 'Flush At',
name: 'flushAt',
type: 'number',
optional: true,
description: 'Number of queued requests'
},
{
label: 'Flush Interval',
name: 'flushInterval',
type: 'number',
optional: true,
description: 'Interval in ms to flush requests'
},
{
label: 'Request Timeout',
name: 'requestTimeout',
type: 'number',
optional: true,
description: 'Timeout in ms for requests'
},
{
label: 'Release',
name: 'release',
type: 'string',
optional: true,
description: 'The release number/hash of the application to provide analytics grouped by release'
},
{
label: 'On/Off',
name: 'status',
type: 'boolean',
optional: true
}
]
}
]
const AnalyseFlowDialog = ({ show, dialogProps, onCancel }) => {
const portalElement = document.getElementById('portal')
const dispatch = useDispatch()
useNotifier()
const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
const [analytic, setAnalytic] = useState({})
const [providerExpanded, setProviderExpanded] = useState({})
const onSave = async () => {
try {
const saveResp = await chatflowsApi.updateChatflow(dialogProps.chatflow.id, {
analytic: JSON.stringify(analytic)
})
if (saveResp.data) {
enqueueSnackbar({
message: 'Analytic Configuration Saved',
options: {
key: new Date().getTime() + Math.random(),
variant: 'success',
action: (key) => (
<Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
<IconX />
</Button>
)
}
})
dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data })
}
onCancel()
} catch (error) {
const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
enqueueSnackbar({
message: `Failed to save Analytic Configuration: ${errorData}`,
options: {
key: new Date().getTime() + Math.random(),
variant: 'error',
persist: true,
action: (key) => (
<Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
<IconX />
</Button>
)
}
})
}
}
const setValue = (value, providerName, inputParamName) => {
let newVal = {}
if (!Object.prototype.hasOwnProperty.call(analytic, providerName)) {
newVal = { ...analytic, [providerName]: {} }
} else {
newVal = { ...analytic }
}
newVal[providerName][inputParamName] = value
setAnalytic(newVal)
}
const handleAccordionChange = (providerName) => (event, isExpanded) => {
const accordianProviders = { ...providerExpanded }
accordianProviders[providerName] = isExpanded
setProviderExpanded(accordianProviders)
}
useEffect(() => {
if (dialogProps.chatflow && dialogProps.chatflow.analytic) {
try {
setAnalytic(JSON.parse(dialogProps.chatflow.analytic))
} catch (e) {
setAnalytic({})
console.error(e)
}
}
return () => {
setAnalytic({})
setProviderExpanded({})
}
}, [dialogProps])
useEffect(() => {
if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
else dispatch({ type: HIDE_CANVAS_DIALOG })
return () => dispatch({ type: HIDE_CANVAS_DIALOG })
}, [show, dispatch])
const component = show ? (
<Dialog
onClose={onCancel}
open={show}
fullWidth
maxWidth='sm'
aria-labelledby='alert-dialog-title'
aria-describedby='alert-dialog-description'
>
<DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
Analyse Chatflow
</DialogTitle>
<DialogContent>
{analyticProviders.map((provider, index) => (
<Accordion
expanded={providerExpanded[provider.name] || false}
onChange={handleAccordionChange(provider.name)}
disableGutters
key={index}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={provider.name} id={provider.name}>
<ListItem style={{ padding: 0, margin: 0 }} alignItems='center'>
<ListItemAvatar>
<div
style={{
width: 50,
height: 50,
borderRadius: '50%',
backgroundColor: 'white'
}}
>
<img
style={{
width: '100%',
height: '100%',
padding: 10,
objectFit: 'contain'
}}
alt='AI'
src={provider.icon}
/>
</div>
</ListItemAvatar>
<ListItemText
sx={{ ml: 1 }}
primary={provider.label}
secondary={
<a target='_blank' rel='noreferrer' href={provider.url}>
{provider.url}
</a>
}
/>
{analytic[provider.name] && analytic[provider.name].status && (
<div
style={{
display: 'flex',
flexDirection: 'row',
alignContent: 'center',
alignItems: 'center',
background: '#d8f3dc',
borderRadius: 15,
padding: 5,
paddingLeft: 7,
paddingRight: 7,
marginRight: 10
}}
>
<div
style={{
width: 15,
height: 15,
borderRadius: '50%',
backgroundColor: '#70e000'
}}
/>
<span style={{ color: '#006400', marginLeft: 10 }}>ON</span>
</div>
)}
</ListItem>
</AccordionSummary>
<AccordionDetails>
{provider.inputs.map((inputParam, index) => (
<Box key={index} sx={{ p: 2 }}>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<Typography>
{inputParam.label}
{!inputParam.optional && <span style={{ color: 'red' }}>&nbsp;*</span>}
{inputParam.description && (
<TooltipWithParser style={{ marginLeft: 10 }} title={inputParam.description} />
)}
</Typography>
</div>
{providerExpanded[provider.name] && inputParam.type === 'credential' && (
<CredentialInputHandler
data={analytic[provider.name] ? { credential: analytic[provider.name].credentialId } : {}}
inputParam={inputParam}
onSelect={(newValue) => setValue(newValue, provider.name, 'credentialId')}
/>
)}
{providerExpanded[provider.name] && inputParam.type === 'boolean' && (
<SwitchInput
onChange={(newValue) => setValue(newValue, provider.name, inputParam.name)}
value={
analytic[provider.name]
? analytic[provider.name][inputParam.name]
: inputParam.default ?? false
}
/>
)}
{providerExpanded[provider.name] &&
(inputParam.type === 'string' ||
inputParam.type === 'password' ||
inputParam.type === 'number') && (
<Input
inputParam={inputParam}
onChange={(newValue) => setValue(newValue, provider.name, inputParam.name)}
value={
analytic[provider.name]
? analytic[provider.name][inputParam.name]
: inputParam.default ?? ''
}
/>
)}
</Box>
))}
</AccordionDetails>
</Accordion>
))}
</DialogContent>
<DialogActions>
<StyledButton variant='contained' onClick={onSave}>
Save
</StyledButton>
</DialogActions>
</Dialog>
) : null
return createPortal(component, portalElement)
}
AnalyseFlowDialog.propTypes = {
show: PropTypes.bool,
dialogProps: PropTypes.object,
onCancel: PropTypes.func
}
export default AnalyseFlowDialog
packages/ui/src/ui-component/switch/Switch.js
+1 -1
View File
@@ -22,7 +22,7 @@ export const SwitchInput = ({ value, onChange, disabled = false }) => {
}
SwitchInput.propTypes = {
value: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
onChange: PropTypes.func,
disabled: PropTypes.bool
}
packages/ui/src/views/canvas/CanvasHeader.js
+10
View File
@@ -14,6 +14,7 @@ import { IconSettings, IconChevronLeft, IconDeviceFloppy, IconPencil, IconCheck,
import Settings from 'views/settings'
import SaveChatflowDialog from 'ui-component/dialog/SaveChatflowDialog'
import APICodeDialog from 'views/chatflows/APICodeDialog'
import AnalyseFlowDialog from 'ui-component/dialog/AnalyseFlowDialog'
// API
import chatflowsApi from 'api/chatflows'
@@ -41,6 +42,8 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
const [flowDialogOpen, setFlowDialogOpen] = useState(false)
const [apiDialogOpen, setAPIDialogOpen] = useState(false)
const [apiDialogProps, setAPIDialogProps] = useState({})
const [analyseDialogOpen, setAnalyseDialogOpen] = useState(false)
const [analyseDialogProps, setAnalyseDialogProps] = useState({})
const updateChatflowApi = useApi(chatflowsApi.updateChatflow)
const canvas = useSelector((state) => state.canvas)
@@ -50,6 +53,12 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
if (setting === 'deleteChatflow') {
handleDeleteFlow()
} else if (setting === 'analyseChatflow') {
setAnalyseDialogProps({
title: 'Analyse Chatflow',
chatflow: chatflow
})
setAnalyseDialogOpen(true)
} else if (setting === 'duplicateChatflow') {
try {
localStorage.setItem('duplicatedFlowData', chatflow.flowData)
@@ -357,6 +366,7 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
onConfirm={onConfirmSaveName}
/>
<APICodeDialog show={apiDialogOpen} dialogProps={apiDialogProps} onCancel={() => setAPIDialogOpen(false)} />
<AnalyseFlowDialog show={analyseDialogOpen} dialogProps={analyseDialogProps} onCancel={() => setAnalyseDialogOpen(false)} />
</>
)
}
packages/ui/src/views/credentials/AddEditCredentialDialog.js
+15 -6
View File
@@ -26,7 +26,7 @@ import useApi from 'hooks/useApi'
import useNotifier from 'utils/useNotifier'
// const
import { baseURL } from 'store/constant'
import { baseURL, REDACTED_CREDENTIAL_VALUE } from 'store/constant'
import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
const AddEditCredentialDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
@@ -118,7 +118,7 @@ const AddEditCredentialDialog = ({ show, dialogProps, onCancel, onConfirm }) =>
onConfirm(createResp.data.id)
}
} catch (error) {
const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
const errorData = typeof err === 'string' ? err : err.response.data || `${err.response.status}: ${err.response.statusText}`
enqueueSnackbar({
message: `Failed to add new Credential: ${errorData}`,
options: {
@@ -138,11 +138,20 @@ const AddEditCredentialDialog = ({ show, dialogProps, onCancel, onConfirm }) =>
const saveCredential = async () => {
try {
const saveResp = await credentialsApi.updateCredential(credential.id, {
const saveObj = {
name,
credentialName: componentCredential.name,
plainDataObj: credentialData
})
credentialName: componentCredential.name
}
let plainDataObj = {}
for (const key in credentialData) {
if (credentialData[key] !== REDACTED_CREDENTIAL_VALUE) {
plainDataObj[key] = credentialData[key]
}
}
if (Object.keys(plainDataObj).length) saveObj.plainDataObj = plainDataObj
const saveResp = await credentialsApi.updateCredential(credential.id, saveObj)
if (saveResp.data) {
enqueueSnackbar({
message: 'Credential saved',