From d36d28906bb60f11c76c00a1e932acd263e9249e Mon Sep 17 00:00:00 2001
From: Louis Beaumont <louis.beaumont@gmail.com>
Date: Fri, 27 Sep 2024 15:50:59 -0700
Subject: [PATCH] chore: improve pipe conf rendering

---
 .../pipe.json                                 |  4 +-
 .../pipe.json                                 | 12 ++---
 .../typescript/pipe-screen-to-crm/pipe.json   | 12 ++---
 .../components/pipe-config-form.tsx           | 52 ++++++++++++++++++-
 4 files changed, 65 insertions(+), 15 deletions(-)

diff --git a/examples/typescript/pipe-llama32-sync-user-conversation-to-notion/pipe.json b/examples/typescript/pipe-llama32-sync-user-conversation-to-notion/pipe.json
index 93ff50b0..959826d9 100644
--- a/examples/typescript/pipe-llama32-sync-user-conversation-to-notion/pipe.json
+++ b/examples/typescript/pipe-llama32-sync-user-conversation-to-notion/pipe.json
@@ -34,13 +34,13 @@
       "name": "notionApiKey",
       "type": "string",
       "default": "<fill your notion api key here>",
-      "description": "notion api key for authentication"
+      "description": "notion api key for authentication https://www.notion.so/my-integrations"
     },
     {
       "name": "notionDatabaseId",
       "type": "string",
       "default": "<fill your notion database id here>",
-      "description": "id of the notion database to sync conversations to"
+      "description": "id of the notion database to sync conversations to eg https://www.notion.so/your-workspace/database-id?v=..."
     },
     {
       "name": "customSummaryPrompt",
diff --git a/examples/typescript/pipe-phi3.5-engineering-team-logs/pipe.json b/examples/typescript/pipe-phi3.5-engineering-team-logs/pipe.json
index 23a65c9a..11f7f6cc 100644
--- a/examples/typescript/pipe-phi3.5-engineering-team-logs/pipe.json
+++ b/examples/typescript/pipe-phi3.5-engineering-team-logs/pipe.json
@@ -7,16 +7,16 @@
       "description": "Interval in seconds to stream data"
     },
     {
-      "name": "notionDatabaseId",
+      "name": "notionApiKey",
       "type": "string",
-      "default": "<fill your notion database id here>",
-      "description": "Notion Database ID"
+      "default": "<fill your notion api key here>",
+      "description": "notion api key for authentication https://www.notion.so/my-integrations"
     },
     {
-      "name": "notionApiKey",
+      "name": "notionDatabaseId",
       "type": "string",
-      "default": "<fill your notion api key here>",
-      "description": "Notion API Key"
+      "default": "<fill your notion database id here>",
+      "description": "id of the notion database to sync conversations to eg https://www.notion.so/your-workspace/database-id?v=..."
     },
     {
       "name": "ollamaApiUrl",
diff --git a/examples/typescript/pipe-screen-to-crm/pipe.json b/examples/typescript/pipe-screen-to-crm/pipe.json
index 4fc31a3f..cdc4219f 100644
--- a/examples/typescript/pipe-screen-to-crm/pipe.json
+++ b/examples/typescript/pipe-screen-to-crm/pipe.json
@@ -7,16 +7,16 @@
       "description": "Interval in seconds to stream data"
     },
     {
-      "name": "notionDatabaseId",
+      "name": "notionApiKey",
       "type": "string",
-      "default": "<fill your notion database id here>",
-      "description": "Notion Database ID"
+      "default": "<fill your notion api key here>",
+      "description": "notion api key for authentication https://www.notion.so/my-integrations"
     },
     {
-      "name": "notionApiKey",
+      "name": "notionDatabaseId",
       "type": "string",
-      "default": "<fill your notion api key here>",
-      "description": "Notion API Key"
+      "default": "<fill your notion database id here>",
+      "description": "id of the notion database to sync conversations to eg https://www.notion.so/your-workspace/database-id?v=..."
     },
     {
       "name": "ollamaApiUrl",
diff --git a/screenpipe-app-tauri/components/pipe-config-form.tsx b/screenpipe-app-tauri/components/pipe-config-form.tsx
index b02082cb..6e8059f3 100644
--- a/screenpipe-app-tauri/components/pipe-config-form.tsx
+++ b/screenpipe-app-tauri/components/pipe-config-form.tsx
@@ -22,6 +22,10 @@ import {
   SelectValue,
 } from "./ui/select";
 import { HelpCircle } from "lucide-react";
+import { MemoizedReactMarkdown } from "./markdown";
+import { CodeBlock } from "./ui/codeblock";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
 
 type PipeConfigFormProps = {
   pipe: Pipe;
@@ -305,7 +309,53 @@ export const PipeConfigForm: React.FC<PipeConfigFormProps> = ({
             {field.name} ({field.type})
           </Label>
           {renderConfigInput(field)}
-          <p className="text-sm text-gray-500">{field.description}</p>
+          <MemoizedReactMarkdown
+            className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 w-full"
+            remarkPlugins={[remarkGfm, remarkMath]}
+            components={{
+              p({ children }) {
+                return <p className="mb-2 last:mb-0">{children}</p>;
+              },
+              a({ node, href, children, ...props }) {
+                return (
+                  <a
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    {...props}
+                  >
+                    {children}
+                  </a>
+                );
+              },
+              code({ node, className, children, ...props }) {
+                const content = String(children).replace(/\n$/, "");
+                const match = /language-(\w+)/.exec(className || "");
+
+                if (!match) {
+                  return (
+                    <code
+                      className="px-1 py-0.5 rounded-sm font-mono text-sm"
+                      {...props}
+                    >
+                      {content}
+                    </code>
+                  );
+                }
+
+                return (
+                  <CodeBlock
+                    key={Math.random()}
+                    language={(match && match[1]) || ""}
+                    value={content}
+                    {...props}
+                  />
+                );
+              },
+            }}
+          >
+            {field.description}
+          </MemoizedReactMarkdown>
         </div>
       ))}
       <Button type="submit">save configuration</Button>