Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 17:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

finish highlight.js styling (for chatgpt)

Browse source
This commit is contained in:
Daniel Avila 2023-02-23 23:56:55 -05:00
parent e95e22de15
commit c58a9bbe93
12 changed files with 851 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/Messages/Message.jsx
View file

@ -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 = (
<div
style={isGPT ? { backgroundColor: 'rgb(16, 163, 127)' } : {}}
@ -53,7 +51,7 @@ export default function Message({
);
}
const wrapText = (text) => <CodeWrapper text={text} />;
const wrapText = (text) => <TextWrapper text={text} />;
return (
<div
@ -67,13 +65,13 @@ export default function Message({
{error ? (
<div className="flex flex min-h-[20px] flex-row flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
<div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
{wrapText(text)}
{text}
</div>
</div>
) : (
<div className="flex min-h-[20px] flex-col items-start gap-4 whitespace-pre-wrap">
<div className="markdown prose dark:prose-invert light w-full break-words">
{wrapText(text)}
{notUser ? wrapText(text) : text}
{blinker && <span className="result-streaming">█</span>}
</div>
</div>