{part.slice(1, -1)};
- } else {
- return part;
- }
- });
- } else {
- return part;
- }
- });
-
- return <>{codeParts}; // return the wrapped text
- } else {
- const matchRegex = /(`[^`]+?`)/g;
- const parts = text.split(matchRegex);
- // console.log('parts', parts);
-
- // map over the parts and wrap any text between tildes with tags
- const codeParts = parts.map((part, i) => {
- if (part.match(matchRegex)) {
- return {part.slice(1, -1)};
- } else {
- return part;
- }
- });
-
- return <>{codeParts}; // return the wrapped text
- }
-}
diff --git a/src/components/Messages/Embed.jsx b/src/components/Messages/Embed.jsx
index 004d4a1e16..e9067addf2 100644
--- a/src/components/Messages/Embed.jsx
+++ b/src/components/Messages/Embed.jsx
@@ -4,8 +4,8 @@ import React from 'react';
export default function Embed({ children, language = ''}) {
return (
-
-
+
+
{ language }
diff --git a/src/components/Messages/Highlight.jsx b/src/components/Messages/Highlight.jsx
new file mode 100644
index 0000000000..81a9a9e582
--- /dev/null
+++ b/src/components/Messages/Highlight.jsx
@@ -0,0 +1,16 @@
+import React, { useState, useEffect } from 'react';
+import hljs from 'highlight.js';
+
+export default function Highlight({language, code}) {
+ const [highlightedCode, setHighlightedCode] = useState(code);
+
+ useEffect(() => {
+ setHighlightedCode(hljs.highlight(code, { language }).value);
+ }, [code, language]);
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Messages/Message.jsx b/src/components/Messages/Message.jsx
index a749be133a..c9527c560f 100644
--- a/src/components/Messages/Message.jsx
+++ b/src/components/Messages/Message.jsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
-import CodeWrapper from './CodeWrapper';
+import TextWrapper from './TextWrapper';
import { useSelector } from 'react-redux';
import GPTIcon from '../svg/GPTIcon';
import BingIcon from '../svg/BingIcon';
@@ -13,7 +13,8 @@ export default function Message({
}) {
const { isSubmitting } = useSelector((state) => state.submit);
const [abortScroll, setAbort] = useState(false);
- const blinker = isSubmitting && last && sender.toLowerCase() !== 'user';
+ const notUser = sender.toLowerCase() !== 'user';
+ const blinker = isSubmitting && last && notUser;
useEffect(() => {
if (blinker && !abortScroll) {
@@ -34,15 +35,12 @@ export default function Message({
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800'
};
- if (sender.toLowerCase() !== 'user') {
- props.className =
- 'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
- }
-
let icon = `${sender}:`;
const isGPT = sender === 'chatgpt' || sender === 'davinci' || sender === 'GPT';
- if (sender.toLowerCase() !== 'user') {
+ if (notUser) {
+ props.className =
+ 'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
icon = (
{part.slice(1, -1)};
+ } else {
+ // return {part}
;
+ return part;
+ }
+ });
+
+export default function CodeWrapper({ text }) {
+ if (text.includes('```')) {
+ // const parts = text.split(codeRegex);
+ const parts = regexSplit(text);
+ console.log(parts);
+ const codeParts = parts.map((part, i) => {
+ if (part.match(codeRegex)) {
+ let language = 'javascript';
+
+ if (part.match(languageMatch)) {
+ language = part.match(languageMatch)[1].toLowerCase();
+ const validLanguage = languages.some((lang) => language === lang);
+ part = validLanguage ? part.replace(languageMatch, '```') : part;
+ language = validLanguage ? language : 'javascript';
+ }
+
+ part = part.replace(newLineMatch, '```');
+
+ return (
+
+ );
+ } else if (part.match(inLineRegex)) {
+ const innerParts = part.split(inLineRegex);
+ return inLineWrap(innerParts);
+ } else {
+ return part;
+ }
+ });
+
+ return <>{codeParts}; // return the wrapped text
+ } else {
+ // map over the parts and wrap any text between tildes with tags
+ const parts = text.split(matchRegex);
+ const codeParts = inLineWrap(parts);
+ return <>{codeParts}; // return the wrapped text
+ }
+}
diff --git a/src/style.css b/src/style.css
index 56af6f81e1..2b783c3fa2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -6,28 +6,6 @@
box-sizing: border-box;
outline: 1px solid limegreen !important;
} */
-.prose :where(code):not(:where([class~="not-prose"] *)) {
- color: var(--tw-prose-code);
- font-size: .875em;
- font-weight: 600;
-}
-
-.prose :where(code):not(:where([class~="not-prose"] *))::before {
- content: "`";
-}
-
-.prose :where(code):not(:where([class~="not-prose"] *))::after {
- content: "`";
-}
-
-code, pre {
- font-family: Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace !important;
-}
-
-code, kbd, pre, samp {
- font-family: Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace;
- font-size: 1em;
-}
.scroll-down-enter {
opacity: 0;
@@ -101,6 +79,568 @@ code, kbd, pre, samp {
}
}
+.prose {
+ color:var(--tw-prose-body);
+ max-width:65ch
+ }
+ .prose :where([class~=lead]):not(:where([class~=not-prose] *)) {
+ color:var(--tw-prose-lead);
+ font-size:1.25em;
+ line-height:1.6;
+ margin-bottom:1.2em;
+ margin-top:1.2em
+ }
+ .prose :where(a):not(:where([class~=not-prose] *)) {
+ color:var(--tw-prose-links);
+ font-weight:500;
+ text-decoration:underline
+ }
+ .prose :where(strong):not(:where([class~=not-prose] *)) {
+ color:var(--tw-prose-bold);
+ font-weight:600
+ }
+ .prose :where(a strong):not(:where([class~=not-prose] *)) {
+ color:inherit
+ }
+ .prose :where(blockquote strong):not(:where([class~=not-prose] *)) {
+ color:inherit
+ }
+ .prose :where(thead th strong):not(:where([class~=not-prose] *)) {
+ color:inherit
+ }
+ .prose :where(ol):not(:where([class~=not-prose] *)) {
+ list-style-type:decimal;
+ margin-bottom:1.25em;
+ margin-top:1.25em;
+ padding-left:1.625em
+ }
+ .prose :where(ol[type=A]):not(:where([class~=not-prose] *)) {
+ list-style-type:upper-alpha
+ }
+ .prose :where(ol[type=a]):not(:where([class~=not-prose] *)) {
+ list-style-type:lower-alpha
+ }
+ .prose :where(ol[type=A s]):not(:where([class~=not-prose] *)) {
+ list-style-type:upper-alpha
+ }
+ .prose :where(ol[type=a s]):not(:where([class~=not-prose] *)) {
+ list-style-type:lower-alpha
+ }
+ .prose :where(ol[type=I]):not(:where([class~=not-prose] *)) {
+ list-style-type:upper-roman
+ }
+ .prose :where(ol[type=i]):not(:where([class~=not-prose] *)) {
+ list-style-type:lower-roman
+ }
+ .prose :where(ol[type=I s]):not(:where([class~=not-prose] *)) {
+ list-style-type:upper-roman
+ }
+ .prose :where(ol[type=i s]):not(:where([class~=not-prose] *)) {
+ list-style-type:lower-roman
+ }
+ .prose :where(ol[type="1"]):not(:where([class~=not-prose] *)) {
+ list-style-type:decimal
+ }
+ .prose :where(ul):not(:where([class~=not-prose] *)) {
+ list-style-type:disc;
+ margin-bottom:1.25em;
+ margin-top:1.25em;
+ padding-left:1.625em
+ }
+ .prose :where(ol>li):not(:where([class~=not-prose] *))::marker {
+ color:var(--tw-prose-counters);
+ font-weight:400
+ }
+ .prose :where(ul>li):not(:where([class~=not-prose] *))::marker {
+ color:var(--tw-prose-bullets)
+ }
+ .prose :where(hr):not(:where([class~=not-prose] *)) {
+ border-color:var(--tw-prose-hr);
+ border-top-width:1px;
+ margin-bottom:3em;
+ margin-top:3em
+ }
+ .prose :where(blockquote):not(:where([class~=not-prose] *)) {
+ border-left-color:var(--tw-prose-quote-borders);
+ border-left-width:.25rem;
+ color:var(--tw-prose-quotes);
+ font-style:italic;
+ font-style:normal;
+ font-weight:500;
+ margin-bottom:1.6em;
+ margin-top:1.6em;
+ padding-left:1em;
+ quotes:"\201C""\201D""\2018""\2019"
+ }
+ .prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *)):before {
+ content:open-quote
+ }
+ .prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *)):after {
+ content:close-quote
+ }
+ .prose :where(h1):not(:where([class~=not-prose] *)) {
+ color:var(--tw-prose-headings);
+ font-size:2.25em;
+ font-weight:800;
+ line-height:1.1111111;
+ margin-bottom:.8888889em;
+ margin-top:0
+ }
+ .prose :where(h1 strong):not(:where([class~=not-prose] *)) {
+ color:inherit;
+ font-weight:900
+ }
+ .prose :where(h2):not(:where([class~=not-prose] *)) {
+ color:var(--tw-prose-headings);
+ font-size:1.5em;
+ font-weight:700;
+ line-height:1.3333333;
+ margin-bottom:1em;
+ margin-top:2em
+ }
+ .prose :where(h2 strong):not(:where([class~=not-prose] *)) {
+ color:inherit;
+ font-weight:800
+ }
+ .prose :where(h3):not(:where([class~=not-prose] *)) {
+ color:var(--tw-prose-headings);
+ font-size:1.25em;
+ font-weight:600;
+ line-height:1.6;
+ margin-bottom:.6em;
+ margin-top:1.6em
+ }
+ .prose :where(h3 strong):not(:where([class~=not-prose] *)) {
+ color:inherit;
+ font-weight:700
+ }
+ .prose :where(h4):not(:where([class~=not-prose] *)) {
+ color:var(--tw-prose-headings);
+ font-weight:600;
+ line-height:1.5;
+ margin-bottom:.5em;
+ margin-top:1.5em
+ }
+ .prose :where(h4 strong):not(:where([class~=not-prose] *)) {
+ color:inherit;
+ font-weight:700
+ }
+ .prose :where(img):not(:where([class~=not-prose] *)) {
+ margin-bottom:2em;
+ margin-top:2em
+ }
+ .prose :where(figure>*):not(:where([class~=not-prose] *)) {
+ margin-bottom:0;
+ margin-top:0
+ }
+ .prose :where(figcaption):not(:where([class~=not-prose] *)) {
+ color:var(--tw-prose-captions);
+ font-size:.875em;
+ line-height:1.4285714;
+ margin-top:.8571429em
+ }
+ .prose :where(code):not(:where([class~=not-prose] *)) {
+ color:var(--tw-prose-code);
+ font-size:.875em;
+ font-weight:600
+ }
+ .prose :where(code):not(:where([class~=not-prose] *)):before {
+ content:"`"
+ }
+ .prose :where(code):not(:where([class~=not-prose] *)):after {
+ content:"`"
+ }
+ .prose :where(a code):not(:where([class~=not-prose] *)) {
+ color:inherit
+ }
+ .prose :where(h1 code):not(:where([class~=not-prose] *)) {
+ color:inherit
+ }
+ .prose :where(h2 code):not(:where([class~=not-prose] *)) {
+ color:inherit;
+ font-size:.875em
+ }
+ .prose :where(h3 code):not(:where([class~=not-prose] *)) {
+ color:inherit;
+ font-size:.9em
+ }
+ .prose :where(h4 code):not(:where([class~=not-prose] *)) {
+ color:inherit
+ }
+ .prose :where(blockquote code):not(:where([class~=not-prose] *)) {
+ color:inherit
+ }
+ .prose :where(thead th code):not(:where([class~=not-prose] *)) {
+ color:inherit
+ }
+ .prose :where(pre):not(:where([class~=not-prose] *)) {
+ background-color:transparent;
+ border-radius:.375rem;
+ color:currentColor;
+ font-size:.875em;
+ font-weight:400;
+ line-height:1.7142857;
+ margin:0;
+ overflow-x:auto;
+ padding:0
+ }
+ .prose :where(pre code):not(:where([class~=not-prose] *)) {
+ background-color:transparent;
+ border-radius:0;
+ border-width:0;
+ color:inherit;
+ font-family:inherit;
+ font-size:inherit;
+ font-weight:inherit;
+ line-height:inherit;
+ padding:0
+ }
+ .prose :where(pre code):not(:where([class~=not-prose] *)):before {
+ content:none
+ }
+ .prose :where(pre code):not(:where([class~=not-prose] *)):after {
+ content:none
+ }
+ .prose :where(table):not(:where([class~=not-prose] *)) {
+ font-size:.875em;
+ line-height:1.7142857;
+ margin-bottom:2em;
+ margin-top:2em;
+ table-layout:auto;
+ text-align:left;
+ width:100%
+ }
+ .prose :where(thead):not(:where([class~=not-prose] *)) {
+ border-bottom-color:var(--tw-prose-th-borders);
+ border-bottom-width:1px
+ }
+ .prose :where(thead th):not(:where([class~=not-prose] *)) {
+ color:var(--tw-prose-headings);
+ font-weight:600;
+ padding-bottom:.5714286em;
+ padding-left:.5714286em;
+ padding-right:.5714286em;
+ vertical-align:bottom
+ }
+ .prose :where(tbody tr):not(:where([class~=not-prose] *)) {
+ border-bottom-color:var(--tw-prose-td-borders);
+ border-bottom-width:1px
+ }
+ .prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)) {
+ border-bottom-width:0
+ }
+ .prose :where(tbody td):not(:where([class~=not-prose] *)) {
+ vertical-align:baseline
+ }
+ .prose :where(tfoot):not(:where([class~=not-prose] *)) {
+ border-top-color:var(--tw-prose-th-borders);
+ border-top-width:1px
+ }
+ .prose :where(tfoot td):not(:where([class~=not-prose] *)) {
+ vertical-align:top
+ }
+ .prose {
+ --tw-prose-body:#374151;
+ --tw-prose-headings:#111827;
+ --tw-prose-lead:#4b5563;
+ --tw-prose-links:#111827;
+ --tw-prose-bold:#111827;
+ --tw-prose-counters:#6b7280;
+ --tw-prose-bullets:#d1d5db;
+ --tw-prose-hr:#e5e7eb;
+ --tw-prose-quotes:#111827;
+ --tw-prose-quote-borders:#e5e7eb;
+ --tw-prose-captions:#6b7280;
+ --tw-prose-code:#111827;
+ --tw-prose-pre-code:#e5e7eb;
+ --tw-prose-pre-bg:#1f2937;
+ --tw-prose-th-borders:#d1d5db;
+ --tw-prose-td-borders:#e5e7eb;
+ --tw-prose-invert-body:#d1d5db;
+ --tw-prose-invert-headings:#fff;
+ --tw-prose-invert-lead:#9ca3af;
+ --tw-prose-invert-links:#fff;
+ --tw-prose-invert-bold:#fff;
+ --tw-prose-invert-counters:#9ca3af;
+ --tw-prose-invert-bullets:#4b5563;
+ --tw-prose-invert-hr:#374151;
+ --tw-prose-invert-quotes:#f3f4f6;
+ --tw-prose-invert-quote-borders:#374151;
+ --tw-prose-invert-captions:#9ca3af;
+ --tw-prose-invert-code:#fff;
+ --tw-prose-invert-pre-code:#d1d5db;
+ --tw-prose-invert-pre-bg:rgba(0,0,0,.5);
+ --tw-prose-invert-th-borders:#4b5563;
+ --tw-prose-invert-td-borders:#374151;
+ font-size:1rem;
+ line-height:1.75
+ }
+ .prose :where(p):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.25em;
+ margin-top:1.25em
+ }
+ .prose :where(video):not(:where([class~=not-prose] *)) {
+ margin-bottom:2em;
+ margin-top:2em
+ }
+ .prose :where(figure):not(:where([class~=not-prose] *)) {
+ margin-bottom:2em;
+ margin-top:2em
+ }
+ .prose :where(li):not(:where([class~=not-prose] *)) {
+ margin-bottom:.5em;
+ margin-top:.5em
+ }
+ .prose :where(ol>li):not(:where([class~=not-prose] *)) {
+ padding-left:.375em
+ }
+ .prose :where(ul>li):not(:where([class~=not-prose] *)) {
+ padding-left:.375em
+ }
+ .prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
+ margin-bottom:.75em;
+ margin-top:.75em
+ }
+ .prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:1.25em
+ }
+ .prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.25em
+ }
+ .prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:1.25em
+ }
+ .prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.25em
+ }
+ .prose :where(ul ul,
+ ul ol,
+ ol ul,
+ ol ol):not(:where([class~=not-prose] *)) {
+ margin-bottom:.75em;
+ margin-top:.75em
+ }
+ .prose :where(hr+*):not(:where([class~=not-prose] *)) {
+ margin-top:0
+ }
+ .prose :where(h2+*):not(:where([class~=not-prose] *)) {
+ margin-top:0
+ }
+ .prose :where(h3+*):not(:where([class~=not-prose] *)) {
+ margin-top:0
+ }
+ .prose :where(h4+*):not(:where([class~=not-prose] *)) {
+ margin-top:0
+ }
+ .prose :where(thead th:first-child):not(:where([class~=not-prose] *)) {
+ padding-left:0
+ }
+ .prose :where(thead th:last-child):not(:where([class~=not-prose] *)) {
+ padding-right:0
+ }
+ .prose :where(tbody td,
+ tfoot td):not(:where([class~=not-prose] *)) {
+ padding:.5714286em
+ }
+ .prose :where(tbody td:first-child,
+ tfoot td:first-child):not(:where([class~=not-prose] *)) {
+ padding-left:0
+ }
+ .prose :where(tbody td:last-child,
+ tfoot td:last-child):not(:where([class~=not-prose] *)) {
+ padding-right:0
+ }
+ .prose :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:0
+ }
+ .prose :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:0
+ }
+ .prose-sm :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
+ margin-bottom:.5714286em;
+ margin-top:.5714286em
+ }
+ .prose-sm :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:1.1428571em
+ }
+ .prose-sm :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.1428571em
+ }
+ .prose-sm :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:1.1428571em
+ }
+ .prose-sm :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.1428571em
+ }
+ .prose-sm :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:0
+ }
+ .prose-sm :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:0
+ }
+ .prose-base :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
+ margin-bottom:.75em;
+ margin-top:.75em
+ }
+ .prose-base :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:1.25em
+ }
+ .prose-base :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.25em
+ }
+ .prose-base :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:1.25em
+ }
+ .prose-base :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.25em
+ }
+ .prose-base :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:0
+ }
+ .prose-base :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:0
+ }
+ .prose-lg :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
+ margin-bottom:.8888889em;
+ margin-top:.8888889em
+ }
+ .prose-lg :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:1.3333333em
+ }
+ .prose-lg :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.3333333em
+ }
+ .prose-lg :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:1.3333333em
+ }
+ .prose-lg :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.3333333em
+ }
+ .prose-lg :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:0
+ }
+ .prose-lg :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:0
+ }
+ .prose-xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
+ margin-bottom:.8em;
+ margin-top:.8em
+ }
+ .prose-xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:1.2em
+ }
+ .prose-xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.2em
+ }
+ .prose-xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:1.2em
+ }
+ .prose-xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.2em
+ }
+ .prose-xl :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:0
+ }
+ .prose-xl :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:0
+ }
+ .prose-2xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
+ margin-bottom:.8333333em;
+ margin-top:.8333333em
+ }
+ .prose-2xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:1.3333333em
+ }
+ .prose-2xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.3333333em
+ }
+ .prose-2xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:1.3333333em
+ }
+ .prose-2xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:1.3333333em
+ }
+ .prose-2xl :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
+ margin-top:0
+ }
+ .prose-2xl :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
+ margin-bottom:0
+ }
+
+code,
+pre {
+ font-family: Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace !important;
+}
+code[class='language-plaintext'] {
+ white-space: pre-line;
+}
+code.hljs,
+code[class*='language-'],
+pre[class*='language-'] {
+ word-wrap: normal;
+ background: none;
+ color: #fff;
+ -webkit-hyphens: none;
+ hyphens: none;
+ font-size: .85rem;
+ line-height: 1.5;
+ tab-size: 4;
+ text-align: left;
+ white-space: pre;
+ word-break: normal;
+ word-spacing: normal;
+}
+pre[class*='language-'] {
+ border-radius: 0.3em;
+ overflow: auto;
+}
+:not(pre) > code.hljs,
+:not(pre) > code[class*='language-'] {
+ border-radius: 0.3em;
+ padding: 0.1em;
+ white-space: normal;
+}
+.hljs-comment {
+ color: hsla(0, 0%, 100%, 0.5);
+}
+.hljs-meta {
+ color: hsla(0, 0%, 100%, 0.6);
+}
+.hljs-built_in,
+.hljs-class .hljs-title {
+ color: #e9950c;
+}
+.hljs-doctag,
+.hljs-formula,
+.hljs-keyword,
+.hljs-literal {
+ color: #2e95d3;
+}
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string,
+.hljs-regexp,
+.hljs-string {
+ color: #00a67d;
+}
+.hljs-attr,
+.hljs-number,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-pseudo,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable {
+ color: #df3079;
+}
+.hljs-bullet,
+.hljs-link,
+.hljs-selector-id,
+.hljs-symbol,
+.hljs-title {
+ color: #f22c3d;
+}
+
.dark .dark\:md\:bg-vert-dark-gradient {
background-image: linear-gradient(180deg, rgba(53, 55, 64, 0), #353740 58.85%);
}
diff --git a/src/utils/regexSplit.js b/src/utils/regexSplit.js
new file mode 100644
index 0000000000..22ea09936d
--- /dev/null
+++ b/src/utils/regexSplit.js
@@ -0,0 +1,20 @@
+// const string = 'Some text before\n```python\nThis is some `Python` code with ```backticks``` inside the enclosure\n```\nSome text after\n```javascript\nThis is some JavaScript code\n```\n';
+const regex = /```([^`\n]*?)\n([\s\S]*?)\n```/g;
+
+export default function regexSplit(string) {
+ const matches = [...string.matchAll(regex)];
+ const output = [matches[0].input.slice(0, matches[0].index)];
+
+ for (let i = 0; i < matches.length; i++) {
+ const [fullMatch, language, code] = matches[i];
+ // const formattedCode = code.replace(/`+/g, '\\`');
+ const formattedCode = code;
+ output.push(`\`\`\`${language}\n${formattedCode}\n\`\`\``);
+ if (i < matches.length - 1) {
+ const nextText = string.slice(matches[i].index + fullMatch.length, matches[i + 1].index);
+ output.push(nextText.trim());
+ }
+ }
+
+ return output;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index fdb432eb34..3fdf5b308c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,9 +5,6 @@ module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
// darkMode: 'class',
darkMode: ['class'],
- theme: {
- extend: {}
- },
theme: {
extend: {
// fontFamily: {
@@ -29,5 +26,8 @@ module.exports = {
}
}
},
- plugins: [require('tailwindcss-animate')]
+ plugins: [
+ require('tailwindcss-animate'),
+ // require('@tailwindcss/typography'),
+ ]
};