Chore/Update issue templates and add new tools (#4687)

* Enhancement: Update issue templates and add new tools

- Updated bug report template to include a default label of 'bug'.
- Updated feature request template to include a default label of 'enhancement'.
- Added new credential class for Agentflow API.
- Enhanced Agent and HTTP nodes to improve tool management and error handling.
- Added deprecation badges to several agent and chain classes.
- Introduced new tools for handling requests (GET, POST, DELETE, PUT) with improved error handling.
- Added new chatflows and agentflows for various use cases, including document QnA and translation.
- Updated UI components for better handling of agent flows and marketplace interactions.
- Refactored utility functions for improved functionality and clarity.

* Refactor: Remove beta badge and streamline template title assignment

- Removed the 'BETA' badge from the ExtractMetadataRetriever class.
- Simplified the title assignment in the agentflowv2 generator by using a variable instead of inline string manipulation.

packages/ui/src/ui-component/button/FlowListMenu.jsx

@@ -166,7 +166,7 @@ export default function FlowListMenu({ chatflow, isAgentCanvas, isAgentflowV2, s
         }
         try {
             await updateChatflowApi.request(chatflow.id, updateBody)
-            if (isAgentCanvas && localStorage.getItem('agentFlowVersion') === 'v2') {
+            if (isAgentCanvas && isAgentflowV2) {
                 await updateFlowsApi.request('AGENTFLOW')
             } else {
                 await updateFlowsApi.request(isAgentCanvas ? 'MULTIAGENT' : undefined)
@@ -241,7 +241,7 @@ export default function FlowListMenu({ chatflow, isAgentCanvas, isAgentflowV2, s
         if (isConfirmed) {
             try {
                 await chatflowsApi.deleteChatflow(chatflow.id)
-                if (isAgentCanvas && localStorage.getItem('agentFlowVersion') === 'v2') {
+                if (isAgentCanvas && isAgentflowV2) {
                     await updateFlowsApi.request('AGENTFLOW')
                 } else {
                     await updateFlowsApi.request(isAgentCanvas ? 'MULTIAGENT' : undefined)

packages/ui/src/ui-component/input/RichInput.jsx

@@ -37,7 +37,7 @@ const extensions = (availableNodesForVariable, availableState, acceptNodeOutputA
 ]
 
 // Add styled component for editor wrapper
-const StyledEditorContent = styled(EditorContent)(({ theme, rows }) => ({
+const StyledEditorContent = styled(EditorContent)(({ theme, rows, disabled }) => ({
     '& .ProseMirror': {
         padding: '0px 14px',
         height: rows ? `${rows * 1.4375}rem` : '2.4rem',
@@ -45,30 +45,26 @@ const StyledEditorContent = styled(EditorContent)(({ theme, rows }) => ({
         overflowX: rows ? 'auto' : 'hidden',
         lineHeight: rows ? '1.4375em' : '0.875em',
         fontWeight: 500,
-        color: theme.palette.grey[900],
+        color: disabled ? theme.palette.action.disabled : theme.palette.grey[900],
         border: `1px solid ${theme.palette.grey[900] + 25}`,
         borderRadius: '10px',
         backgroundColor: theme.palette.textBackground.main,
         boxSizing: 'border-box',
         whiteSpace: rows ? 'pre-wrap' : 'nowrap',
         '&:hover': {
-            borderColor: theme.palette.text.primary,
-            cursor: 'text'
+            borderColor: disabled ? `${theme.palette.grey[900] + 25}` : theme.palette.text.primary,
+            cursor: disabled ? 'default' : 'text'
         },
         '&:focus': {
-            borderColor: theme.palette.primary.main,
+            borderColor: disabled ? `${theme.palette.grey[900] + 25}` : theme.palette.primary.main,
             outline: 'none'
         },
-        '&[disabled]': {
-            backgroundColor: theme.palette.action.disabledBackground,
-            color: theme.palette.action.disabled
-        },
         // Placeholder for first paragraph when editor is empty
         '& p.is-editor-empty:first-of-type::before': {
             content: 'attr(data-placeholder)',
             float: 'left',
-            color: theme.palette.text.primary,
-            opacity: 0.4,
+            color: disabled ? theme.palette.action.disabled : theme.palette.text.primary,
+            opacity: disabled ? 0.6 : 0.4,
             pointerEvents: 'none',
             height: 0
         }
@@ -121,7 +117,7 @@ export const RichInput = ({ inputParam, value, nodes, edges, nodeId, onChange, d
 
     return (
         <Box sx={{ mt: 1, border: '' }}>
-            <StyledEditorContent editor={editor} rows={inputParam?.rows} />
+            <StyledEditorContent editor={editor} rows={inputParam?.rows} disabled={disabled} />
         </Box>
     )
 }

packages/ui/src/ui-component/input/suggestionOption.js

@@ -59,6 +59,12 @@ export const suggestionOptions = (
                 description: 'Past conversation history between user and AI',
                 category: 'Chat Context'
             },
+            {
+                id: 'current_date_time',
+                mentionLabel: 'current_date_time',
+                description: 'Current date and time',
+                category: 'Chat Context'
+            },
             {
                 id: 'runtime_messages_length',
                 mentionLabel: 'runtime_messages_length',

packages/ui/src/ui-component/markdown/Markdown.css

@@ -19,3 +19,45 @@
     border-width: 1px !important;
     padding: 10px !important;
 }
+
+.react-markdown h1,
+.react-markdown h2,
+.react-markdown h3,
+.react-markdown h4,
+.react-markdown h5,
+.react-markdown h6 {
+    line-height: 1.4;
+    margin: 0.8em 0 0.4em 0;
+    font-weight: 600;
+}
+
+.react-markdown h1 {
+    font-size: 1.8em;
+}
+
+.react-markdown h2 {
+    font-size: 1.5em;
+}
+
+.react-markdown h3 {
+    font-size: 1.3em;
+}
+
+.react-markdown h4 {
+    font-size: 1.1em;
+}
+
+.react-markdown h5 {
+    font-size: 1em;
+    font-weight: 700;
+}
+
+.react-markdown h6 {
+    font-size: 0.9em;
+    font-weight: 700;
+}
+
+.react-markdown p {
+    line-height: 1.6;
+    margin: 0.5em 0;
+}

packages/ui/src/ui-component/table/FlowListTable.jsx

@@ -87,7 +87,7 @@ export const FlowListTable = ({
         if (!isAgentCanvas) {
             return `/canvas/${row.id}`
         } else {
-            return localStorage.getItem('agentFlowVersion') === 'v2' ? `/v2/agentcanvas/${row.id}` : `/agentcanvas/${row.id}`
+            return isAgentflowV2 ? `/v2/agentcanvas/${row.id}` : `/agentcanvas/${row.id}`
         }
     }
 

packages/ui/src/ui-component/table/MarketplaceTable.jsx

@@ -213,7 +213,13 @@ export const MarketplaceTable = ({
                                                             .split(';')
                                                             .map((tag, index) => (
                                                                 <Chip
-                                                                    color={tag === 'POPULAR' ? 'primary' : 'error'}
+                                                                    color={
+                                                                        tag === 'POPULAR'
+                                                                            ? 'primary'
+                                                                            : tag === 'DEPRECATED'
+                                                                            ? 'warning'
+                                                                            : 'error'
+                                                                    }
                                                                     key={index}
                                                                     size='small'
                                                                     label={tag.toUpperCase()}

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

@@ -1057,7 +1057,7 @@ const NodeInputHandler = ({
                                     style={{
                                         marginTop: '10px',
                                         border: '1px solid',
-                                        borderColor: theme.palette.grey['300'],
+                                        borderColor: theme.palette.grey[900] + 25,
                                         borderRadius: '6px',
                                         height: inputParam.rows ? '100px' : '200px'
                                     }}
@@ -1077,7 +1077,8 @@ const NodeInputHandler = ({
                         )}
 
                         {(inputParam.type === 'string' || inputParam.type === 'password' || inputParam.type === 'number') &&
-                            (inputParam?.acceptVariable && window.location.href.includes('v2/agentcanvas') ? (
+                            (inputParam?.acceptVariable &&
+                            (window.location.href.includes('v2/agentcanvas') || window.location.href.includes('v2/marketplace')) ? (
                                 <RichInput
                                     key={data.inputs[inputParam.name]}
                                     placeholder={inputParam.placeholder}

packages/ui/src/views/marketplaces/index.jsx

@@ -57,7 +57,7 @@ import { gridSpacing } from '@/store/constant'
 import { useError } from '@/store/context/ErrorContext'
 
 const badges = ['POPULAR', 'NEW']
-const types = ['Chatflow', 'Agentflow', 'AgentflowV2', 'Tool']
+const types = ['Chatflow', 'AgentflowV2', 'Tool']
 const framework = ['Langchain', 'LlamaIndex']
 const MenuProps = {
     PaperProps: {