chore: delete code light theme, like chatgpt (#186)

This commit is contained in:
Danil Shishkevich 2023-03-26 15:25:58 +07:00 committed by GitHub
parent 675da9431d
commit 0f07812cc5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 20 deletions

View File

@ -30,7 +30,6 @@ interface Props {
modelError: ErrorMessage | null; modelError: ErrorMessage | null;
messageError: boolean; messageError: boolean;
loading: boolean; loading: boolean;
lightMode: 'light' | 'dark';
onSend: (message: Message, deleteCount?: number) => void; onSend: (message: Message, deleteCount?: number) => void;
onUpdateConversation: ( onUpdateConversation: (
conversation: Conversation, conversation: Conversation,
@ -49,7 +48,6 @@ export const Chat: FC<Props> = ({
modelError, modelError,
messageError, messageError,
loading, loading,
lightMode,
onSend, onSend,
onUpdateConversation, onUpdateConversation,
onEditMessage, onEditMessage,
@ -163,7 +161,6 @@ export const Chat: FC<Props> = ({
key={index} key={index}
message={message} message={message}
messageIndex={index} messageIndex={index}
lightMode={lightMode}
onEditMessage={onEditMessage} onEditMessage={onEditMessage}
/> />
))} ))}

View File

@ -12,14 +12,12 @@ import { CopyButton } from './CopyButton';
interface Props { interface Props {
message: Message; message: Message;
messageIndex: number; messageIndex: number;
lightMode: 'light' | 'dark';
onEditMessage: (message: Message, messageIndex: number) => void; onEditMessage: (message: Message, messageIndex: number) => void;
} }
export const ChatMessage: FC<Props> = ({ export const ChatMessage: FC<Props> = ({
message, message,
messageIndex, messageIndex,
lightMode,
onEditMessage, onEditMessage,
}) => { }) => {
const { t } = useTranslation('chat'); const { t } = useTranslation('chat');
@ -76,11 +74,10 @@ export const ChatMessage: FC<Props> = ({
return ( return (
<div <div
className={`group ${ className={`group ${message.role === 'assistant'
message.role === 'assistant'
? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100' ? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100'
: 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100' : 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100'
}`} }`}
style={{ overflowWrap: 'anywhere' }} style={{ overflowWrap: 'anywhere' }}
onMouseEnter={() => setIsHovering(true)} onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)} onMouseLeave={() => setIsHovering(false)}
@ -138,11 +135,10 @@ export const ChatMessage: FC<Props> = ({
{(isHovering || window.innerWidth < 640) && !isEditing && ( {(isHovering || window.innerWidth < 640) && !isEditing && (
<button <button
className={`absolute ${ className={`absolute ${window.innerWidth < 640
window.innerWidth < 640
? 'right-3 bottom-1' ? 'right-3 bottom-1'
: 'right-[-20px] top-[26px]' : 'right-[-20px] top-[26px]'
}`} }`}
> >
<IconEdit <IconEdit
size={20} size={20}
@ -161,12 +157,12 @@ export const ChatMessage: FC<Props> = ({
components={{ components={{
code({ node, inline, className, children, ...props }) { code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || ''); const match = /language-(\w+)/.exec(className || '');
return !inline && match ? ( return !inline && match ? (
<CodeBlock <CodeBlock
key={Math.random()} key={Math.random()}
language={match[1]} language={match[1]}
value={String(children).replace(/\n$/, '')} value={String(children).replace(/\n$/, '')}
lightMode={lightMode}
{...props} {...props}
/> />
) : ( ) : (

View File

@ -6,18 +6,14 @@ import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
import { FC, useState } from 'react'; import { FC, useState } from 'react';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
oneDark,
oneLight,
} from 'react-syntax-highlighter/dist/cjs/styles/prism';
interface Props { interface Props {
language: string; language: string;
value: string; value: string;
lightMode: 'light' | 'dark';
} }
export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => { export const CodeBlock: FC<Props> = ({ language, value }) => {
const { t } = useTranslation('markdown'); const { t } = useTranslation('markdown');
const [isCopied, setIsCopied] = useState<Boolean>(false); const [isCopied, setIsCopied] = useState<Boolean>(false);
@ -65,6 +61,7 @@ export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
<div className="codeblock relative font-sans text-[16px]"> <div className="codeblock relative font-sans text-[16px]">
<div className="flex items-center justify-between py-1.5 px-4"> <div className="flex items-center justify-between py-1.5 px-4">
<span className="text-xs lowercase text-white">{language}</span> <span className="text-xs lowercase text-white">{language}</span>
<div className="flex items-center"> <div className="flex items-center">
<button <button
className="flex items-center rounded bg-none py-0.5 px-2 text-xs text-white focus:outline-none" className="flex items-center rounded bg-none py-0.5 px-2 text-xs text-white focus:outline-none"
@ -88,7 +85,7 @@ export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
<SyntaxHighlighter <SyntaxHighlighter
language={language} language={language}
style={lightMode === 'light' ? oneLight : oneDark} style={oneDark}
customStyle={{ margin: 0 }} customStyle={{ margin: 0 }}
> >
{value} {value}

View File

@ -582,7 +582,6 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
messageError={messageError} messageError={messageError}
models={models} models={models}
loading={loading} loading={loading}
lightMode={lightMode}
onSend={handleSend} onSend={handleSend}
onUpdateConversation={handleUpdateConversation} onUpdateConversation={handleUpdateConversation}
onEditMessage={handleEditMessage} onEditMessage={handleEditMessage}