Enhance MarkdownRenderer.tsx to Automatically Link Code File Paths

kleneway commented 1 month ago

Description

The MarkdownRenderer.tsx component is responsible for rendering markdown content within the dashboard. Currently, when the markdown includes a path to a code file, it displays the path as plain text. To improve user experience and navigation, we need to enhance this component to automatically detect code file paths, convert them into clickable links, and allow users to view the actual code file in a dedicated code-viewing environment.

Requirements

Automatic Detection: Identify code file paths within the markdown text. A code file path is defined as any relative path that points to a file with extensions such as .js, .ts, .jsx, .tsx, .py, etc.
Link Creation: Convert detected code file paths into clickable links. The links should follow the format ./path/to/file.ext based on the existing markdown syntax.
Code Viewing Integration: When a user clicks on the code file link, it should open the file in the existing code-viewing environment. Reuse the current components designed for rendering code snippets to maintain consistency in the user interface.
Styling Consistency: Ensure that the newly created links match the styling of other links and code snippets within the application.

Expected Behavior

Before Enhancement:

You can find the utility functions in utils/helpers.ts.

Displays as plain text.

After Enhancement:
```
You can find the utility functions in [utils/helpers.ts](./utils/helpers.ts).
```
"utils/helpers.ts" is a clickable link that opens the file in the code-viewing environment.

Steps to Implement

Path Detection:
- Utilize regex or a markdown parsing library to identify code file paths within the markdown content.
- Define the file extensions that should be recognized as code files.
Link Conversion:
- Modify the rendering logic to wrap detected file paths with anchor tags pointing to the appropriate route that triggers the code-viewing component.
Integration with Code-Viewing Components:
- Ensure that clicking the link invokes the existing code-viewing components. dashboard assigned task component called Code.tsx has one example

workspace

Pass the correct file path to the code viewer to load and display the file content. - make sure it appears in a modal using react-modal

Testing:
- Write unit tests to verify that file paths are correctly detected and converted into links.
- Perform integration testing to ensure that the links open the correct files in the code viewer without breaking existing functionality.

Additional Information

Existing Components: Refer to Code.tsx in the assigned tasks component folder for rendering code snippets. This component should be reused to maintain consistency in how code files are displayed.
Error Handling: If a linked file does not exist or fails to load, display an appropriate error message to the user.
Performance Considerations: Ensure that the enhancement does not introduce significant performance overhead during markdown rendering.

Acceptance Criteria

All code file paths within markdown content are automatically detected and converted into clickable links.
Clicking on a code file link successfully opens the file in the existing code-viewing environment.
The enhancement does not negatively impact the rendering performance of the MarkdownRenderer.tsx component.

@jacob-ai-bot --skip-build