[front] - feat: transform url in `InputBar` #11389

JulesBelveze · 2025-03-15T18:45:14Z

Description

The PR implements URL transformation in the input bar by leveraging Tiptap's extension system to detect and replace URLs with node references.

The implementation follows these key aspects:

Storage and Detection

Introduce two new Tiptap extensions:
- URLStorageExtension: Manages a non-blocking storage for pending URL transformations
- URLDetectionExtension: Handles URL detection in pasted content

Non-blocking Processing

When a URL is detected, its position and metadata are stored in the extension storage
Node search is triggered asynchronously
Transformation happens when node data becomes available

URL Transformation

Uses Tiptap's command system to replace text at stored positions
Transforms URLs into the format nodeTitle - nodePath (this is temporary as we want to display an icon)

This follows similar patterns to the existing MentionWithPasteExtension, ensuring consistency in the codebase.

sequenceDiagram
    participant User
    participant InputBar
    participant URLDetectionExt
    participant URLStorage
    participant SearchAPI
    participant URLHandler

    User->>InputBar: Paste URL
    InputBar->>URLDetectionExt: handlePaste event
    URLDetectionExt->>URLDetectionExt: extract nodeId
    
    alt has nodeId
        URLDetectionExt->>URLStorage: store URL position
        URLDetectionExt->>InputBar: trigger search
        InputBar->>SearchAPI: search node data
        
        alt node found
            SearchAPI-->>URLHandler: node data
            URLHandler->>URLStorage: get stored position
            URLHandler->>InputBar: replace text with formatted node
            URLStorage-->>URLStorage: cleanup
        end
    end

References:

https://github.com/dust-tt/tasks/issues/2355

Risk

Low behind FF

Deploy Plan

Deploy front

…cement in input bar editor - Implement useEffect to replace URLs with node titles when search results are available - Store pending URL node replacement information for later processing when data arrives - Handle paste events for URLs and trigger node ID retrieval and storage for replacement - Add storage management for URL to node title replacements within the editor extension - Enhance URLDetectionExtension to manage detection and storage of node replacement data - Include URLReplacementStorage extension in the custom editor setup for input bar

… implement storage for URL replacements - Created an extension to keep track of pending URL replacements within the editor - Added methods to add, retrieve, and clear replacement metadata, as well as set the current node ID

- Simplify the logic by removing direct mutation of editor state and URL replacement handling - Introduce useUrlHandler hook to manage URL detection and node selection process - Adjust import references to accommodate codebase restructuring - Update plugin handling for URL detection to utilize new URLStorage model

… handle URLs in conversation editor - Automatically format and replace pending URLs with node-specific text in the conversation editor - Cleanup pending URL entries after processing to keep the storage clean

- Introduce a new tiptap extension to manage URL states within the editor - Create a storage mechanism for pending URLs with their respective metadata such as node ID and position in the editor

…ve URLReplacementStorage extension - URLReplacementStorage extension is deleted, possibly due to its functionality being handled elsewhere or no longer needed - Associated types and methods for managing URL replacements within the editor have been removed

- Refactor URL replacement logic into a useCallback hook to optimize performance - Ensure editor commands are ready before attempting to replace the URL - Add error handling for failed URL replacements and clean up useEffect dependencies

…: improve URL insertion with node titles - Use node titles and locations for link text instead of node and space IDs - Rename useUrlHandler.ts to useUrlHandler.tsx to reflect JSX usage

JulesBelveze · 2025-03-17T08:21:04Z

front/components/assistant/conversation/input_bar/editor/useUrlHandler.tsx

+      }
+
+      try {
+        const formattedText = `${node.title} - ${getLocationForDataSourceViewContentNode(node)}`;


Note: this is temporary as we want to display an icon. However at first glance it didn't seem straightforward to replace text with something else than a string

via css maybe? the same way you can green up text, you can inject images or stuff with before-content for instance

…ack signature - Removed the url parameter from onUrlDetected callback as it's no longer needed - Adjusted associated functions and components to the new callback signature

philipperolet

Looks good 👍 Left a few coms but pre-approving

philipperolet · 2025-03-17T11:02:29Z

front/components/assistant/conversation/input_bar/editor/extensions/URLDetectionExtension.ts

+                    url,
+                    nodeId,
+                    from,
+                    to: from + url.length,


if the replacement takes a bit long, and the user types / deletes stuff could that result in weird behaviour?

I did not manage to break it locally, but will definitely keep an eye out for that 👍🏼

philipperolet · 2025-03-17T11:33:28Z

front/components/assistant/conversation/input_bar/InputBarContainer.tsx

      onUrlDetected: handleUrlDetected,
    }),
  });

+  useUrlHandler(editor, selectedNode);


do selected node from URL and from picker play well together? is it ok to have them both with the same name in the same state var?

They only share the onNodeSelect callback. The entire picker attachment logic is handled in InputBarAttachmentsPicker, so everything should be fine 😃

philipperolet · 2025-03-17T12:16:08Z

front/components/assistant/conversation/input_bar/editor/useUrlHandler.tsx

