mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-09-22 06:00:56 +02:00
search result styling changes
This commit is contained in:
Daniel Avila
parent
0b47218cd5
commit
4ce60537ca
14 changed files with 608 additions and 337 deletions
|
|
@ -8,6 +8,7 @@ const citeText = (res, noLinks = false) => {
|
|||
if (noLinks) {
|
||||
citations.forEach((citation) => {
|
||||
const digit = citation.match(/\d+?/g)[0];
|
||||
// result = result.replaceAll(citation, `<sup>[${digit}](#) </sup>`);
|
||||
result = result.replaceAll(citation, `<sup>[${digit}](#) </sup>`);
|
||||
});
|
||||
|
||||
|
|
@ -20,7 +21,8 @@ const citeText = (res, noLinks = false) => {
|
|||
|
||||
citations.forEach((citation) => {
|
||||
const digit = citation.match(/\d+?/g)[0];
|
||||
result = result.replaceAll(citation, `<sup>[${digit}](${sources[digit - 1]}) </sup>`);
|
||||
result = result.replaceAll(citation, `<sup>[${digit}](${sources[digit - 1]}) </sup>`);
|
||||
// result = result.replaceAll(citation, `<sup>[${digit}](${sources[digit - 1]}) </sup>`);
|
||||
});
|
||||
|
||||
return result;
|
||||
|
|
|
|||
46
client/package-lock.json
generated
46
client/package-lock.json
generated
|
|
@ -25,9 +25,11 @@
|
|||
"markdown-to-jsx": "^7.1.9",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-highlight": "^0.15.0",
|
||||
"react-lazy-load": "^4.0.1",
|
||||
"react-markdown": "^8.0.5",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-string-replace": "^1.1.0",
|
||||
"react-textarea-autosize": "^8.4.0",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"rehype-highlight": "^6.0.0",
|
||||
|
|
@ -10490,6 +10492,22 @@
|
|||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-highlight": {
|
||||
"version": "0.15.0",
|
||||
"resolved": "https://registry.npmjs.org/react-highlight/-/react-highlight-0.15.0.tgz",
|
||||
"integrity": "sha512-5uV/b/N4Z421GSVVe05fz+OfTsJtFzx/fJBdafZyw4LS70XjIZwgEx3Lrkfc01W/RzZ2Dtfb0DApoaJFAIKBtA==",
|
||||
"dependencies": {
|
||||
"highlight.js": "^10.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-highlight/node_modules/highlight.js": {
|
||||
"version": "10.7.3",
|
||||
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
|
||||
"integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
|
|
@ -10627,6 +10645,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-string-replace": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.0.tgz",
|
||||
"integrity": "sha512-N6RalSDFGbOHs0IJi1H611WbZsvk3ZT47Jl2JEXFbiS3kTwsdCYij70Keo/tWtLy7sfhDsYm7CwNM/WmjXIaMw==",
|
||||
"engines": {
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-style-singleton": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
|
||||
|
|
@ -20398,6 +20424,21 @@
|
|||
"scheduler": "^0.23.0"
|
||||
}
|
||||
},
|
||||
"react-highlight": {
|
||||
"version": "0.15.0",
|
||||
"resolved": "https://registry.npmjs.org/react-highlight/-/react-highlight-0.15.0.tgz",
|
||||
"integrity": "sha512-5uV/b/N4Z421GSVVe05fz+OfTsJtFzx/fJBdafZyw4LS70XjIZwgEx3Lrkfc01W/RzZ2Dtfb0DApoaJFAIKBtA==",
|
||||
"requires": {
|
||||
"highlight.js": "^10.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"highlight.js": {
|
||||
"version": "10.7.3",
|
||||
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
|
||||
"integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
|
|
@ -20479,6 +20520,11 @@
|
|||
"tslib": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"react-string-replace": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.0.tgz",
|
||||
"integrity": "sha512-N6RalSDFGbOHs0IJi1H611WbZsvk3ZT47Jl2JEXFbiS3kTwsdCYij70Keo/tWtLy7sfhDsYm7CwNM/WmjXIaMw=="
|
||||
},
|
||||
"react-style-singleton": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
|
||||
|
|
|
|||
|
|
@ -35,9 +35,11 @@
|
|||
"markdown-to-jsx": "^7.1.9",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-highlight": "^0.15.0",
|
||||
"react-lazy-load": "^4.0.1",
|
||||
"react-markdown": "^8.0.5",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-string-replace": "^1.1.0",
|
||||
"react-textarea-autosize": "^8.4.0",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"rehype-highlight": "^6.0.0",
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import {
|
|||
refreshConversation
|
||||
} from '~/store/convoSlice';
|
||||
import { setMessages } from '~/store/messageSlice';
|
||||
import { setSubmitState, setSubmission } from '~/store/submitSlice';
|
||||
import { setSubmitState, toggleCursor } from '~/store/submitSlice';
|
||||
import { setText } from '~/store/textSlice';
|
||||
import { useMessageHandler } from '../../utils/handleSubmit';
|
||||
|
||||
|
|
@ -238,6 +238,7 @@ export default function TextChat({ messages }) {
|
|||
|
||||
if (data.final) {
|
||||
convoHandler(data, currentState, currentMsg);
|
||||
dispatch(toggleCursor());
|
||||
console.log('final', data);
|
||||
}
|
||||
if (data.created) {
|
||||
|
|
@ -247,6 +248,7 @@ export default function TextChat({ messages }) {
|
|||
let text = data.text || data.response;
|
||||
if (data.initial) {
|
||||
console.log(data);
|
||||
dispatch(toggleCursor());
|
||||
}
|
||||
if (data.message) {
|
||||
latestResponseText = text;
|
||||
|
|
@ -268,6 +270,7 @@ export default function TextChat({ messages }) {
|
|||
events.onmessage = onMessage;
|
||||
|
||||
events.oncancel = (e) => {
|
||||
dispatch(toggleCursor(true));
|
||||
cancelHandler(latestResponseText, currentState, currentMsg);
|
||||
};
|
||||
|
||||
|
|
@ -276,7 +279,7 @@ export default function TextChat({ messages }) {
|
|||
events.close();
|
||||
|
||||
const data = JSON.parse(e.data);
|
||||
|
||||
dispatch(toggleCursor(true));
|
||||
errorHandler(data, currentState, currentMsg);
|
||||
};
|
||||
|
||||
|
|
@ -284,6 +287,7 @@ export default function TextChat({ messages }) {
|
|||
|
||||
return () => {
|
||||
events.removeEventListener('message', onMessage);
|
||||
dispatch(toggleCursor(true));
|
||||
const isCancelled = events.readyState <= 1;
|
||||
events.close();
|
||||
if (isCancelled) {
|
||||
|
|
|
|||
|
|
@ -27,10 +27,6 @@ const Content = React.memo(({ content }) => {
|
|||
components={{
|
||||
code,
|
||||
p,
|
||||
text: blinker,
|
||||
// li,
|
||||
// ul,
|
||||
// ol
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
|
|
@ -62,10 +58,28 @@ const p = React.memo((props) => {
|
|||
|
||||
const blinker = ({ node }) => {
|
||||
if (node.type === 'text' && node.value === '█') {
|
||||
return <span className="result-streaming">{node.value}</span>
|
||||
return <span className="result-streaming">{node.value}</span>;
|
||||
}
|
||||
|
||||
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const em = React.memo(({ node, ...props }) => {
|
||||
if (
|
||||
props.children[0] &&
|
||||
typeof props.children[0] === 'string' &&
|
||||
props.children[0].startsWith('^')
|
||||
) {
|
||||
return <sup>{props.children[0].substring(1)}</sup>;
|
||||
}
|
||||
if (
|
||||
props.children[0] &&
|
||||
typeof props.children[0] === 'string' &&
|
||||
props.children[0].startsWith('~')
|
||||
) {
|
||||
return <sub>{props.children[0].substring(1)}</sub>;
|
||||
}
|
||||
return <i {...props} />;
|
||||
});
|
||||
|
||||
export default Content;
|
||||
|
|
|
|||
153
client/src/components/Messages/ContentRewrite.jsx
Normal file
153
client/src/components/Messages/ContentRewrite.jsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import rehypeHighlight from 'rehype-highlight';
|
||||
import remarkMath from 'remark-math';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import TabLink from './TabLink';
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
import Highlight from './Highlight';
|
||||
import CodeBlock from './CodeBlock';
|
||||
import Embed from './Embed';
|
||||
// import { langSubset } from '~/utils/languages';
|
||||
|
||||
const mdOptions = {
|
||||
wrapper: React.Fragment,
|
||||
forceWrapper: true,
|
||||
overrides: {
|
||||
a: {
|
||||
component: TabLink
|
||||
// props: {
|
||||
// className: 'foo'
|
||||
// }
|
||||
},
|
||||
pre: code,
|
||||
// code: {
|
||||
// component: code
|
||||
// },
|
||||
// pre: {
|
||||
// component: PreBlock
|
||||
// },
|
||||
p: {
|
||||
component: p
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const Content = ({ content }) => {
|
||||
return (
|
||||
<>
|
||||
{/* <ReactMarkdown
|
||||
remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
|
||||
rehypePlugins={[
|
||||
[rehypeKatex, { output: 'mathml' }],
|
||||
[
|
||||
rehypeHighlight,
|
||||
{
|
||||
detect: true,
|
||||
ignoreMissing: true,
|
||||
subset: langSubset
|
||||
}
|
||||
]
|
||||
]}
|
||||
linkTarget="_new"
|
||||
components={{
|
||||
code,
|
||||
p
|
||||
// li,
|
||||
// ul,
|
||||
// ol
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</ReactMarkdown> */}
|
||||
<Markdown
|
||||
options={mdOptions}
|
||||
>
|
||||
{content}
|
||||
</Markdown>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const PreBlock = ({children, ...rest}) => {
|
||||
console.log('pre', children);
|
||||
if ('type' in children && children ['type'] === 'code') {
|
||||
return code(children['props']);
|
||||
}
|
||||
return <pre {...rest}>{children}</pre>;
|
||||
};
|
||||
|
||||
const code = (props) => {
|
||||
const { inline, className, children, ...rest } = props;
|
||||
|
||||
if ('type' in children && children ['type'] === 'code') {
|
||||
// return code(children['props']);
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
const lang = match && match[1];
|
||||
console.log('code', lang, children);
|
||||
|
||||
if (inline) {
|
||||
return <code className={className}>{children}</code>;
|
||||
} else {
|
||||
return (
|
||||
<Embed
|
||||
language={lang}
|
||||
code={children}
|
||||
// matched={matched}
|
||||
>
|
||||
<Highlight
|
||||
language={lang}
|
||||
code={children}
|
||||
/>
|
||||
</Embed>
|
||||
);
|
||||
}
|
||||
}
|
||||
return <pre {...rest}>{children}</pre>;
|
||||
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
const lang = match && match[1];
|
||||
console.log('code', lang, children);
|
||||
|
||||
if (inline) {
|
||||
return <code className={className}>{children}</code>;
|
||||
} else {
|
||||
return (
|
||||
<Embed
|
||||
language={lang}
|
||||
code={children}
|
||||
// matched={matched}
|
||||
>
|
||||
<Highlight
|
||||
language={lang}
|
||||
code={children}
|
||||
/>
|
||||
</Embed>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const p = (props) => {
|
||||
const regex = /^█$/;
|
||||
const match = regex.exec(props?.children || '');
|
||||
// if (match) {
|
||||
// return (
|
||||
// <p className="whitespace-pre-wrap ">
|
||||
// {props?.children.slice(0, -1)}
|
||||
// <span className="result-streaming">{'█'}</span>
|
||||
// </p>
|
||||
// );
|
||||
|
||||
if (match) {
|
||||
return (
|
||||
<p className="whitespace-pre-wrap ">
|
||||
<span className="result-streaming">{'█'}</span>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return <p className="whitespace-pre-wrap ">{props?.children}</p>;
|
||||
};
|
||||
|
||||
export default Content;
|
||||
|
|
@ -2,7 +2,7 @@ import React, { useState } from 'react';
|
|||
import Clipboard from '../svg/Clipboard';
|
||||
import CheckMark from '../svg/CheckMark';
|
||||
|
||||
export default function Embed({ children, lang = '', code, matched }) {
|
||||
const Embed = React.memo(({ children, lang = '', code, matched }) => {
|
||||
const [buttonText, setButtonText] = useState('Copy code');
|
||||
const isClicked = buttonText === 'Copy code';
|
||||
|
||||
|
|
@ -32,4 +32,6 @@ export default function Embed({ children, lang = '', code, matched }) {
|
|||
</div>
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default Embed;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import Highlighter from 'react-highlight';
|
||||
import hljs from 'highlight.js';
|
||||
import { languages } from '~/utils/languages';
|
||||
|
||||
export default function Highlight({language, code}) {
|
||||
const Highlight = React.memo(({ language, code }) => {
|
||||
const [highlightedCode, setHighlightedCode] = useState(code);
|
||||
const lang = languages.has(language) ? language : 'shell';
|
||||
const lang = language ? language : 'javascript';
|
||||
|
||||
useEffect(() => {
|
||||
setHighlightedCode(hljs.highlight(code, { language: lang }).value);
|
||||
|
|
@ -12,7 +13,20 @@ export default function Highlight({language, code}) {
|
|||
|
||||
return (
|
||||
<pre>
|
||||
<code className={`language-${lang}`} dangerouslySetInnerHTML={{__html: highlightedCode}}/>
|
||||
{!highlightedCode ? (
|
||||
// <code className={`hljs !whitespace-pre language-${lang ? lang: 'javascript'}`}>
|
||||
<Highlighter className={`hljs !whitespace-pre language-${lang ? lang : 'javascript'}`}>
|
||||
{code}
|
||||
</Highlighter>
|
||||
) : (
|
||||
<code
|
||||
className={`hljs language-${lang}`}
|
||||
dangerouslySetInnerHTML={{ __html: highlightedCode }}
|
||||
/>
|
||||
)}
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default Highlight;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import TextWrapper from './TextWrapper';
|
||||
import Content from './Content';
|
||||
import Wrapper from './Wrapper';
|
||||
import MultiMessage from './MultiMessage';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import HoverButtons from './HoverButtons';
|
||||
import SiblingSwitch from './SiblingSwitch';
|
||||
import { setConversation, setLatestMessage } from '~/store/convoSlice';
|
||||
import { setModel, setCustomModel, setCustomGpt, setDisabled } from '~/store/submitSlice';
|
||||
import { setModel, setCustomModel, setCustomGpt, toggleCursor, setDisabled } from '~/store/submitSlice';
|
||||
import { setMessages } from '~/store/messageSlice';
|
||||
import { fetchById } from '~/utils/fetchers';
|
||||
import { getIconOfModel } from '~/utils';
|
||||
|
|
@ -22,7 +21,7 @@ export default function Message({
|
|||
siblingCount,
|
||||
setSiblingIdx
|
||||
}) {
|
||||
const { isSubmitting, model, chatGptLabel, promptPrefix } = useSelector(
|
||||
const { isSubmitting, model, chatGptLabel, cursor, promptPrefix } = useSelector(
|
||||
(state) => state.submit
|
||||
);
|
||||
const [abortScroll, setAbort] = useState(false);
|
||||
|
|
@ -42,8 +41,12 @@ export default function Message({
|
|||
return '';
|
||||
}
|
||||
|
||||
if (!cursor) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return <span className="result-streaming">█</span>;
|
||||
}, [blinker]);
|
||||
}, [blinker, cursor]);
|
||||
|
||||
useEffect(() => {
|
||||
if (blinker && !abortScroll) {
|
||||
|
|
@ -109,7 +112,7 @@ export default function Message({
|
|||
|
||||
const clickSearchResult = async () => {
|
||||
if (!searchResult) return;
|
||||
dispatch(setMessages([]))
|
||||
dispatch(setMessages([]));
|
||||
const convoResponse = await fetchById('convos', message.conversationId);
|
||||
const convo = convoResponse.data;
|
||||
if (convo?.chatGptLabel) {
|
||||
|
|
@ -122,10 +125,10 @@ export default function Message({
|
|||
|
||||
dispatch(setCustomGpt(convo));
|
||||
dispatch(setConversation(convo));
|
||||
const {data} = await fetchById('messages', message.conversationId);
|
||||
dispatch(setMessages(data))
|
||||
const { data } = await fetchById('messages', message.conversationId);
|
||||
dispatch(setMessages(data));
|
||||
dispatch(setDisabled(false));
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -189,15 +192,12 @@ export default function Message({
|
|||
<div className="flex min-h-[20px] flex-grow flex-col items-start gap-4 whitespace-pre-wrap">
|
||||
{/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
|
||||
<div className="markdown prose dark:prose-invert light w-full break-words">
|
||||
{/* {!isCreatedByUser && !searchResult ? (
|
||||
<TextWrapper
|
||||
text={text}
|
||||
generateCursor={generateCursor}
|
||||
/>
|
||||
) : (
|
||||
text
|
||||
)} */}
|
||||
<Content content={text} generateCursor={generateCursor}/>
|
||||
<Wrapper
|
||||
text={text}
|
||||
generateCursor={generateCursor}
|
||||
isCreatedByUser={isCreatedByUser}
|
||||
searchResult={searchResult}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -219,13 +219,13 @@ export default function Message({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MultiMessage
|
||||
messageList={message.children}
|
||||
messages={messages}
|
||||
scrollToBottom={scrollToBottom}
|
||||
currentEditId={currentEditId}
|
||||
setCurrentEditId={setCurrentEditId}
|
||||
/>
|
||||
<MultiMessage
|
||||
messageList={message.children}
|
||||
messages={messages}
|
||||
scrollToBottom={scrollToBottom}
|
||||
currentEditId={currentEditId}
|
||||
setCurrentEditId={setCurrentEditId}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ const inLineWrap = (parts) => {
|
|||
export default function TextWrapper({ text, generateCursor }) {
|
||||
let embedTest = false;
|
||||
let result = null;
|
||||
console.log('text wrapper', text)
|
||||
|
||||
// to match unenclosed code blocks
|
||||
if (text.match(/```/g)?.length === 1) {
|
||||
|
|
|
|||
25
client/src/components/Messages/Wrapper.jsx
Normal file
25
client/src/components/Messages/Wrapper.jsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
import TextWrapper from './TextWrapper';
|
||||
import Content from './Content';
|
||||
|
||||
const Wrapper = React.memo(({ text, generateCursor, isCreatedByUser, searchResult }) => {
|
||||
if (!isCreatedByUser && searchResult) {
|
||||
return (
|
||||
<Content
|
||||
content={text}
|
||||
generateCursor={generateCursor}
|
||||
/>
|
||||
);
|
||||
} else if (!isCreatedByUser && !searchResult) {
|
||||
return (
|
||||
<TextWrapper
|
||||
text={text}
|
||||
generateCursor={generateCursor}
|
||||
/>
|
||||
);
|
||||
} else if (isCreatedByUser) {
|
||||
return <>{text}</>;
|
||||
}
|
||||
});
|
||||
|
||||
export default Wrapper;
|
||||
|
|
@ -9,6 +9,7 @@ const initialState = {
|
|||
promptPrefix: null,
|
||||
chatGptLabel: null,
|
||||
customModel: null,
|
||||
cursor: true,
|
||||
};
|
||||
|
||||
const currentSlice = createSlice({
|
||||
|
|
@ -33,6 +34,13 @@ const currentSlice = createSlice({
|
|||
setModel: (state, action) => {
|
||||
state.model = action.payload;
|
||||
},
|
||||
toggleCursor: (state, action) => {
|
||||
if (action.payload) {
|
||||
state.cursor = action.payload;
|
||||
} else {
|
||||
state.cursor = !state.cursor;
|
||||
}
|
||||
},
|
||||
setCustomGpt: (state, action) => {
|
||||
state.promptPrefix = action.payload.promptPrefix;
|
||||
state.chatGptLabel = action.payload.chatGptLabel;
|
||||
|
|
@ -43,7 +51,7 @@ const currentSlice = createSlice({
|
|||
}
|
||||
});
|
||||
|
||||
export const { setSubmitState, setSubmission, setStopStream, setDisabled, setModel, setCustomGpt, setCustomModel } =
|
||||
export const { toggleCursor, setSubmitState, setSubmission, setStopStream, setDisabled, setModel, setCustomGpt, setCustomModel } =
|
||||
currentSlice.actions;
|
||||
|
||||
export default currentSlice.reducer;
|
||||
|
|
|
|||
|
|
@ -118,237 +118,6 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dark body,
|
||||
.dark html {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
@apply inline-block;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
@apply w-4;
|
||||
@apply h-4;
|
||||
@apply rounded-full;
|
||||
background: rgba(16, 163, 127);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 1rem;
|
||||
width: 0.5rem;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.scrollbar-trigger ::-webkit-scrollbar-thumb {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
}
|
||||
|
||||
.hide-scroll-bar::-webkit-scrollbar {
|
||||
display: none;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.dark::-webkit-scrollbar-thumb {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(86, 88, 105, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
--tw-border-opacity: 1;
|
||||
background-color: rgba(217, 217, 227, 0.8);
|
||||
border-color: rgba(255, 255, 255, var(--tw-border-opacity));
|
||||
border-radius: 9999px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
pre ::-webkit-scrollbar-thumb {
|
||||
display: none;
|
||||
}
|
||||
pre {
|
||||
scrollbar-width: 0;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a.link {
|
||||
@apply underline dark:hover:text-white hover:text-black;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* .markdown ol,
|
||||
.markdown ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 1rem;
|
||||
} */
|
||||
|
||||
.markdown ol li,
|
||||
.markdown ol li > p,
|
||||
.markdown ol ol,
|
||||
.markdown ol ul,
|
||||
.markdown ul li,
|
||||
.markdown ul li > p,
|
||||
.markdown ul ol,
|
||||
.markdown ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown ul li:before {
|
||||
content: '•';
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
margin-left: -1rem;
|
||||
margin-top: 1.55rem;
|
||||
/* position: absolute; */
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
/* :not(pre) > code.hljs,
|
||||
:not(pre) > code[class*='language-'] {
|
||||
border-radius: 0.3em;
|
||||
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;
|
||||
} */
|
||||
|
||||
.prose {
|
||||
color:var(--tw-prose-body);
|
||||
max-width:65ch
|
||||
|
|
@ -356,7 +125,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
.prose :where([class~=lead]):not(:where([class~=not-prose] *)) {
|
||||
color:var(--tw-prose-lead);
|
||||
font-size:1.25em;
|
||||
/* line-height:1.6; */
|
||||
line-height:1.6;
|
||||
margin-bottom:1.2em;
|
||||
margin-top:1.2em
|
||||
}
|
||||
|
|
@ -417,13 +186,13 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
margin-top:1.25em;
|
||||
padding-left:1.625em
|
||||
}
|
||||
/* .prose :where(ol>li):not(:where([class~=not-prose] *))::marker {
|
||||
.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;
|
||||
|
|
@ -476,7 +245,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
color:var(--tw-prose-headings);
|
||||
font-size:1.25em;
|
||||
font-weight:600;
|
||||
/* line-height:1.6; */
|
||||
line-height:1.6;
|
||||
margin-bottom:.6em;
|
||||
margin-top:1.6em
|
||||
}
|
||||
|
|
@ -487,7 +256,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
.prose :where(h4):not(:where([class~=not-prose] *)) {
|
||||
color:var(--tw-prose-headings);
|
||||
font-weight:600;
|
||||
/* line-height:1.5; */
|
||||
line-height:1.5;
|
||||
margin-bottom:.5em;
|
||||
margin-top:1.5em
|
||||
}
|
||||
|
|
@ -506,7 +275,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
.prose :where(figcaption):not(:where([class~=not-prose] *)) {
|
||||
color:var(--tw-prose-captions);
|
||||
font-size:.875em;
|
||||
/* line-height:1.4285714; */
|
||||
line-height:1.4285714;
|
||||
margin-top:.8571429em
|
||||
}
|
||||
.prose :where(code):not(:where([class~=not-prose] *)) {
|
||||
|
|
@ -549,7 +318,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
color:currentColor;
|
||||
font-size:.875em;
|
||||
font-weight:400;
|
||||
/* line-height:1.7142857; */
|
||||
line-height:1.7142857;
|
||||
margin:0;
|
||||
overflow-x:auto;
|
||||
padding:0
|
||||
|
|
@ -573,7 +342,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
}
|
||||
.prose :where(table):not(:where([class~=not-prose] *)) {
|
||||
font-size:.875em;
|
||||
/* line-height:1.7142857; */
|
||||
line-height:1.7142857;
|
||||
margin-bottom:2em;
|
||||
margin-top:2em;
|
||||
table-layout:auto;
|
||||
|
|
@ -609,10 +378,46 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
.prose :where(tfoot td):not(:where([class~=not-prose] *)) {
|
||||
vertical-align:top
|
||||
}
|
||||
/* .prose :where(p):not(:where([class~=not-prose] *)) {
|
||||
.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
|
||||
|
|
@ -1136,8 +941,6 @@ html {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 1rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown ol {
|
||||
|
|
@ -1993,11 +1796,7 @@ html {
|
|||
.markdown ul {
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
padding-left:1rem;
|
||||
margin: 0;
|
||||
}
|
||||
.markdown ul::marker {
|
||||
margin-top: 1.55rem;
|
||||
padding-left:1rem
|
||||
}
|
||||
.markdown ol li,
|
||||
.markdown ol li>p,
|
||||
|
|
|
|||
|
|
@ -118,6 +118,237 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dark body,
|
||||
.dark html {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
@apply inline-block;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
@apply w-4;
|
||||
@apply h-4;
|
||||
@apply rounded-full;
|
||||
background: rgba(16, 163, 127);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 1rem;
|
||||
width: 0.5rem;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.scrollbar-trigger ::-webkit-scrollbar-thumb {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
}
|
||||
|
||||
.hide-scroll-bar::-webkit-scrollbar {
|
||||
display: none;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.dark::-webkit-scrollbar-thumb {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(86, 88, 105, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
--tw-border-opacity: 1;
|
||||
background-color: rgba(217, 217, 227, 0.8);
|
||||
border-color: rgba(255, 255, 255, var(--tw-border-opacity));
|
||||
border-radius: 9999px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
pre ::-webkit-scrollbar-thumb {
|
||||
display: none;
|
||||
}
|
||||
pre {
|
||||
scrollbar-width: 0;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a.link {
|
||||
@apply underline dark:hover:text-white hover:text-black;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* .markdown ol,
|
||||
.markdown ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 1rem;
|
||||
} */
|
||||
|
||||
.markdown ol li,
|
||||
.markdown ol li > p,
|
||||
.markdown ol ol,
|
||||
.markdown ol ul,
|
||||
.markdown ul li,
|
||||
.markdown ul li > p,
|
||||
.markdown ul ol,
|
||||
.markdown ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown ul li:before {
|
||||
content: '•';
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
margin-left: -1rem;
|
||||
margin-top: 1.55rem;
|
||||
/* position: absolute; */
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
/* :not(pre) > code.hljs,
|
||||
:not(pre) > code[class*='language-'] {
|
||||
border-radius: 0.3em;
|
||||
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;
|
||||
} */
|
||||
|
||||
.prose {
|
||||
color:var(--tw-prose-body);
|
||||
max-width:65ch
|
||||
|
|
@ -125,7 +356,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
.prose :where([class~=lead]):not(:where([class~=not-prose] *)) {
|
||||
color:var(--tw-prose-lead);
|
||||
font-size:1.25em;
|
||||
line-height:1.6;
|
||||
/* line-height:1.6; */
|
||||
margin-bottom:1.2em;
|
||||
margin-top:1.2em
|
||||
}
|
||||
|
|
@ -186,13 +417,13 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
margin-top:1.25em;
|
||||
padding-left:1.625em
|
||||
}
|
||||
.prose :where(ol>li):not(:where([class~=not-prose] *))::marker {
|
||||
/* .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;
|
||||
|
|
@ -245,7 +476,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
color:var(--tw-prose-headings);
|
||||
font-size:1.25em;
|
||||
font-weight:600;
|
||||
line-height:1.6;
|
||||
/* line-height:1.6; */
|
||||
margin-bottom:.6em;
|
||||
margin-top:1.6em
|
||||
}
|
||||
|
|
@ -256,7 +487,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
.prose :where(h4):not(:where([class~=not-prose] *)) {
|
||||
color:var(--tw-prose-headings);
|
||||
font-weight:600;
|
||||
line-height:1.5;
|
||||
/* line-height:1.5; */
|
||||
margin-bottom:.5em;
|
||||
margin-top:1.5em
|
||||
}
|
||||
|
|
@ -275,7 +506,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
.prose :where(figcaption):not(:where([class~=not-prose] *)) {
|
||||
color:var(--tw-prose-captions);
|
||||
font-size:.875em;
|
||||
line-height:1.4285714;
|
||||
/* line-height:1.4285714; */
|
||||
margin-top:.8571429em
|
||||
}
|
||||
.prose :where(code):not(:where([class~=not-prose] *)) {
|
||||
|
|
@ -318,7 +549,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
color:currentColor;
|
||||
font-size:.875em;
|
||||
font-weight:400;
|
||||
line-height:1.7142857;
|
||||
/* line-height:1.7142857; */
|
||||
margin:0;
|
||||
overflow-x:auto;
|
||||
padding:0
|
||||
|
|
@ -342,7 +573,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
}
|
||||
.prose :where(table):not(:where([class~=not-prose] *)) {
|
||||
font-size:.875em;
|
||||
line-height:1.7142857;
|
||||
/* line-height:1.7142857; */
|
||||
margin-bottom:2em;
|
||||
margin-top:2em;
|
||||
table-layout:auto;
|
||||
|
|
@ -378,46 +609,10 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
|
|||
.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] *)) {
|
||||
/* .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
|
||||
|
|
@ -941,6 +1136,8 @@ html {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 1rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown ol {
|
||||
|
|
@ -1796,7 +1993,11 @@ html {
|
|||
.markdown ul {
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
padding-left:1rem
|
||||
padding-left:1rem;
|
||||
margin: 0;
|
||||
}
|
||||
.markdown ul::marker {
|
||||
margin-top: 1.55rem;
|
||||
}
|
||||
.markdown ol li,
|
||||
.markdown ol li>p,
|
||||
Loading…
Add table
Add a link
Reference in a new issue