From e7e1dc077c858c622f4f981d8de16aaaa526f011 Mon Sep 17 00:00:00 2001 From: Amos Jun-yeung Ng Date: Fri, 1 Mar 2024 19:09:02 +1100 Subject: [PATCH 1/5] Add Markdown rendering for chat messages --- src-svelte/package.json | 3 ++- src-svelte/src/routes/chat/Message.stories.ts | 19 +++++++++++++++++++ src-svelte/src/routes/chat/Message.svelte | 16 +++++++++++++++- src-svelte/src/routes/chat/MessageUI.svelte | 1 - src-svelte/src/routes/storybook.test.ts | 2 +- yarn.lock | 18 ++++++++++++++++++ 6 files changed, 55 insertions(+), 4 deletions(-) diff --git a/src-svelte/package.json b/src-svelte/package.json index ac433b6e..b33fca3a 100644 --- a/src-svelte/package.json +++ b/src-svelte/package.json @@ -65,6 +65,7 @@ "@fontsource/jetbrains-mono": "^5.0.11", "@neodrag/svelte": "file:../forks/neodrag/packages/svelte", "autosize": "^6.0.1", - "nanoid": "^3.3.6" + "nanoid": "^3.3.6", + "svelte-markdown": "^0.4.1" } } diff --git a/src-svelte/src/routes/chat/Message.stories.ts b/src-svelte/src/routes/chat/Message.stories.ts index 36a23dca..5c47ee5a 100644 --- a/src-svelte/src/routes/chat/Message.stories.ts +++ b/src-svelte/src/routes/chat/Message.stories.ts @@ -55,3 +55,22 @@ AIMultiline.parameters = { defaultViewport: "tablet", }, }; + +export const Code: StoryObj = Template.bind({}) as any; +Code.args = { + message: { + role: "Human", + text: + "This is some Python code:\n\n" + + "```python\n" + + "def hello_world():\n" + + " print('Hello, world!')\n" + + "```\n\n" + + "What do you think?", + }, +}; +Code.parameters = { + viewport: { + defaultViewport: "tablet", + }, +}; diff --git a/src-svelte/src/routes/chat/Message.svelte b/src-svelte/src/routes/chat/Message.svelte index d238bb42..80ec405f 100644 --- a/src-svelte/src/routes/chat/Message.svelte +++ b/src-svelte/src/routes/chat/Message.svelte @@ -1,9 +1,23 @@ - {message.text} +
+ +
+ + diff --git a/src-svelte/src/routes/chat/MessageUI.svelte b/src-svelte/src/routes/chat/MessageUI.svelte index b92b8461..5e94dd54 100644 --- a/src-svelte/src/routes/chat/MessageUI.svelte +++ b/src-svelte/src/routes/chat/MessageUI.svelte @@ -86,7 +86,6 @@ padding: 0.75rem; box-sizing: border-box; background-color: var(--message-color); - white-space: pre-line; text-align: left; } diff --git a/src-svelte/src/routes/storybook.test.ts b/src-svelte/src/routes/storybook.test.ts index 58e89fd1..f2c58a45 100644 --- a/src-svelte/src/routes/storybook.test.ts +++ b/src-svelte/src/routes/storybook.test.ts @@ -111,7 +111,7 @@ const components: ComponentTestConfig[] = [ }, { path: ["screens", "chat", "message"], - variants: ["human", "ai", "ai-multiline"], + variants: ["human", "ai", "ai-multiline", "code"], }, { path: ["screens", "chat", "conversation"], diff --git a/yarn.lock b/yarn.lock index 3f7e59f8..6ea1b851 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3096,6 +3096,11 @@ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8" integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ== +"@types/marked@^5.0.1": + version "5.0.2" + resolved "https://registry.yarnpkg.com/@types/marked/-/marked-5.0.2.tgz#ca6b0cd7a5c8799c8cd0963df0b3e1a9021dcdfa" + integrity sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg== + "@types/mdast@^3.0.0": version "3.0.15" resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5" @@ -7856,6 +7861,11 @@ markdown-to-jsx@^7.1.8: resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.4.0.tgz#4606c5c549a6f6cb87604c35f5ee4f42959ffb6b" integrity sha512-zilc+MIkVVXPyTb4iIUTIz9yyqfcWjszGXnwF9K/aiBWcHXFcmdEMTkG01/oQhwSCH7SY1BnG6+ev5BzWmbPrg== +marked@^5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/marked/-/marked-5.1.2.tgz#62b5ccfc75adf72ca3b64b2879b551d89e77677f" + integrity sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg== + mdast-util-definitions@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz#c5c1a84db799173b4dcf7643cda999e440c24db2" @@ -10547,6 +10557,14 @@ svelte-hmr@^0.15.3: resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.15.3.tgz#df54ccde9be3f091bf5f18fc4ef7b8eb6405fbe6" integrity sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ== +svelte-markdown@^0.4.1: + version "0.4.1" + resolved "https://registry.yarnpkg.com/svelte-markdown/-/svelte-markdown-0.4.1.tgz#ddf13cfd6e0f29a02a82854b48766b527ec90f8d" + integrity sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw== + dependencies: + "@types/marked" "^5.0.1" + marked "^5.1.2" + svelte-preprocess@^5.0.0, svelte-preprocess@^5.0.4, svelte-preprocess@^5.1.0: version "5.1.3" resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-5.1.3.tgz#7682239fe53f724c845b53026816fdfe15d028f9" From 10a038dd9ea4b3cb5deff8fe32c9900759f1f971 Mon Sep 17 00:00:00 2001 From: Amos Jun-yeung Ng Date: Fri, 1 Mar 2024 20:16:13 +1100 Subject: [PATCH 2/5] Add syntax highlighting to code blocks --- src-svelte/package.json | 1 + src-svelte/src/routes/chat/CodeRender.svelte | 54 ++++++++++++++++++++ src-svelte/src/routes/chat/Message.svelte | 3 +- yarn.lock | 12 +++++ 4 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 src-svelte/src/routes/chat/CodeRender.svelte diff --git a/src-svelte/package.json b/src-svelte/package.json index b33fca3a..24587f0b 100644 --- a/src-svelte/package.json +++ b/src-svelte/package.json @@ -66,6 +66,7 @@ "@neodrag/svelte": "file:../forks/neodrag/packages/svelte", "autosize": "^6.0.1", "nanoid": "^3.3.6", + "svelte-highlight": "^7.6.0", "svelte-markdown": "^0.4.1" } } diff --git a/src-svelte/src/routes/chat/CodeRender.svelte b/src-svelte/src/routes/chat/CodeRender.svelte new file mode 100644 index 00000000..fb00ad46 --- /dev/null +++ b/src-svelte/src/routes/chat/CodeRender.svelte @@ -0,0 +1,54 @@ + + +
+ +
+ + diff --git a/src-svelte/src/routes/chat/Message.svelte b/src-svelte/src/routes/chat/Message.svelte index 80ec405f..1b57bdf8 100644 --- a/src-svelte/src/routes/chat/Message.svelte +++ b/src-svelte/src/routes/chat/Message.svelte @@ -1,6 +1,7 @@