- update LangchainJS version

- add types & interfaces

- small ui bug fix

- update marketplace files

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

@@ -3,15 +3,21 @@ import { Handle, Position, useUpdateNodeInternals } from 'reactflow'
 import { useEffect, useRef, useState, useContext } from 'react'
 
 // material-ui
-import { useTheme } from '@mui/material/styles'
+import { useTheme, styled } from '@mui/material/styles'
 import { Box, Typography, Tooltip } from '@mui/material'
-
+import { tooltipClasses } from '@mui/material/Tooltip'
 import { Dropdown } from 'ui-component/dropdown/Dropdown'
 import { Input } from 'ui-component/input/Input'
 import { File } from 'ui-component/file/File'
 import { flowContext } from 'store/context/ReactFlowContext'
 import { isValidConnection } from 'utils/genericHelper'
 
+const CustomWidthTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)({
+    [`& .${tooltipClasses.tooltip}`]: {
+        maxWidth: 500
+    }
+})
+
 // ===========================|| NodeInputHandler ||=========================== //
 
 const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false }) => {
@@ -36,14 +42,7 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false }) =
         <div ref={ref}>
             {inputAnchor && (
                 <>
-                    <Tooltip
-                        placement='left'
-                        title={
-                            <Typography sx={{ color: 'white', p: 1 }} variant='h5'>
-                                {'Type: ' + inputAnchor.type}
-                            </Typography>
-                        }
-                    >
+                    <CustomWidthTooltip placement='left' title={inputAnchor.type}>
                         <Handle
                             type='target'
                             position={Position.Left}
@@ -57,7 +56,7 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false }) =
                                 top: position
                             }}
                         />
-                    </Tooltip>
+                    </CustomWidthTooltip>
                     <Box sx={{ p: 2 }}>
                         <Typography>
                             {inputAnchor.label}

packages/ui/src/views/canvas/NodeOutputHandler.js

@@ -3,11 +3,18 @@ import { Handle, Position, useUpdateNodeInternals } from 'reactflow'
 import { useEffect, useRef, useState, useContext } from 'react'
 
 // material-ui
-import { useTheme } from '@mui/material/styles'
+import { useTheme, styled } from '@mui/material/styles'
 import { Box, Typography, Tooltip } from '@mui/material'
+import { tooltipClasses } from '@mui/material/Tooltip'
 import { flowContext } from 'store/context/ReactFlowContext'
 import { isValidConnection } from 'utils/genericHelper'
 
+const CustomWidthTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)({
+    [`& .${tooltipClasses.tooltip}`]: {
+        maxWidth: 500
+    }
+})
+
 // ===========================|| NodeOutputHandler ||=========================== //
 
 const NodeOutputHandler = ({ outputAnchor, data }) => {
@@ -34,14 +41,7 @@ const NodeOutputHandler = ({ outputAnchor, data }) => {
 
     return (
         <div ref={ref}>
-            <Tooltip
-                placement='right'
-                title={
-                    <Typography sx={{ color: 'white', p: 1 }} variant='h5'>
-                        {'Type: ' + outputAnchor.type}
-                    </Typography>
-                }
-            >
+            <CustomWidthTooltip placement='right' title={outputAnchor.type}>
                 <Handle
                     type='source'
                     position={Position.Right}
@@ -55,7 +55,7 @@ const NodeOutputHandler = ({ outputAnchor, data }) => {
                         top: position
                     }}
                 />
-            </Tooltip>
+            </CustomWidthTooltip>
             <Box sx={{ p: 2, textAlign: 'end' }}>
                 <Typography>{outputAnchor.label}</Typography>
             </Box>

packages/ui/src/views/chatmessage/ChatMessage.css

@@ -1,7 +1,3 @@
-.cloudform {
-    position: relative;
-}
-
 .messagelist {
     width: 100%;
     height: 100%;
@@ -113,13 +109,11 @@
     position: relative;
     flex-direction: column;
     padding: 10px;
-    max-width: 500px;
 }
 
 .cloud {
-    width: '100%';
-    max-width: 500px;
-    height: 73vh;
+    width: 400px;
+    height: calc(100vh - 260px);
     border-radius: 0.5rem;
     display: flex;
     justify-content: center;

packages/ui/src/views/chatmessage/ChatMessage.js

@@ -336,13 +336,13 @@ export const ChatMessage = ({ chatflowid }) => {
                                     </div>
                                     <Divider />
                                     <div className='center'>
-                                        <div className='cloudform'>
-                                            <form onSubmit={handleSubmit}>
+                                        <div style={{ width: '100%' }}>
+                                            <form style={{ width: '100%' }} onSubmit={handleSubmit}>
                                                 <OutlinedInput
                                                     inputRef={inputRef}
                                                     // eslint-disable-next-line
                                                     autoFocus
-                                                    sx={{ width: '50vh' }}
+                                                    sx={{ width: '100%' }}
                                                     disabled={loading || !chatflowid}
                                                     onKeyDown={handleEnter}
                                                     id='userInput'