KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

light/dark code highlight

This commit is contained in:
Mckay Wrigley 2023-03-18 02:32:30 -06:00
parent f56501ba7c
commit b6d5576227
4 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/Chat/Chat.tsx
View File

@ -9,11 +9,12 @@ interface Props {
model: OpenAIModel; model: OpenAIModel;
messages: Message[]; messages: Message[];
loading: boolean; loading: boolean;
lightMode: "light" | "dark";
onSend: (message: Message) => void; onSend: (message: Message) => void;
onSelect: (model: OpenAIModel) => void; onSelect: (model: OpenAIModel) => void;
} }
export const Chat: FC<Props> = ({ model, messages, loading, onSend, onSelect }) => { export const Chat: FC<Props> = ({ model, messages, loading, lightMode, onSend, onSelect }) => {
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const scrollToBottom = () => { const scrollToBottom = () => {
@ -44,7 +45,10 @@ export const Chat: FC<Props> = ({ model, messages, loading, onSend, onSelect })
{messages.map((message, index) => ( {messages.map((message, index) => (
<div key={index}> <div key={index}>
<ChatMessage message={message} /> <ChatMessage
message={message}
lightMode={lightMode}
/>
</div> </div>
))} ))}
{loading && <ChatLoader />} {loading && <ChatLoader />}

4
components/Chat/ChatMessage.tsx
View File

@ -5,9 +5,10 @@ import { CodeBlock } from "../Markdown/CodeBlock";
interface Props { interface Props {
message: Message; message: Message;
lightMode: "light" | "dark";
} }
export const ChatMessage: FC<Props> = ({ message }) => { export const ChatMessage: FC<Props> = ({ message, lightMode }) => {
return ( return (
<div <div
className={`flex justify-center px-[120px] py-[30px] whitespace-pre-wrap] ${message.role === "assistant" ? "dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 border border-neutral-300 dark:border-none" : "dark:bg-[#343541] dark:text-white text-neutral-900"}`} className={`flex justify-center px-[120px] py-[30px] whitespace-pre-wrap] ${message.role === "assistant" ? "dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 border border-neutral-300 dark:border-none" : "dark:bg-[#343541] dark:text-white text-neutral-900"}`}
@ -26,6 +27,7 @@ export const ChatMessage: FC<Props> = ({ message }) => {
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}
/> />
) : ( ) : (

11
components/Markdown/CodeBlock.tsx
View File

@ -1,13 +1,14 @@
import { FC, useState } from "react"; import { FC, useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism"; import { 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 }) => { export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
const [buttonText, setButtonText] = useState("Copy"); const [buttonText, setButtonText] = useState("Copy");
const copyToClipboard = () => { const copyToClipboard = () => {
@ -21,16 +22,16 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
}; };
return ( return (
<div className="relative"> <div className="relative text-[16px]">
<SyntaxHighlighter <SyntaxHighlighter
language={language} language={language}
style={tomorrow} style={lightMode === "light" ? oneLight : oneDark}
> >
{value} {value}
</SyntaxHighlighter> </SyntaxHighlighter>
<button <button
className="absolute top-2 right-2 text-white bg-blue-600 py-1 px-2 rounded focus:outline-none hover:bg-blue-700" className="absolute top-2 right-2 text-white bg-blue-600 py-1 px-2 rounded focus:outline-none hover:bg-blue-700 text-sm"
onClick={copyToClipboard} onClick={copyToClipboard}
> >
{buttonText} {buttonText}

1
pages/index.tsx
View File

@ -231,6 +231,7 @@ export default function Home() {
model={model} model={model}
messages={selectedConversation.messages} messages={selectedConversation.messages}
loading={loading} loading={loading}
lightMode={lightMode}
onSend={handleSend} onSend={handleSend}
onSelect={setModel} onSelect={setModel}
/> />