fix: sf connector docs

Author: evan-onyx

web/src/components/Field.tsx

@@ -37,6 +37,7 @@ import { transformLinkUri } from "@/lib/utils";
 import FileInput from "@/app/admin/connectors/[connector]/pages/ConnectorInput/FileInput";
 import { DatePicker } from "./ui/datePicker";
 import { Textarea, TextareaProps } from "./ui/textarea";
+import { RichTextSubtext } from "./RichTextSubtext";
 
 export function SectionHeader({
   children,
@@ -85,6 +86,18 @@ export function SubLabel({ children }: { children: string | JSX.Element }) {
   // Add whitespace-pre-wrap for multiline descriptions (when children is a string with newlines)
   const hasNewlines = typeof children === "string" && children.includes("\n");
 
+  // If children is a string, use RichTextSubtext to parse and render links
+  if (typeof children === "string") {
+    return (
+      <div className="text-sm text-neutral-600 dark:text-neutral-300 mb-2">
+        <RichTextSubtext
+          text={children}
+          className={hasNewlines ? "whitespace-pre-wrap" : ""}
+        />
+      </div>
+    );
+  }
+
   return (
     <div
       className={`text-sm text-neutral-600 dark:text-neutral-300 mb-2 ${hasNewlines ? "whitespace-pre-wrap" : ""}`}

web/src/components/RichTextSubtext.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+
+interface RichTextSubtextProps {
+  text: string;
+  className?: string;
+}
+
+/**
+ * Component that renders text with clickable links.
+ * Detects URLs in the text and converts them to clickable links.
+ * Also supports markdown-style links like [text](url).
+ */
+export function RichTextSubtext({
+  text,
+  className = "",
+}: RichTextSubtextProps) {
+  // Function to parse text and create React elements
+  const parseText = (input: string): React.ReactNode[] => {
+    const elements: React.ReactNode[] = [];
+
+    // Regex to match markdown links [text](url) and plain URLs
+    const combinedRegex = /(\[([^\]]+)\]\(([^)]+)\))|(https?:\/\/[^\s]+)/g;
+
+    let lastIndex = 0;
+    let match;
+    let key = 0;
+
+    while ((match = combinedRegex.exec(input)) !== null) {
+      // Add text before the match
+      if (match.index > lastIndex) {
+        elements.push(
+          <span key={`text-${key++}`}>
+            {input.slice(lastIndex, match.index)}
+          </span>
+        );
+      }
+
+      if (match[1]) {
+        // Markdown-style link [text](url)
+        const linkText = match[2];
+        const url = match[3];
+        elements.push(
+          <a
+            key={`link-${key++}`}
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-link hover:text-link-hover underline"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {linkText}
+          </a>
+        );
+      } else if (match[4]) {
+        // Plain URL
+        const url = match[4];
+        elements.push(
+          <a
+            key={`link-${key++}`}
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-link hover:text-link-hover underline"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {url}
+          </a>
+        );
+      }
+
+      lastIndex = match.index + match[0].length;
+    }
+
+    // Add remaining text after the last match
+    if (lastIndex < input.length) {
+      elements.push(
+        <span key={`text-${key++}`}>{input.slice(lastIndex)}</span>
+      );
+    }
+
+    return elements;
+  };
+
+  return <div className={className}>{parseText(text)}</div>;
+}

web/src/lib/connectors/connectors.tsx

@@ -638,15 +638,12 @@ Example:
   "Account": {
     "fields": ["Id", "Name", "Industry"],
     "associations": {
-      "Contact": {
-        "fields": ["Id", "FirstName", "LastName", "Email"],
-        "associations": {}
-      }
+      "Contact": ["Id", "FirstName", "LastName", "Email"]
     }
   }
 }
 
-See our docs for more details.`,
+[See our docs](https://docs.onyx.app/connectors/salesforce) for more details.`,
               },
             ],
           },