From 71d7e44bcee2564a9a4301df3d0dc46c5eb53e40 Mon Sep 17 00:00:00 2001
From: Mckay Wrigley <mckaywrigley@gmail.com>
Date: Sat, 25 Mar 2023 23:06:49 -0600
Subject: [PATCH] hotfix

---
 components/Chat/ChatMessage.tsx | 106 +++++++++++++++++---------------
 1 file changed, 58 insertions(+), 48 deletions(-)

diff --git a/components/Chat/ChatMessage.tsx b/components/Chat/ChatMessage.tsx
index cdf235c..e1d004c 100644
--- a/components/Chat/ChatMessage.tsx
+++ b/components/Chat/ChatMessage.tsx
@@ -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,57 +120,66 @@ 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]}
-              rehypePlugins={[rehypeMathjax]}
-              components={{
-                code({ node, inline, className, children, ...props }) {
-                  const match = /language-(\w+)/.exec(className || "");
-                  return !inline && match ? (
-                    <CodeBlock
-                      key={Math.random()}
-                      language={match[1]}
-                      value={String(children).replace(/\n$/, "")}
-                      lightMode={lightMode}
-                      {...props}
-                    />
-                  ) : (
-                    <code
-                      className={className}
-                      {...props}
-                    >
-                      {children}
-                    </code>
-                  );
-                },
-                table({ children }) {
-                  return <table className="border-collapse border border-black dark:border-white py-1 px-3">{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>;
-                },
-                td({ children }) {
-                  return <td className="border border-black dark:border-white break-words py-1 px-3">{children}</td>;
-                }
-              }}
-            >
-              {message.content}
-            </ReactMarkdown>
+            <>
+              <ReactMarkdown
+                className="prose dark:prose-invert"
+                remarkPlugins={[remarkGfm, remarkMath]}
+                rehypePlugins={[rehypeMathjax]}
+                components={{
+                  code({ node, inline, className, children, ...props }) {
+                    const match = /language-(\w+)/.exec(className || "");
+                    return !inline && match ? (
+                      <CodeBlock
+                        key={Math.random()}
+                        language={match[1]}
+                        value={String(children).replace(/\n$/, "")}
+                        lightMode={lightMode}
+                        {...props}
+                      />
+                    ) : (
+                      <code
+                        className={className}
+                        {...props}
+                      >
+                        {children}
+                      </code>
+                    );
+                  },
+                  table({ children }) {
+                    return <table className="border-collapse border border-black py-1 px-3 dark:border-white">{children}</table>;
+                  },
+                  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="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>