Merge pull request FlowiseAI#671 from FlowiseAI/feature/Hyperlink

add hyperlink

Author: HenryHengZJ

packages/ui/src/utils/genericHelper.js

@@ -401,3 +401,11 @@ export const getInputVariables = (paramValue) => {
     }
     return inputVariables
 }
+
+export const isValidURL = (url) => {
+    try {
+        return new URL(url)
+    } catch (err) {
+        return undefined
+    }
+}

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

@@ -30,6 +30,7 @@ import { baseURL, maxScroll } from 'store/constant'
 
 import robotPNG from 'assets/images/robot.png'
 import userPNG from 'assets/images/account.png'
+import { isValidURL } from 'utils/genericHelper'
 
 export const ChatMessage = ({ open, chatflowid, isDialog }) => {
     const theme = useTheme()
@@ -59,6 +60,24 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
         setSourceDialogOpen(true)
     }
 
+    const onURLClick = (data) => {
+        window.open(data, '_blank')
+    }
+
+    const removeDuplicateURL = (message) => {
+        const visitedURLs = []
+        const newSourceDocuments = []
+        message.sourceDocuments.forEach((source) => {
+            if (isValidURL(source.metadata.source) && !visitedURLs.includes(source.metadata.source)) {
+                visitedURLs.push(source.metadata.source)
+                newSourceDocuments.push(source)
+            } else if (!isValidURL(source.metadata.source)) {
+                newSourceDocuments.push(source)
+            }
+        })
+        return newSourceDocuments
+    }
+
     const scrollToBottom = () => {
         if (ps.current) {
             ps.current.scrollTo({ top: maxScroll })
@@ -319,17 +338,24 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                                             </div>
                                             {message.sourceDocuments && (
                                                 <div style={{ display: 'block', flexDirection: 'row', width: '100%' }}>
-                                                    {message.sourceDocuments.map((source, index) => {
+                                                    {removeDuplicateURL(message).map((source, index) => {
+                                                        const URL = isValidURL(source.metadata.source)
                                                         return (
                                                             <Chip
                                                                 size='small'
                                                                 key={index}
-                                                                label={`${source.pageContent.substring(0, 15)}...`}
+                                                                label={
+                                                                    URL
+                                                                        ? `${(URL.hostname + URL.pathname).substring(0, 15)}...`
+                                                                        : `${source.pageContent.substring(0, 15)}...`
+                                                                }
                                                                 component='a'
                                                                 sx={{ mr: 1, mb: 1 }}
                                                                 variant='outlined'
                                                                 clickable
-                                                                onClick={() => onSourceDialogClick(source)}
+                                                                onClick={() =>
+                                                                    URL ? onURLClick(source.metadata.source) : onSourceDialogClick(source)
+                                                                }
                                                             />
                                                         )
                                                     })}