+      }
+
+      try {
+        const formattedText = `${node.title} - ${getLocationForDataSourceViewContentNode(node)}`;


via css maybe? the same way you can green up text, you can inject images or stuff with before-content for instance

* [assistant/conversation/input_bar] - feature: automate URL node replacement in input bar editor - Implement useEffect to replace URLs with node titles when search results are available - Store pending URL node replacement information for later processing when data arrives - Handle paste events for URLs and trigger node ID retrieval and storage for replacement - Add storage management for URL to node title replacements within the editor extension - Enhance URLDetectionExtension to manage detection and storage of node replacement data - Include URLReplacementStorage extension in the custom editor setup for input bar * [front/assistant/conversation/input_bar/editor/extensions] - feature: implement storage for URL replacements - Created an extension to keep track of pending URL replacements within the editor - Added methods to add, retrieve, and clear replacement metadata, as well as set the current node ID * [front] - refactor: streamline URL handling in InputBarContainer - Simplify the logic by removing direct mutation of editor state and URL replacement handling - Introduce useUrlHandler hook to manage URL detection and node selection process - Adjust import references to accommodate codebase restructuring - Update plugin handling for URL detection to utilize new URLStorage model * [front/components/assistant/conversation/input_bar/editor] - feature: handle URLs in conversation editor - Automatically format and replace pending URLs with node-specific text in the conversation editor - Cleanup pending URL entries after processing to keep the storage clean * [front] - feature: add URL storage extension to input bar editor - Introduce a new tiptap extension to manage URL states within the editor - Create a storage mechanism for pending URLs with their respective metadata such as node ID and position in the editor * [assistant/conversation/input_bar/editor/extensions] - refactor: remove URLReplacementStorage extension - URLReplacementStorage extension is deleted, possibly due to its functionality being handled elsewhere or no longer needed - Associated types and methods for managing URL replacements within the editor have been removed * [front/components/assistant] - refactor: improve URL handling in editor - Refactor URL replacement logic into a useCallback hook to optimize performance - Ensure editor commands are ready before attempting to replace the URL - Add error handling for failed URL replacements and clean up useEffect dependencies * [front/components/assistant/conversation/input_bar/editor] - refactor: improve URL insertion with node titles - Use node titles and locations for link text instead of node and space IDs - Rename useUrlHandler.ts to useUrlHandler.tsx to reflect JSX usage * [front/components/assistant] - refactor: simplify onUrlDetected callback signature - Removed the url parameter from onUrlDetected callback as it's no longer needed - Adjusted associated functions and components to the new callback signature

JulesBelveze marked this pull request as draft March 15, 2025 18:45

JulesBelveze force-pushed the front/nodeid-from-urls branch from d20c2f5 to b9b5e7c Compare March 17, 2025 07:40

JulesBelveze added 5 commits March 17, 2025 08:43

[front/components/assistant/conversation/input_bar/editor] - feature:…

b4d94c8

… handle URLs in conversation editor - Automatically format and replace pending URLs with node-specific text in the conversation editor - Cleanup pending URL entries after processing to keep the storage clean

[front] - feature: add URL storage extension to input bar editor

6e06ee9

- Introduce a new tiptap extension to manage URL states within the editor - Create a storage mechanism for pending URLs with their respective metadata such as node ID and position in the editor

JulesBelveze force-pushed the front/nodeid-from-urls branch from b9b5e7c to 6e06ee9 Compare March 17, 2025 07:44

JulesBelveze added 3 commits March 17, 2025 08:45

[front/components/assistant/conversation/input_bar/editor] - refactor…

ccc33cb

…: improve URL insertion with node titles - Use node titles and locations for link text instead of node and space IDs - Rename useUrlHandler.ts to useUrlHandler.tsx to reflect JSX usage

JulesBelveze commented Mar 17, 2025

View reviewed changes

[front/components/assistant] - refactor: simplify onUrlDetected callb…

7b4e5cb

…ack signature - Removed the url parameter from onUrlDetected callback as it's no longer needed - Adjusted associated functions and components to the new callback signature

JulesBelveze marked this pull request as ready for review March 17, 2025 08:30

JulesBelveze requested a review from tdraier March 17, 2025 08:53

philipperolet approved these changes Mar 17, 2025

View reviewed changes

JulesBelveze merged commit bc93eae into main Mar 17, 2025
18 of 19 checks passed

JulesBelveze deleted the front/nodeid-from-urls branch March 17, 2025 12:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[front] - feat: transform url in `InputBar` #11389

[front] - feat: transform url in `InputBar` #11389

JulesBelveze commented Mar 15, 2025 •

edited

Loading

JulesBelveze Mar 17, 2025

philipperolet Mar 17, 2025

philipperolet left a comment

philipperolet Mar 17, 2025

JulesBelveze Mar 17, 2025

philipperolet Mar 17, 2025

JulesBelveze Mar 17, 2025

philipperolet Mar 17, 2025

[front] - feat: transform url in InputBar #11389

[front] - feat: transform url in InputBar #11389

Conversation

JulesBelveze commented Mar 15, 2025 • edited Loading

Description

Risk

Deploy Plan

JulesBelveze Mar 17, 2025

Choose a reason for hiding this comment

philipperolet Mar 17, 2025

Choose a reason for hiding this comment

philipperolet left a comment

Choose a reason for hiding this comment

philipperolet Mar 17, 2025

Choose a reason for hiding this comment

JulesBelveze Mar 17, 2025

Choose a reason for hiding this comment

philipperolet Mar 17, 2025

Choose a reason for hiding this comment

JulesBelveze Mar 17, 2025

Choose a reason for hiding this comment

philipperolet Mar 17, 2025

Choose a reason for hiding this comment

[front] - feat: transform url in `InputBar` #11389

[front] - feat: transform url in `InputBar` #11389

JulesBelveze commented Mar 15, 2025 •

edited

Loading