feat: better component for prompts - #2984
honzajavorek wants to merge 17 commits into
Conversation
|
✅ Preview for this PR (commit |
honzajavorek
added
t-academy
honzajavorek
changed the title
honzajavorek
changed the title
4650699 to
0bf16d3
Compare
…n inside <pre> and llm.txt reads nicer
6679e07 to
df05ee8
Compare
apify-service-account
added
the
tested
Follow up to #2849 and the last lesson of the AI course. I tried to give people pointers on where to look and how to help themselves the AI agent, and not to repeat content from elsewhere. I tried to be less strict about the WE form and included some YOU, but I don't know if it's not messy now, maybe I overdid it and it could use more consistency. But I will leave that up to my beloved reviewers to tell me what they think. If this PR goes through, I'll be numbers 2 and 9 on the sheep scale! <img width="794" height="960" alt="sheep-scale" src="https://github.com/user-attachments/assets/c9c76051-79d1-44d9-b34a-406eb08ad9f5" /> ## TODO - [x] ~~rebase, because I'm lazy to learn about stacked PRs now despite the fact that Michał just told me about them~~ – actually I've used the stacked PRs, yay! - [x] write the rest of the sections, otherwise no money, no food - [x] make all linters happy, because their happiness is more important than mine - [x] add some imagery so it's not all just Millennial grey - [x] polish grammar and flow with AI before the Polish can see my Czenglish - [ ] address review comments - [ ] use #2984 when it's merged --------- Co-authored-by: Edyta <142720610+szaganek@users.noreply.github.com>
barjin
left a comment
barjin
left a comment
There was a problem hiding this comment.
I've got a few talking points (⬇️ ), but generally lgtm. Thanks @honzajavorek !
| readers is controlled purely by CSS via the "visible" class below. */} | ||
| <div className={`${styles['full-prompt-container']} ${showPrompt ? styles.visible : ''}`}> | ||
| <div className={styles['full-prompt']}> | ||
| <blockquote className={styles['full-prompt-blockquote']}>{prompt}</blockquote> |
There was a problem hiding this comment.
Using
blockquoteinstead ofpre, so thatllm.txtreads more nicely, also semantics
Can you please elaborate? It seems <blockquote> is made into a single-line Markdown> quote.
Not that I expect the LLMs to care much, but it's not much nicer to read for humans.
I'm not sure about the semantics either, W3C describes blockquote as a section that is quoted from another source (source). pre imo fits here better.
There was a problem hiding this comment.
My sentence is wrong and it conflates few things together. The readability boost should happen for a person reading the docs, because it now word-wraps, which, I think, is desired for prompts (unlike code).
I feel like blockquote is better semantics than code, because we quote some prose we invented or tried with LLMs, and it's not technically code. In the end, perhaps https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/samp would be the closest? 😅
But tbh, I don't have a strong opinion about this. I have a strong opinion that the text of the prompt should wrap for those who read it. But I don't care that much what HTML element implements it, if it's blockquote or pre+css.
Thanks for checking the llm.txt, I didn't notice that it's a single line now, that's not really nice.
| } | ||
|
|
||
| .full-prompt pre { | ||
| .full-prompt-blockquote.full-prompt-blockquote { |
There was a problem hiding this comment.
this feels hacky (battling CSS specificity?), maybe another reason why we should keep pre?
This branch has not been deployed
3 participants
Closes #2979
Preview
To see it in action, check out preview of the following pages: