chore: delete code light theme, like chatgpt (#186)
This commit is contained in:
parent
675da9431d
commit
0f07812cc5
|
@ -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}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -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,8 +74,7 @@ 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'
|
||||||
}`}
|
}`}
|
||||||
|
@ -138,8 +135,7 @@ 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]'
|
||||||
}`}
|
}`}
|
||||||
|
@ -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}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue