feat: support markdown on user message

[urmauur]

Describe Your Changes

1. New Rich Editor Component (RichTextEditor.tsx):

   • A new TypeScript file RichTextEditor.tsx is created, which defines a React component for a rich text editor using Slate.js.
   • The component supports basic formatting (bold, italic), inline code blocks, and syntax highlighting for code blocks.

2. Custom Types for Slate:

   • The slate module declaration is updated to include custom types (CustomElement, CustomText) that extend the default Slate Editor interface.
   • This allows the editor to handle paragraphs, code blocks, and text with formatting attributes.

3. Initial Value:

   • The initial value for the editor is set to a single paragraph element with an empty text field.

4. Decorate Function:

   • A custom decorate function is implemented to identify code blocks and apply styles (bold, italic) to text ranges.
   • It also handles syntax highlighting for inline and block code using highlight.js.

5. RenderLeaf Function:

   • The renderLeaf function applies the formatting and styling attributes to the text elements in the editor.

6. Event Handling:

   • Key handlers like onKeyDown are implemented to handle specific key events (e.g., Enter, Tab) for inserting new lines, toggling code blocks, and handling tab indentation.
   • The component also handles state updates and side effects such as focusing the textarea and adjusting its height.

7. Styling:

   • The RichEditor component includes various CSS classes to style the editor and its content, including syntax highlighting for different programming languages.

8. Integration with Existing Components:

   • The ChatInput.tsx file is modified to use the new RichTextEditor component instead of the old CodeEditor.
   • The RichEditor component is configured with options such as className, style, placeholder, and spellCheck.

9. Code Refactoring:

   • The old TextArea component is commented out in favor of the new RichEditor.
   • Various refactoring and clean-up are done throughout the codebase to integrate the new editor seamlessly with existing components and logic.

These changes significantly enhance the text editing capabilities of the application, allowing for more complex and formatted text input, including support for code blocks with syntax highlighting.

Fixes Issues

• Support for inline syntax highlighting in the chat input box:
  • Code enclosed within triple backticks (```) will be highlighted for syntax.
  • The chat user’s message will render with the appropriate code syntax highlighting.

• Support for inline text formatting (bold and italic) in the chat input box:
  • Users can apply bold and italic formatting directly within the input box.
  • The chat user’s message will display the correctly formatted text.

• Chat user support all markdown
  • Code blocks with syntax highlighting
  • Lists (ordered and unordered)
  • Bold and italic text
  • Links
  • Blockquotes

Note: The reason we only support syntax highlighting and text formatting (bold and italic) in the chat input is to avoid making the input box interface cluttered or unattractive. For example, rendering blockquotes inside the chat input would lead to a messy and visually unappealing interface.

• Closes feat: render code, indents, markdown for user inputs #3358
• Closes idea: Add markdown rendering support to Jan #3739

Self Checklist

• Added relevant comments, esp in complex areas
• Updated docs (for bug fixes / features)
• Created issues for follow-up changes or refactoring needed

[github-actions]

Barecheck - Code coverage report

Total: 69.5%

Your code coverage diff: -0.49% ▾

Uncovered files and lines

File	Lines
web/containers/ModelDropdown/index.tsx	102, 118-119, 122, 124-125, 127-128, 130-133, 135, 143, 160-162, 164, 166, 186, 190, 197, 200-201, 237-239, 243, 265-266, 270, 273-278, 285-286, 297, 301, 319, 335, 356, 365, 371, 379-380, 383-388, 391, 394, 446-447, 449, 474, 478, 480, 503, 505-506, 508, 512-514, 516-517, 519, 529-532, 559, 563, 565
web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx	93-94, 96, 116-117, 119, 133-134, 137-139, 141, 143-144, 146-147, 149-151, 158, 164-165, 179, 181-182, 184-187, 194, 199-200, 202, 205, 217-219, 221, 225, 240, 243, 297, 300-301, 307, 311, 319, 325, 330-335, 338, 340, 342, 345, 348, 352-353, 355, 360-361, 376, 378-379, 381, 385
web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx	77, 85, 90, 103-105, 109-111, 116, 119, 146, 155, 161, 163, 230, 233-234, 259, 263-264, 304, 327, 379-381, 383-385, 387-389, 391, 395-396, 408
web/screens/Thread/ThreadCenterPanel/EditChatInput/index.tsx	40-42, 44-51, 53-54, 57-59, 63-67, 72-73, 77-83, 91, 96-101, 105-106, 139, 147, 155, 158
web/screens/Thread/ThreadCenterPanel/SimpleTextMessage/index.tsx	44-48, 50-51, 54, 57, 65, 69-70, 72-73, 75, 85, 90, 109, 111-116, 118-120, 122, 124-126, 130-132, 134, 138-140, 142-143, 145-147, 150-152, 154-155, 230, 253

[imtuyethan]

Works well on my end.

[louis-jan]

LGTM

[dan-homebrew]

Thanks @urmauur, this looks great!