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

View File

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

View File

@ -6,18 +6,14 @@ import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
import { FC, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import {
oneDark,
oneLight,
} from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
interface Props {
language: 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 [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="flex items-center justify-between py-1.5 px-4">
<span className="text-xs lowercase text-white">{language}</span>
<div className="flex items-center">
<button
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
language={language}
style={lightMode === 'light' ? oneLight : oneDark}
style={oneDark}
customStyle={{ margin: 0 }}
>
{value}

View File

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