schihei/chatbot-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add markdown

Browse Source
This commit is contained in:
Mckay Wrigley
2023-03-17 19:25:04 -06:00
parent 506b5c1684
commit 9c50142c64
8 changed files with 1673 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chat/Chat.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export const Chat: FC<Props> = ({ model, messages, loading, onSend, onSelect })
) : (
<>
<div className="flex-1 overflow-auto">
<div className="text-center py-3 dark:bg-[#434654] dark:text-neutral-300 text-neutral-500 text-sm border border-b-neutral-300 dark:border-none">Model: {OpenAIModelNames[model]}</div>
<div className="text-center py-3 dark:bg-[#444654] dark:text-neutral-300 text-neutral-500 text-sm border border-b-neutral-300 dark:border-none">Model: {OpenAIModelNames[model]}</div>
{messages.map((message, index) => (
<div key={index}>
components/Chat/ChatLoader.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ interface Props {}
export const ChatLoader: FC<Props> = () => {
return (
<div
className={`flex justify-center px-[120px] py-[30px] whitespace-pre-wrap dark:bg-[#434654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 dark:border-none"`}
className={`flex justify-center px-[120px] py-[30px] whitespace-pre-wrap dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 dark:border-none"`}
style={{ overflowWrap: "anywhere" }}
>
<div className="w-[650px] flex">
components/Chat/ChatMessage.tsx
+6 -3
View File
@@ -1,5 +1,6 @@
import { Message } from "@/types";
import { FC } from "react";
import ReactMarkdown from "react-markdown";
interface Props {
message: Message;
@@ -8,13 +9,15 @@ interface Props {
export const ChatMessage: FC<Props> = ({ message }) => {
return (
<div
className={`flex justify-center px-[120px] py-[30px] whitespace-pre-wrap] ${message.role === "assistant" ? "dark:bg-[#434654] 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"}`}
style={{ overflowWrap: "anywhere" }}
>
<div className="w-[650px] flex">
<div className="w-[650px] flex align-middle">
<div className="mr-4 font-bold min-w-[40px]">{message.role === "assistant" ? "AI:" : "You:"}</div>
<div className="whitespace-pre-wrap">{message.content}</div>
<div className="prose dark:prose-invert">
<ReactMarkdown>{message.content}</ReactMarkdown>
</div>
</div>
</div>
);