Adornando mensajes de AI SDK con ReactMarkdown

En el artículo anterior, creamos un servicio chatGPT utilizando el AI SDK de Vercel.

Pero al mantener una conversación, el texto se ve algo soso.

Entendemos lo que se dice, pero el texto está muy apretado.

Simplemente usando className con whitespace-pre-wrap cambia a algo más bonito.

<div className="text-gray-800 whitespace-pre-wrap">
    {message.content}
</div>

Haciendo esto, se respetan los espacios.

Pero si te fijas bien, responde en markdown.

1. Instalación y configuración de la librería

Primero, instalemos las bibliotecas necesarias.

yarn add react-markdown remark-gfm rehype-highlight highlight.js

• react-markdown: Renderiza markdown como HTML.

• remark-gfm: Añade algunas funcionalidades al markdown tradicional.

• rehype-highlight: Función de resaltado de código. Requiere configuraciones específicas.

• highlight.js: Analiza el código y lo resalta adecuadamente.

Ahora, simplemente colócalo dentro de un div.

No olvides quitar la opción whitespace del class.

"use client";

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
import "highlight.js/styles/atom-one-dark.css";

...
<div className="text-gray-800">
    <ReactMarkdown
    className="w-full h-5/6 prose"
    remarkPlugins={[remarkGfm]}
    rehypePlugins={[rehypeHighlight]}
    >
    {message.content}
    </ReactMarkdown>
</div>
...

Al hacerlo, puedes ver cómo se destaca la sintaxis markdown.

Se admiten tablas y bloques de código en línea.

Puedes revisar el color de resaltado del código en el sitio oficial de highlight.

Explora varios estilos y elige el que más te guste.

Los estilos recomendados por chatGPT fueron Default, Atom One Dark, Solarized Light, GitHub.

2. Comentarios finales

Añadir algo nuevo cada día consume mucho tiempo.

Pero debo completar el servicio antes de que comience el semestre, me preocupa.

Me pregunto si podré escribir el paper...

Debo esforzarme más.