AI ChatGPT Template Code Snippets Not Rendered in Code Blocks in Chatbot Responses

[berkingurcan]

Description:
Currently, when the chatbot provides a response that includes code examples enclosed within triple backticks ( ), the code appears as normal text instead of being rendered within a code block. This makes it difficult to distinguish code from regular text and hampers readability.

Steps to Reproduce:

• Initiate a conversation with the chatbot.
• Ask a question that prompts the chatbot to provide a code example in its response.
• Observe that the code example is not formatted as a code block and appears as plain text.

Expected Behavior:
When the chatbot's response contains code examples enclosed within triple backticks ( ), the code should be rendered within a code block, preserving its formatting and improving readability.

Alternative solution:

• Find or build code block UI library(in here it is react-code-block
• Update convertNewLines function in the ChatLine component like this:

const convertNewLines = (text: string) => {
  const lines = text.split('\n');
  const result = [];
  let codeBlock = false;
  let codeLines = [];

  for (let line of lines) {
    if (line.trim().startsWith('```')) {
      if (codeBlock) {
        // Close the code block
        result.push(
          <div key={result.length} className="codebox">
            <CodeBlock
              text={codeLines.join('\n')}
              language={'ts'}
              showLineNumbers={false}
              wrapLines
            />
          </div>
        );
        codeLines = [];
        codeBlock = false;
      } else {
        // Start a new code block
        codeBlock = true;
      }
    } else if (codeBlock) {
      // Inside a code block, just collect the lines
      codeLines.push(line);
    } else {
      // Regular text lines
      result.push(
        <span key={result.length}>
          {line}
          <br />
        </span>
      );
    }
  }

  // Check if there's an unclosed code block
  if (codeBlock && codeLines.length > 0) {
    result.push(
      <div key={result.length} className="codebox">
        <CodeBlock
              text={codeLines.join('\n')}
              language={'ts'}
              showLineNumbers={false}
              wrapLines
            />
      </div>
    );
  }

  return result;
};