add markdown

components/Chat/Chat.tsx

@@ -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

@@ -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

@@ -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>
   );

components/Sidebar/Conversations.tsx

@@ -11,7 +11,6 @@ interface Props {
 }
 
 export const Conversations: FC<Props> = ({ loading, conversations, selectedConversation, onSelectConversation, onDeleteConversation }) => {
-  console.log(conversations);
   return (
     <div className="flex flex-col space-y-2">
       {conversations.map((conversation, index) => (

package.json

@@ -20,9 +20,11 @@
     "openai": "^3.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-markdown": "^8.0.5",
     "typescript": "4.9.5"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7"

tailwind.config.js

@@ -5,5 +5,5 @@ module.exports = {
   theme: {
     extend: {}
   },
-  plugins: []
+  plugins: [require("@tailwindcss/typography")]
 };

utils/index.ts

@@ -16,7 +16,7 @@ export const OpenAIStream = async (model: OpenAIModel, messages: Message[]) => {
       messages: [
         {
           role: "system",
-          content: `You are ChatGPT, a large language model trained by OpenAI. Follow the user's instructions carefully.`
+          content: `You are ChatGPT, a large language model trained by OpenAI. Follow the user's instructions carefully. Respond using markdown format.`
         },
         ...messages
       ],