Feature/OpenAI Assistant V2 (#2258)

* add gpt4 turbo to assistant

* OpenAI Assistant V2

* update langfuse handler

packages/ui/src/ui-component/dialog/ViewMessagesDialog.jsx

@@ -96,6 +96,7 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
     const [chatMessages, setChatMessages] = useState([])
     const [stats, setStats] = useState([])
     const [selectedMessageIndex, setSelectedMessageIndex] = useState(0)
+    const [selectedChatId, setSelectedChatId] = useState('')
     const [sourceDialogOpen, setSourceDialogOpen] = useState(false)
     const [sourceDialogProps, setSourceDialogProps] = useState({})
     const [chatTypeFilter, setChatTypeFilter] = useState([])
@@ -283,6 +284,7 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
         const loadedMessages = []
         for (let i = 0; i < chatmessages.length; i += 1) {
             const chatmsg = chatmessages[i]
+            setSelectedChatId(chatmsg.chatId)
             if (!prevDate) {
                 prevDate = chatmsg.createdDate.split('T')[0]
                 loadedMessages.push({
@@ -383,8 +385,8 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
     const downloadFile = async (fileAnnotation) => {
         try {
             const response = await axios.post(
-                `${baseURL}/api/v1/openai-assistants-file`,
-                { fileName: fileAnnotation.fileName },
+                `${baseURL}/api/v1/openai-assistants-file/download`,
+                { fileName: fileAnnotation.fileName, chatflowId: dialogProps.chatflow.id, chatId: selectedChatId },
                 { responseType: 'blob' }
             )
             const blob = new Blob([response.data], { type: response.headers['content-type'] })
@@ -444,6 +446,7 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
             setChatMessages([])
             setChatTypeFilter([])
             setSelectedMessageIndex(0)
+            setSelectedChatId('')
             setStartDate(new Date().setMonth(new Date().getMonth() - 1))
             setEndDate(new Date())
             setStats([])

packages/ui/src/ui-component/dropdown/Dropdown.jsx

@@ -18,7 +18,7 @@ const StyledPopper = styled(Popper)({
     }
 })
 
-export const Dropdown = ({ name, value, options, onSelect, disabled = false, disableClearable = false }) => {
+export const Dropdown = ({ name, value, loading, options, onSelect, disabled = false, disableClearable = false }) => {
     const customization = useSelector((state) => state.customization)
     const findMatchingOptions = (options = [], value) => options.find((option) => option.name === value)
     const getDefaultOptionValue = () => ''
@@ -31,6 +31,7 @@ export const Dropdown = ({ name, value, options, onSelect, disabled = false, dis
                 disabled={disabled}
                 disableClearable={disableClearable}
                 size='small'
+                loading={loading}
                 options={options || []}
                 value={findMatchingOptions(options, internalValue) || getDefaultOptionValue()}
                 onChange={(e, selection) => {
@@ -61,6 +62,7 @@ export const Dropdown = ({ name, value, options, onSelect, disabled = false, dis
 Dropdown.propTypes = {
     name: PropTypes.string,
     value: PropTypes.string,
+    loading: PropTypes.bool,
     options: PropTypes.array,
     onSelect: PropTypes.func,
     disabled: PropTypes.bool,

packages/ui/src/ui-component/file/File.jsx

@@ -5,7 +5,7 @@ import { FormControl, Button } from '@mui/material'
 import { IconUpload } from '@tabler/icons'
 import { getFileName } from '@/utils/genericHelper'
 
-export const File = ({ value, fileType, onChange, disabled = false }) => {
+export const File = ({ value, formDataUpload, fileType, onChange, onFormDataChange, disabled = false }) => {
     const theme = useTheme()
 
     const [myValue, setMyValue] = useState(value ?? '')
@@ -54,17 +54,43 @@ export const File = ({ value, fileType, onChange, disabled = false }) => {
         }
     }
 
+    const handleFormDataUpload = async (e) => {
+        if (!e.target.files) return
+
+        if (e.target.files.length === 1) {
+            const file = e.target.files[0]
+            const { name } = file
+            const formData = new FormData()
+            formData.append('files', file)
+            setMyValue(`,filename:${name}`)
+            onChange(`,filename:${name}`)
+            onFormDataChange(formData)
+        } else if (e.target.files.length > 0) {
+            const formData = new FormData()
+            const values = []
+            for (let i = 0; i < e.target.files.length; i++) {
+                formData.append('files', e.target.files[i])
+                values.push(`,filename:${e.target.files[i].name}`)
+            }
+            setMyValue(JSON.stringify(values))
+            onChange(JSON.stringify(values))
+            onFormDataChange(formData)
+        }
+    }
+
     return (
         <FormControl sx={{ mt: 1, width: '100%' }} size='small'>
-            <span
-                style={{
-                    fontStyle: 'italic',
-                    color: theme.palette.grey['800'],
-                    marginBottom: '1rem'
-                }}
-            >
-                {myValue ? getFileName(myValue) : 'Choose a file to upload'}
-            </span>
+            {!formDataUpload && (
+                <span
+                    style={{
+                        fontStyle: 'italic',
+                        color: theme.palette.grey['800'],
+                        marginBottom: '1rem'
+                    }}
+                >
+                    {myValue ? getFileName(myValue) : 'Choose a file to upload'}
+                </span>
+            )}
             <Button
                 disabled={disabled}
                 variant='outlined'
@@ -74,7 +100,13 @@ export const File = ({ value, fileType, onChange, disabled = false }) => {
                 sx={{ marginRight: '1rem' }}
             >
                 {'Upload File'}
-                <input type='file' multiple accept={fileType} hidden onChange={(e) => handleFileUpload(e)} />
+                <input
+                    type='file'
+                    multiple
+                    accept={fileType}
+                    hidden
+                    onChange={(e) => (formDataUpload ? handleFormDataUpload(e) : handleFileUpload(e))}
+                />
             </Button>
         </FormControl>
     )
@@ -83,6 +115,8 @@ export const File = ({ value, fileType, onChange, disabled = false }) => {
 File.propTypes = {
     value: PropTypes.string,
     fileType: PropTypes.string,
+    formDataUpload: PropTypes.bool,
     onChange: PropTypes.func,
+    onFormDataChange: PropTypes.func,
     disabled: PropTypes.bool
 }