diff --git a/packages/ui/src/ui-component/dialog/PromptLangsmithHubDialog.js b/packages/ui/src/ui-component/dialog/PromptLangsmithHubDialog.js
new file mode 100644
index 00000000..16d5c30f
--- /dev/null
+++ b/packages/ui/src/ui-component/dialog/PromptLangsmithHubDialog.js
@@ -0,0 +1,368 @@
+import { createPortal } from 'react-dom'
+import { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import {
+ Box,
+ Button,
+ Card,
+ CardContent,
+ Chip,
+ Dialog,
+ DialogContent,
+ DialogTitle,
+ Divider,
+ Grid,
+ InputLabel,
+ List,
+ ListItemButton,
+ ListItemText,
+ OutlinedInput,
+ Select,
+ Typography
+} 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 axios from 'axios'
+import ReactMarkdown from 'react-markdown'
+import CredentialInputHandler from '../../views/canvas/CredentialInputHandler'
+
+const PromptLangsmithHubDialog = ({ promptType, show, onCancel }) => {
+ const portalElement = document.getElementById('portal')
+ const dispatch = useDispatch()
+
+ useEffect(() => {
+ if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
+ else dispatch({ type: HIDE_CANVAS_DIALOG })
+ return () => dispatch({ type: HIDE_CANVAS_DIALOG })
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [show, dispatch])
+
+ const ITEM_HEIGHT = 48
+ const ITEM_PADDING_TOP = 8
+ const MenuProps = {
+ PaperProps: {
+ style: {
+ maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+ width: 250
+ }
+ }
+ }
+
+ const models = [
+ { id: 101, name: 'anthropic:claude-instant-1' },
+ { id: 102, name: 'anthropic:claude-instant-1.2' },
+ { id: 103, name: 'anthropic:claude-2' },
+ { id: 104, name: 'google:palm-2-chat-bison' },
+ { id: 105, name: 'google:palm-2-codechat-bison' },
+ { id: 106, name: 'google:palm-2-text-bison' },
+ { id: 107, name: 'meta:llama-2-13b-chat' },
+ { id: 108, name: 'meta:llama-2-70b-chat' },
+ { id: 109, name: 'openai:gpt-3.5-turbo' },
+ { id: 110, name: 'openai:gpt-4' },
+ { id: 111, name: 'openai:text-davinci-003' }
+ ]
+ const [modelName, setModelName] = useState([])
+
+ const usecases = [
+ { id: 201, name: 'Agents' },
+ { id: 202, name: 'Agent Stimulation' },
+ { id: 203, name: 'Autonomous agents' },
+ { id: 204, name: 'Classification' },
+ { id: 205, name: 'Chatbots' },
+ { id: 206, name: 'Code understanding' },
+ { id: 207, name: 'Code writing' },
+ { id: 208, name: 'Evaluation' },
+ { id: 209, name: 'Extraction' },
+ { id: 210, name: 'Interacting with APIs' },
+ { id: 211, name: 'Multi-modal' },
+ { id: 212, name: 'QA over documents' },
+ { id: 213, name: 'Self-checking' },
+ { id: 214, name: 'SQL' },
+ { id: 215, name: 'Summarization' },
+ { id: 216, name: 'Tagging' }
+ ]
+ const [usecase, setUsecase] = useState([])
+
+ const languages = [
+ { id: 301, name: 'Chinese' },
+ { id: 302, name: 'English' },
+ { id: 303, name: 'French' },
+ { id: 304, name: 'German' },
+ { id: 305, name: 'Russian' },
+ { id: 306, name: 'Spanish' }
+ ]
+ const [language, setLanguage] = useState([])
+ const [prompts, setPrompts] = useState([])
+ const [selectedPrompt, setSelectedPrompt] = useState({})
+
+ const [credentialId, setCredentialId] = useState('')
+
+ const handleListItemClick = (event, index) => {
+ setSelectedPrompt(prompts[index])
+ }
+
+ const fetchPrompts = async () => {
+ let tags = promptType === 'template' ? 'StringPromptTemplate&' : 'ChatPromptTemplate&'
+ modelName.forEach((item) => {
+ tags += `tags=${item.name}&`
+ })
+ usecase.forEach((item) => {
+ tags += `tags=${item.name}&`
+ })
+ language.forEach((item) => {
+ tags += `tags=${item.name}&`
+ })
+ const url = `https://web.hub.langchain.com/repos/?${tags}offset=0&limit=20&has_commits=true&sort_field=num_likes&sort_direction=desc&is_archived=false`
+ axios.get(url).then((response) => {
+ if (response.data.repos) {
+ setPrompts(response.data.repos)
+ // response.data.repos.forEach((item) => {
+ // console.log(item)
+ // })
+ }
+ })
+ // latestReleaseReq.then()
+ }
+ const removeDuplicates = (value) => {
+ let duplicateRemoved = []
+
+ value.forEach((item) => {
+ if (value.filter((o) => o.id === item.id).length === 1) {
+ duplicateRemoved.push(item)
+ }
+ })
+ return duplicateRemoved
+ }
+
+ const handleModelChange = (event) => {
+ const {
+ target: { value }
+ } = event
+
+ setModelName(removeDuplicates(value))
+ }
+
+ const handleUsecaseChange = (event) => {
+ const {
+ target: { value }
+ } = event
+
+ setUsecase(removeDuplicates(value))
+ }
+ const handleLanguageChange = (event) => {
+ const {
+ target: { value }
+ } = event
+
+ setLanguage(removeDuplicates(value))
+ }
+
+ const component = show ? (
+
+ ) : null
+
+ return createPortal(component, portalElement)
+}
+
+PromptLangsmithHubDialog.propTypes = {
+ promptType: PropTypes.string,
+ show: PropTypes.bool,
+ onCancel: PropTypes.func
+}
+
+export default PromptLangsmithHubDialog
diff --git a/packages/ui/src/views/canvas/NodeInputHandler.js b/packages/ui/src/views/canvas/NodeInputHandler.js
index 7eb31bdb..162455df 100644
--- a/packages/ui/src/views/canvas/NodeInputHandler.js
+++ b/packages/ui/src/views/canvas/NodeInputHandler.js
@@ -6,6 +6,7 @@ import { useSelector } from 'react-redux'
// material-ui
import { useTheme, styled } from '@mui/material/styles'
import { Box, Typography, Tooltip, IconButton, Button } from '@mui/material'
+import IconAutoFixHigh from '@mui/icons-material/AutoFixHigh'
import { tooltipClasses } from '@mui/material/Tooltip'
import { IconArrowsMaximize, IconEdit, IconAlertTriangle } from '@tabler/icons'
@@ -31,6 +32,7 @@ import { getInputVariables } from 'utils/genericHelper'
// const
import { FLOWISE_CREDENTIAL_ID } from 'store/constant'
+import PromptLangsmithHubDialog from '../../ui-component/dialog/PromptLangsmithHubDialog'
const EDITABLE_OPTIONS = ['selectedTool', 'selectedAssistant']
@@ -56,6 +58,7 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isA
const [reloadTimestamp, setReloadTimestamp] = useState(Date.now().toString())
const [showFormatPromptValuesDialog, setShowFormatPromptValuesDialog] = useState(false)
const [formatPromptValuesDialogProps, setFormatPromptValuesDialogProps] = useState({})
+ const [showPromptHubDialog, setShowPromptHubDialog] = useState(false)
const onExpandDialogClicked = (value, inputParam) => {
const dialogProp = {
@@ -69,6 +72,9 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isA
setShowExpandDialog(true)
}
+ const onShowPromptHubButtonClicked = () => {
+ setShowPromptHubDialog(true)
+ }
const onFormatPromptValuesClicked = (value, inputParam) => {
// Preset values if the field is format prompt values
let inputValue = value
@@ -209,6 +215,28 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isA
)}
+ {(inputParam.name === 'template' || inputParam.name === 'systemMessagePrompt') && (
+ <>
+
+ setShowPromptHubDialog(false)}
+ >
+
+ )}
{inputParam.label}
@@ -260,6 +288,7 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isA
}}
/>
)}
+
{inputParam.type === 'file' && (