hotfix
This commit is contained in:
Mckay Wrigley
parent
499007da94
commit
71d7e44bce
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue