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

106
components/Chat/ChatMessage.tsx
View File

@ -7,6 +7,7 @@ import rehypeMathjax from "rehype-mathjax";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import remarkMath from "remark-math"; import remarkMath from "remark-math";
import { CodeBlock } from "../Markdown/CodeBlock"; import { CodeBlock } from "../Markdown/CodeBlock";
import { CopyButton } from "./CopyButton";
interface Props { interface Props {
message: Message; message: Message;
@ -70,22 +71,22 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
return ( return (
<div <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" }} style={{ overflowWrap: "anywhere" }}
onMouseEnter={() => setIsHovering(true)} onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)} 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="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="font-bold min-w-[40px]">{message.role === "assistant" ? t("AI") : t("You")}:</div> <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" ? ( {message.role === "user" ? (
<div className="flex w-full"> <div className="flex w-full">
{isEditing ? ( {isEditing ? (
<div className="flex flex-col w-full"> <div className="flex w-full flex-col">
<textarea <textarea
ref={textareaRef} 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} value={messageContent}
onChange={handleInputChange} onChange={handleInputChange}
onKeyDown={handlePressEnter} 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 <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} onClick={handleEditMessage}
disabled={messageContent.trim().length <= 0} disabled={messageContent.trim().length <= 0}
> >
Save & Submit Save & Submit
</button> </button>
<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={() => { onClick={() => {
setMessageContent(message.content); setMessageContent(message.content);
setIsEditing(false); setIsEditing(false);
@ -119,57 +120,66 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
</div> </div>
</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 && ( {(isHovering || window.innerWidth < 640) && !isEditing && (
<button className={`absolute ${window.innerWidth < 640 ? "right-3 bottom-1" : "right-[-20px] top-[26px]"}`}> <button className={`absolute ${window.innerWidth < 640 ? "right-3 bottom-1" : "right-[-20px] top-[26px]"}`}>
<IconEdit <IconEdit
size={20} 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} onClick={toggleEditing}
/> />
</button> </button>
)} )}
</div> </div>
) : ( ) : (
<ReactMarkdown <>
className="prose dark:prose-invert" <ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]} className="prose dark:prose-invert"
rehypePlugins={[rehypeMathjax]} remarkPlugins={[remarkGfm, remarkMath]}
components={{ rehypePlugins={[rehypeMathjax]}
code({ node, inline, className, children, ...props }) { components={{
const match = /language-(\w+)/.exec(className || ""); code({ node, inline, className, children, ...props }) {
return !inline && match ? ( const match = /language-(\w+)/.exec(className || "");
<CodeBlock return !inline && match ? (
key={Math.random()} <CodeBlock
language={match[1]} key={Math.random()}
value={String(children).replace(/\n$/, "")} language={match[1]}
lightMode={lightMode} value={String(children).replace(/\n$/, "")}
{...props} lightMode={lightMode}
/> {...props}
) : ( />
<code ) : (
className={className} <code
{...props} className={className}
> {...props}
{children} >
</code> {children}
); </code>
}, );
table({ children }) { },
return <table className="border-collapse border border-black dark:border-white py-1 px-3">{children}</table>; table({ children }) {
}, 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>; th({ children }) {
}, 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>; td({ children }) {
} return <td className="break-words border border-black py-1 px-3 dark:border-white">{children}</td>;
}} }
> }}
{message.content} >
</ReactMarkdown> {message.content}
</ReactMarkdown>
{(isHovering || window.innerWidth < 640) && (
<CopyButton
messagedCopied={messagedCopied}
copyOnClick={copyOnClick}
/>
)}
</>
)} )}
</div> </div>
</div> </div>