cOborski/chatpad
1
0
Fork 0
forked from prehistoric-systems/chatpad
Code Pull requests Activity

Replace Code with Prism

Browse source
This commit is contained in:
Boris Proshin 2023-07-19 17:39:03 +03:00
parent e8240a7bef
commit ae4f30d4b6
4 changed files with 1136 additions and 1411 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
package-lock.json generated
View file

@ -8,10 +8,11 @@
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/server": "^11.10.0",
"@mantine/core": "^6.0.1",
"@mantine/hooks": "^6.0.1",
"@mantine/next": "^6.0.1",
"@mantine/notifications": "^6.0.1",
"@mantine/core": "^6.0.17",
"@mantine/hooks": "^6.0.17",
"@mantine/next": "^6.0.17",
"@mantine/notifications": "^6.0.17",
"@mantine/prism": "^6.0.17",
"@tabler/icons-react": "^2.9.0",
"@tanstack/react-location": "^3.7.4",
"@types/node": "18.15.0",
@ -45,6 +46,7 @@
"buffer": "^5.7.1",
"parcel": "^2.8.3",
"parcel-reporter-static-files-copy": "^1.5.0",
"path-browserify": "^1.0.1",
"process": "^0.11.10"
}
},
@ -582,38 +584,38 @@
]
},
"node_modules/@mantine/core": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.2.tgz",
"integrity": "sha512-FP/qaMBzh2dDrZIFSAJB3vogWK3U8+nnwImKa+/ceo7EJLeauLNAssaoWn2TVnA6x5mIZnlPwkDtVqI8Q+K9Ww==",
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.17.tgz",
"integrity": "sha512-g3EDxcTJKisvEGTsGJPCGXiDumwr4O0nGNXwoGLnrg19nh3FAMfEIq18sJJLtRrBuarSbrvgMVYvKx1R6rTOWg==",
"dependencies": {
"@floating-ui/react": "^0.19.1",
"@mantine/styles": "6.0.2",
"@mantine/utils": "6.0.2",
"@mantine/styles": "6.0.17",
"@mantine/utils": "6.0.17",
"@radix-ui/react-scroll-area": "1.0.2",
"react-remove-scroll": "^2.5.5",
"react-textarea-autosize": "8.3.4"
},
"peerDependencies": {
"@mantine/hooks": "6.0.2",
"@mantine/hooks": "6.0.17",
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@mantine/hooks": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.2.tgz",
"integrity": "sha512-wLSkp0NRe4XN7JujIUvkKghIBJC9YZ33CJlrFbcBFLD6LiSLX7lWyWOsiFzXrPND0Hpgn3AjckFQGblA8n34XA==",
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.17.tgz",
"integrity": "sha512-7vf2w1NlzKlUynSuyI2DAIKoEOYKYC8k+tlSsk3BRdbzhbJAiWxcYzJy5seg5dFW1WIpKAZ0wiVdHXf/WRlRgg==",
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/@mantine/next": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/next/-/next-6.0.2.tgz",
"integrity": "sha512-yQrsqu19r9aLU8/q0hhsUjuTV8MRf3vTQz2Lv6Fvm+dGIef+ZvMVaTrRodvX/qepF5YWAmyRUg5jgwENsyDSXQ==",
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/next/-/next-6.0.17.tgz",
"integrity": "sha512-/JmKysJ0blftAU8+YtWZ4m3MIXUtiyaPXamEYCkcv+V+8oAa9x4EquX/eK6gOVbEEhUoHGCbIZ3nt54NQiC2dQ==",
"dependencies": {
"@mantine/ssr": "6.0.2",
"@mantine/styles": "6.0.2"
"@mantine/ssr": "6.0.17",
"@mantine/styles": "6.0.17"
},
"peerDependencies": {
"next": "*",
@ -622,26 +624,49 @@
}
},
"node_modules/@mantine/notifications": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-6.0.2.tgz",
"integrity": "sha512-EpQgTl5j925N88WY05etFe5ov71UnJRep6nGwv+CVATXmNV8E8z4b+2R6B5ofg4bW9VkS2BJKT2TgKRzaCMLeg==",
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-6.0.17.tgz",
"integrity": "sha512-iY8hdRG4RcrsA7U06AOWLbKrQJAzEhKi2mESOnGE4s7RBWJjLTXJf+gTKi+QtVa3XNIF0I/adpEh8MEFD5zGWw==",
"dependencies": {
"@mantine/utils": "6.0.2",
"@mantine/utils": "6.0.17",
"react-transition-group": "4.4.2"
},
"peerDependencies": {
"@mantine/core": "6.0.2",
"@mantine/hooks": "6.0.2",
"@mantine/core": "6.0.17",
"@mantine/hooks": "6.0.17",
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@mantine/ssr": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/ssr/-/ssr-6.0.2.tgz",
"integrity": "sha512-s7F0LtKVdGflbV/2ofCUcdoEQlCpnspBIOPW2IORk7Ysab/XE/Ea2nphtfStNZcYZXk9haOVp50Yi8yAxzBOVg==",
"node_modules/@mantine/prism": {
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/prism/-/prism-6.0.17.tgz",
"integrity": "sha512-oUnvLIU/ERvGqYVDasVIQH5pJpmi4DooGB5tucef1uS7u/rt68iAaNKCpPK4ghYZekCC8VO/cXdB9BzZACj5EA==",
"dependencies": {
"@mantine/styles": "6.0.2",
"@mantine/utils": "6.0.17",
"prism-react-renderer": "^1.2.1"
},
"peerDependencies": {
"@mantine/core": "6.0.17",
"@mantine/hooks": "6.0.17",
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@mantine/prism/node_modules/prism-react-renderer": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz",
"integrity": "sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==",
"peerDependencies": {
"react": ">=0.14.9"
}
},
"node_modules/@mantine/ssr": {
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/ssr/-/ssr-6.0.17.tgz",
"integrity": "sha512-l4G0GROr/1w96uWmEMrczwxLF5BSR0b2uK/ErTrq6+ozmrFSl+LvU/JKoYnyoo+bgbfhVn8dpNOxpkOYF5fTDg==",
"dependencies": {
"@mantine/styles": "6.0.17",
"html-react-parser": "1.4.12"
},
"peerDependencies": {
@ -652,9 +677,9 @@
}
},
"node_modules/@mantine/styles": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.2.tgz",
"integrity": "sha512-py5yWzCPSYAv/4NwQ+dHaei0Rmk8kQ/ls5i3u28y6U+fCoutRhlCPJKjPfOWQzFpSRS0oGPdChFdg6zn4r8YIA==",
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.17.tgz",
"integrity": "sha512-utNwQJgKHguNS0iPyyeFRJy4nbt280XMbmfUf4GCxXlyl/mQxq+JoaKP/OmU7+8kfbtLS9kHeuBSghrC65Nt1g==",
"dependencies": {
"clsx": "1.1.1",
"csstype": "3.0.9"
@ -671,9 +696,9 @@
"integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
},
"node_modules/@mantine/utils": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.2.tgz",
"integrity": "sha512-fx+cmkb8PMpkr65nUs8YgaXFJbtNY+ybSXDfBxwFAWMTLAocbNo7vjkSvPWZVS1O2szPK/s4Rqdw0W76dyG4+w==",
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.17.tgz",
"integrity": "sha512-U6SWV/asYE6NhiHx4ltmVZdQR3HwGVqJxVulhOylMcV1tX/P1LMQUCbGV2Oe4O9jbX4/YW5B/CBb4BbEhENQFQ==",
"peerDependencies": {
"react": ">=16.8.0"
}
@ -8823,55 +8848,72 @@
"optional": true
},
"@mantine/core": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.2.tgz",
"integrity": "sha512-FP/qaMBzh2dDrZIFSAJB3vogWK3U8+nnwImKa+/ceo7EJLeauLNAssaoWn2TVnA6x5mIZnlPwkDtVqI8Q+K9Ww==",
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.17.tgz",
"integrity": "sha512-g3EDxcTJKisvEGTsGJPCGXiDumwr4O0nGNXwoGLnrg19nh3FAMfEIq18sJJLtRrBuarSbrvgMVYvKx1R6rTOWg==",
"requires": {
"@floating-ui/react": "^0.19.1",
"@mantine/styles": "6.0.2",
"@mantine/utils": "6.0.2",
"@mantine/styles": "6.0.17",
"@mantine/utils": "6.0.17",
"@radix-ui/react-scroll-area": "1.0.2",
"react-remove-scroll": "^2.5.5",
"react-textarea-autosize": "8.3.4"
}
},
"@mantine/hooks": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.2.tgz",
"integrity": "sha512-wLSkp0NRe4XN7JujIUvkKghIBJC9YZ33CJlrFbcBFLD6LiSLX7lWyWOsiFzXrPND0Hpgn3AjckFQGblA8n34XA==",
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.17.tgz",
"integrity": "sha512-7vf2w1NlzKlUynSuyI2DAIKoEOYKYC8k+tlSsk3BRdbzhbJAiWxcYzJy5seg5dFW1WIpKAZ0wiVdHXf/WRlRgg==",
"requires": {}
},
"@mantine/next": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/next/-/next-6.0.2.tgz",
"integrity": "sha512-yQrsqu19r9aLU8/q0hhsUjuTV8MRf3vTQz2Lv6Fvm+dGIef+ZvMVaTrRodvX/qepF5YWAmyRUg5jgwENsyDSXQ==",
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/next/-/next-6.0.17.tgz",
"integrity": "sha512-/JmKysJ0blftAU8+YtWZ4m3MIXUtiyaPXamEYCkcv+V+8oAa9x4EquX/eK6gOVbEEhUoHGCbIZ3nt54NQiC2dQ==",
"requires": {
"@mantine/ssr": "6.0.2",
"@mantine/styles": "6.0.2"
"@mantine/ssr": "6.0.17",
"@mantine/styles": "6.0.17"
}
},
"@mantine/notifications": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-6.0.2.tgz",
"integrity": "sha512-EpQgTl5j925N88WY05etFe5ov71UnJRep6nGwv+CVATXmNV8E8z4b+2R6B5ofg4bW9VkS2BJKT2TgKRzaCMLeg==",
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-6.0.17.tgz",
"integrity": "sha512-iY8hdRG4RcrsA7U06AOWLbKrQJAzEhKi2mESOnGE4s7RBWJjLTXJf+gTKi+QtVa3XNIF0I/adpEh8MEFD5zGWw==",
"requires": {
"@mantine/utils": "6.0.2",
"@mantine/utils": "6.0.17",
"react-transition-group": "4.4.2"
}
},
"@mantine/ssr": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/ssr/-/ssr-6.0.2.tgz",
"integrity": "sha512-s7F0LtKVdGflbV/2ofCUcdoEQlCpnspBIOPW2IORk7Ysab/XE/Ea2nphtfStNZcYZXk9haOVp50Yi8yAxzBOVg==",
"@mantine/prism": {
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/prism/-/prism-6.0.17.tgz",
"integrity": "sha512-oUnvLIU/ERvGqYVDasVIQH5pJpmi4DooGB5tucef1uS7u/rt68iAaNKCpPK4ghYZekCC8VO/cXdB9BzZACj5EA==",
"requires": {
"@mantine/styles": "6.0.2",
"@mantine/utils": "6.0.17",
"prism-react-renderer": "^1.2.1"
},
"dependencies": {
"prism-react-renderer": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz",
"integrity": "sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==",
"requires": {}
}
}
},
"@mantine/ssr": {
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/ssr/-/ssr-6.0.17.tgz",
"integrity": "sha512-l4G0GROr/1w96uWmEMrczwxLF5BSR0b2uK/ErTrq6+ozmrFSl+LvU/JKoYnyoo+bgbfhVn8dpNOxpkOYF5fTDg==",
"requires": {
"@mantine/styles": "6.0.17",
"html-react-parser": "1.4.12"
}
},
"@mantine/styles": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.2.tgz",
"integrity": "sha512-py5yWzCPSYAv/4NwQ+dHaei0Rmk8kQ/ls5i3u28y6U+fCoutRhlCPJKjPfOWQzFpSRS0oGPdChFdg6zn4r8YIA==",
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.17.tgz",
"integrity": "sha512-utNwQJgKHguNS0iPyyeFRJy4nbt280XMbmfUf4GCxXlyl/mQxq+JoaKP/OmU7+8kfbtLS9kHeuBSghrC65Nt1g==",
"requires": {
"clsx": "1.1.1",
"csstype": "3.0.9"
@ -8885,9 +8927,9 @@
}
},
"@mantine/utils": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.2.tgz",
"integrity": "sha512-fx+cmkb8PMpkr65nUs8YgaXFJbtNY+ybSXDfBxwFAWMTLAocbNo7vjkSvPWZVS1O2szPK/s4Rqdw0W76dyG4+w==",
"version": "6.0.17",
"resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.17.tgz",
"integrity": "sha512-U6SWV/asYE6NhiHx4ltmVZdQR3HwGVqJxVulhOylMcV1tX/P1LMQUCbGV2Oe4O9jbX4/YW5B/CBb4BbEhENQFQ==",
"requires": {}
},
"@mischnic/json-sourcemap": {

9
package.json
View file

@ -25,10 +25,11 @@
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/server": "^11.10.0",
"@mantine/core": "^6.0.1",
"@mantine/hooks": "^6.0.1",
"@mantine/next": "^6.0.1",
"@mantine/notifications": "^6.0.1",
"@mantine/core": "^6.0.17",
"@mantine/hooks": "^6.0.17",
"@mantine/next": "^6.0.17",
"@mantine/notifications": "^6.0.17",
"@mantine/prism": "^6.0.17",
"@tabler/icons-react": "^2.9.0",
"@tanstack/react-location": "^3.7.4",
"@types/node": "18.15.0",

18
src/components/MessageItem.tsx
View file

@ -10,7 +10,7 @@ import {
ThemeIcon,
Tooltip,
} from "@mantine/core";
import { useClipboard } from "@mantine/hooks";
import { Prism } from '@mantine/prism'
import { IconCopy, IconUser } from "@tabler/icons-react";
import { useMemo } from "react";
import ReactMarkdown from "react-markdown";
@ -22,7 +22,6 @@ import { LogoIcon } from "./Logo";
import { ScrollIntoView } from "./ScrollIntoView";
export function MessageItem({ message }: { message: Message }) {
const clipboard = useClipboard({ timeout: 500 });
const wordCount = useMemo(() => {
var matches = message.content.match(/[\w\d\’\'-\(\)]+/gi);
return matches ? matches.length : 0;
@ -46,12 +45,18 @@ export function MessageItem({ message }: { message: Message }) {
table: ({ node, ...props }) => (
<Table verticalSpacing="sm" highlightOnHover {...props} />
),
code: ({ node, inline, ...props }) =>
inline ? (
code: ({ node, inline, className, lang, ...props }) => {
const languageMatch = /language-(\w+)/.exec(className || "");
const language = languageMatch ? languageMatch[1] : undefined;
return inline ? (
<Code {...props} />
) : (
<Box sx={{ position: "relative" }}>
<Code block {...props} />
<Prism
language={language as any}
children={`${props.children as string}`}
/>
<CopyButton value={String(props.children)}>
{({ copied, copy }) => (
<Tooltip
@ -68,7 +73,8 @@ export function MessageItem({ message }: { message: Message }) {
)}
</CopyButton>
</Box>
),
);
},
}}
/>
{message.role === "assistant" && (

2352
yarn.lock
View file

File diff suppressed because it is too large Load diff