chore: add auto-link generation for stickies

apps/ui/src/views/journey/steps/Sticky.tsx

@@ -7,6 +7,24 @@ interface StickyConfig {
     text?: string
 }
 
+const TextAutoLink = ({ text }: { text: string }) => {
+    const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\\-]{1,61}[a-z0-9])?\.[^\\.|\s])+[a-z\\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\\/~#&=;%+?\-\\(\\)]*)/gi
+    return (
+        <>
+            {text.split(delimiter).map(word => {
+                const match = word.match(delimiter)
+                if (match) {
+                    const url = match[0]
+                    return (
+                        <a key={url} target="_blank" href={url.startsWith('http') ? url : `https://${url}`} rel="noreferrer">{url}</a>
+                    )
+                }
+                return word
+            })}
+        </>
+    )
+}
+
 export const stickyStep: JourneyStepType<StickyConfig> = {
     name: 'sticky',
     icon: <StickyStepIcon />,
@@ -17,7 +35,7 @@ export const stickyStep: JourneyStepType<StickyConfig> = {
     }) {
         return (
             <div style={{ maxWidth: 300 }}>
-                {value.text}
+                <TextAutoLink text={value.text ?? ''} />
             </div>
         )
     },