Making ai generated text to have markdown

[erbill]

I've tried to customize message content on route.ts to make it us markdown or HTML tags, it generates it but it doesn't visually applied. What kind of a workaround would you suggest to make text completions have related h1,h2,h3,

and bullet point tags as OpenAI generates it?

[steven-tey]

Great point – I can repro! This is probably something to do with the output and how its rendered via Tiptap...will look into it! Open to ideas & suggestions as well 👀

[Gyurmatag]

Yeah, @Morriz can you please share it with us?

[Morriz]

Geez, please go do some basic react tutorial and pay attention to the render function...

[gediminastub]

@Morriz You do this inside of TipTap?

[levi-katarok]

Just curious how you actually interact with the setContent, I don't see that as a prop on the react component. Any help is appreciated !

[Morriz]

I will share the file content in question, but please figure it out from there yourself and stop asking me how to do 1+1

import styled from '@emotion/styled'
import { Button } from '@mantine/core'
import { useMemo } from 'react'
import { FormattedMessage } from 'react-intl'
import ReactMarkdown from 'react-markdown'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
import rehypeKatex from 'rehype-katex'
import remarkGfm from 'remark-gfm'
import remarkMath from 'remark-math'
import { CopyButton } from './copy-button'

const Code = styled.div`
  padding: 0;
  border-radius: 0.25rem;
  overflow: hidden;

  & > div {
    margin: 0 !important;
  }

  .fa {
    font-style: normal !important;
  }
`

const Header = styled.div`
  display: flex;
  align-items: center;
  justify-content: flex-end;
  // background: #191919;
  height: 2.5rem;
  padding: 0.1rem 0.1rem 0 0.5rem;

  .mantine-Button-label {
    display: flex;
    align-items: center;

    * {
      font-size: 90%;
    }
  }
`

const ImagePreview = styled.div`
  text-align: center;

  img {
    max-width: 30rem !important;
    display: block;
  }
`

export interface MarkdownProps {
  content: string
  className?: string
}

export function Markdown(props: MarkdownProps) {
  const classes = useMemo(() => {
    const classes: string[] = ['prose', 'dark:prose-invert']

    if (props.className) {
      classes.push(props.className)
    }

    return classes
  }, [props.className])

  const elem = useMemo(
    () => (
      <div className={classes.join(' ')}>
        <ReactMarkdown
          remarkPlugins={[remarkGfm, remarkMath]}
          rehypePlugins={[rehypeKatex]}
          linkTarget="_blank"
          components={{
            ol({ start, children }) {
              return (
                <ol start={start ?? 1} style={{ counterReset: `list-item ${start || 1}` }}>
                  {children}
                </ol>
              )
            },
            code({ inline, className, children, ...props }) {
              const match = /language-(\w+)/.exec(className || '')
              const code = String(children)
              return !inline ? (
                <>
                  <Code>
                    <Header>
                      {code.startsWith('<svg') && code.includes('</svg>') && (
                        <Button
                          variant="subtle"
                          size="sm"
                          compact
                          onClick={() => {
                            const blob = new Blob([code], { type: 'image/svg+xml' })
                            const url = URL.createObjectURL(blob)
                            const a = document.createElement('a')
                            a.href = url
                            a.download = 'image.svg'
                            a.click()
                          }}
                        >
                          <i className="fa fa-download" />
                          <span>
                            <FormattedMessage defaultMessage="Download SVG" />
                          </span>
                        </Button>
                      )}
                      <CopyButton value={code} />
                    </Header>
                    <SyntaxHighlighter
                      children={code}
                      style={vscDarkPlus as any}
                      language={match?.[1] || 'text'}
                      PreTag="div"
                      {...props}
                    />
                  </Code>
                  {code.startsWith('<svg') && code.includes('</svg>') && (
                    <ImagePreview>
                      <img alt="code" src={`data:image/svg+xml;base64,${btoa(code)}`} />
                    </ImagePreview>
                  )}
                </>
              ) : (
                <code className={className} {...props}>
                  {children}
                </code>
              )
            },
          }}
        >
          {props.content}
        </ReactMarkdown>
      </div>
    ),
    [props.content, classes],
  )

  return elem
}

[andrewdoro]

This PR adds a guide for having AI features like Notion, it also works with Markdown streaming.
#297
live example