Chatbot code syntax highlighting

[dawoodkhan82]

Description

Add code syntax highlighting to chatbot.

Opening this PR for review, but there's still some minor css styling to fix, and probably some bugs.

Please include:

• relevant motivation
• a summary of the change
• which issue is fixed.
• any additional dependencies that are required for this change.

Closes: #3831

Checklist:

• I have performed a self-review of my own code
• I have added a short summary of my change to the CHANGELOG.md
• My code follows the style guidelines of this project
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

A note about the CHANGELOG

Hello 👋 and thank you for contributing to Gradio!

All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.

Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by [@myusername](link-to-your-github-profile) in [PR 11111](https://github.com/gradio-app/gradio/pull/11111)".

If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the
GitHub web UI since that lets you upload files directly via drag-and-drop.

[gradio-pr-bot]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-4048-all-demos

[abidlabs]

Awesome, this works quite well! Here's what I tested:

import gradio as gr

response = """
Hello, here's an example of a program in python:
```py
import gradio as gr

def p(x):
  return x
  
assert p(5) == 5
```
And here's a *simple* program in javascript:
```js
function alertGreet() {
    alert('hello')
}
```
"""

with gr.Blocks() as demo:
    gr.Chatbot([
        ("abc", response)
    ])
demo.launch()

It works with incomplete code blocks as well (which is important for streaming):

import gradio as gr

response = """
Hi this is the code that you requested:
```py
import gradio as gr

with gr.Blocks() as demo:
    gr.Chatbot()

"""

with gr.Blocks() as demo:
    gr.Chatbot([
        ("Write some code", response)
    ])
demo.launch()

Noticed one issue, which is that if no language is specified, a ClassNotFound exception is raised. Here's example code:

import gradio as gr

response = """
```
import gradio as gr
```
"""

with gr.Blocks() as demo:
    gr.Chatbot([
        ("Write some code", response)
    ])
demo.launch()

Instead, the code should render in a code block but without any syntax highlighting.

Also had some UI/UX feedback:

• The gray background in the code block doesn't look very good. Perhaps we can do an even lighter shade of gray (something like the background here) in light mode, and black (like the HuggingChat code blocks) in dark mode
• The margin below and above the code block is inconsistent. I think there should be less margin below the code block. I also think there should be a little less vertical padding within the Code component -- like this:

• Finally, if it would be at all possible to include a copy button, I think that would make for an amazing UX!

[pngwn]

I think we should choose a different theme. The green is a bit odd. Could we mimic the code component colors?

[dawoodkhan82]

[abidlabs]

Testing and everything looks good so far! Nits:

• Can we add a little bit of horizontal padding (same amount as vertical padding should do it)
• Dark mode looks good, but light mode (bright white background) still looks a bit off. Might even be better to have no background fill?

[abidlabs]

A few nits but otherwise LGTM! Thanks @dawoodkhan82 for the clean enhancement

[dawoodkhan82]

Added these background colors as theme variables, so devs can customize

[dawoodkhan82]

Just realized using render instead of renderInline returns results wrapped in <p> tags. But it's necessary to use render for fenced code blocks. So I can try to add a parser rule to remove <p> tags.

[aliabid94]

Ah sorry for the late review. I'm okay with this going in for now, but I'd really like to push back on the idea that we should be doing any of this formatting in the backend. Two problems with this:

1. We've encouraged users to use the Chatbot as both the input and output, for example

def add_message(history, user_input):
  response = ...
  return history + [user_input, response]

with gr.Blocks() as demo:
  chatbot = gr.Chatbot)
  msg = gr.Textbox()
  msg.submit(add_message, [chatbot, msg], [chatbot])

What happens when we start adding HTML formatting to the postprocessing is that we'll be seeing HTML content in previous messages that the user did not add to the chat state. This HTML will be used as input on the next function call. This will be extra problematic if the user is streaming code token-by-token - between every single token, we start inserting bits of HTML and the entire rendering will be broken. One hacky way to fix this is to undo all the postprocessing by adding a preprocessing step that reverses all the generated HTML. This is obviously not ideal. (I already do this for Markdown a little, postprocessing converts "\n" -> <br>, and preprocess converts it back.)

2. The API get's screwy. Ideally we shouldn't even be parsing markdown in the backend. What get's returned from the function should be returned from the API, but instead ends up having all sorts of HTML thrown in.

[dawoodkhan82]

@aliabid94 I agree, it's getting messy since we're parsing the markdown in the backend. I guess the ideal solution would be to use https://github.com/markdown-it/markdown-it to parse markdown in the frontend.

[aliabid94]

I do feel strongly it is the right way to go about it. I know we're trying to get this out asap for some demos, so your call on whether to merge for now

[abidlabs]

Good points @aliabid94! The API concerns are secondary so for the sake of getting this out tonight for the code generation team, I think let's stick to this approach for now. We can revise this after we get a release out, I do agree that some quick syntax highlighting on the frontend is the way to go

[abidlabs]

LGTM copy button works as expected. I think we can improve the UI of the copy button (make it the copy icon just like the other components), but not a blocker imo if you want to merge this in. We can do a patch later with the icon (and with the other changes discussed above).

[dawoodkhan82]

@abidlabs @aliabid94 thanks for adding the copy button. Are we leaving the html in code chat messages as is, with a ton of spans?

[akx]

🤔 This should have triggered a Ruff E722... But maybe the base for this PR was before #3979.