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