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

hotfix

This commit is contained in:
Mckay Wrigley 2023-03-25 23:06:49 -06:00
parent 499007da94
commit 71d7e44bce
1 changed files with 58 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/Chat/ChatMessage.tsx
View File

@ -7,6 +7,7 @@ import rehypeMathjax from "rehype-mathjax";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import { CodeBlock } from "../Markdown/CodeBlock";
import { CopyButton } from "./CopyButton";
interface Props {
message: Message;
@ -70,22 +71,22 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
return (
<div
className={`group ${message.role === "assistant" ? "text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]" : "text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-white dark:bg-[#343541]"}`}
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"}`}
style={{ overflowWrap: "anywhere" }}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
<div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto relative">
<div className="font-bold min-w-[40px]">{message.role === "assistant" ? t("AI") : t("You")}:</div>
<div className="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="min-w-[40px] font-bold">{message.role === "assistant" ? t("AI") : t("You")}:</div>
<div className="prose dark:prose-invert mt-[-2px] w-full">
<div className="prose mt-[-2px] w-full dark:prose-invert">
{message.role === "user" ? (
<div className="flex w-full">
{isEditing ? (
<div className="flex flex-col w-full">
<div className="flex w-full flex-col">
<textarea
ref={textareaRef}
className="w-full dark:bg-[#343541] border-none resize-none outline-none whitespace-pre-wrap"
className="w-full resize-none whitespace-pre-wrap border-none outline-none dark:bg-[#343541]"
value={messageContent}
onChange={handleInputChange}
onKeyDown={handlePressEnter}
@ -99,16 +100,16 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
}}
/>
<div className="flex mt-10 justify-center space-x-4">
<div className="mt-10 flex justify-center space-x-4">
<button
className="h-[40px] bg-blue-500 text-white rounded-md px-4 py-1 text-sm font-medium enabled:hover:bg-blue-600 disabled:opacity-50"
className="h-[40px] rounded-md bg-blue-500 px-4 py-1 text-sm font-medium text-white enabled:hover:bg-blue-600 disabled:opacity-50"
onClick={handleEditMessage}
disabled={messageContent.trim().length <= 0}
>
Save & Submit
</button>
<button
className="h-[40px] border border-neutral-300 dark:border-neutral-700 rounded-md px-4 py-1 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"
className="h-[40px] rounded-md border border-neutral-300 px-4 py-1 text-sm font-medium text-neutral-700 hover:bg-neutral-100 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
onClick={() => {
setMessageContent(message.content);
setIsEditing(false);
@ -119,20 +120,21 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
</div>
</div>
) : (
<div className="prose dark:prose-invert whitespace-pre-wrap">{message.content}</div>
<div className="prose whitespace-pre-wrap dark:prose-invert">{message.content}</div>
)}
{(isHovering || window.innerWidth < 640) && !isEditing && (
<button className={`absolute ${window.innerWidth < 640 ? "right-3 bottom-1" : "right-[-20px] top-[26px]"}`}>
<IconEdit
size={20}
className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
onClick={toggleEditing}
/>
</button>
)}
</div>
) : (
<>
<ReactMarkdown
className="prose dark:prose-invert"
remarkPlugins={[remarkGfm, remarkMath]}
@ -158,18 +160,26 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
);
},
table({ children }) {
return <table className="border-collapse border border-black dark:border-white py-1 px-3">{children}</table>;
return <table className="border-collapse border border-black py-1 px-3 dark:border-white">{children}</table>;
},
th({ children }) {
return <th className="border border-black dark:border-white break-words py-1 px-3 bg-gray-500 text-white">{children}</th>;
return <th className="break-words border border-black bg-gray-500 py-1 px-3 text-white dark:border-white">{children}</th>;
},
td({ children }) {
return <td className="border border-black dark:border-white break-words py-1 px-3">{children}</td>;
return <td className="break-words border border-black py-1 px-3 dark:border-white">{children}</td>;
}
}}
>
{message.content}
</ReactMarkdown>
{(isHovering || window.innerWidth < 640) && (
<CopyButton
messagedCopied={messagedCopied}
copyOnClick={copyOnClick}
/>
)}
</>
)}
</div>
</div>