From 807ad666c24b3ca812ae4d14e7cc25eb1e675b5f Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@jaredpalmer.com>
Date: Mon, 31 Jul 2023 19:21:38 -0400
Subject: [PATCH] Add attribution to Mckay Wrigley

---
 components/chat-message.tsx | 7 +++++--
 components/ui/codeblock.tsx | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/chat-message.tsx b/components/chat-message.tsx
index 75f6e6f..df5b5fd 100644
--- a/components/chat-message.tsx
+++ b/components/chat-message.tsx
@@ -1,3 +1,6 @@
+// Inspired by Chatbot-UI and modified to fit the needs of this project
+// @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx
+
 import { Message } from 'ai'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
@@ -28,7 +31,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
       >
         {message.role === 'user' ? <IconUser /> : <IconOpenAI />}
       </div>
-      <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
+      <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
         <MemoizedReactMarkdown
           className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0"
           remarkPlugins={[remarkGfm, remarkMath]}
@@ -40,7 +43,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
               if (children.length) {
                 if (children[0] == '▍') {
                   return (
-                    <span className="mt-1 animate-pulse cursor-default">▍</span>
+                    <span className="mt-1 cursor-default animate-pulse">▍</span>
                   )
                 }
 
diff --git a/components/ui/codeblock.tsx b/components/ui/codeblock.tsx
index aabda4e..ccbf82d 100644
--- a/components/ui/codeblock.tsx
+++ b/components/ui/codeblock.tsx
@@ -1,3 +1,6 @@
+// Inspired by Chatbot-UI and modified to fit the needs of this project
+// @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Markdown/CodeBlock.tsx
+
 'use client'
 
 import { FC, memo } from 'react'
@@ -90,8 +93,8 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
   }
 
   return (
-    <div className="codeblock relative w-full bg-zinc-950 font-sans">
-      <div className="flex w-full items-center justify-between bg-zinc-800 px-6 py-2 pr-4 text-zinc-100">
+    <div className="relative w-full font-sans codeblock bg-zinc-950">
+      <div className="flex items-center justify-between w-full px-6 py-2 pr-4 bg-zinc-800 text-zinc-100">
         <span className="text-xs lowercase">{language}</span>
         <div className="flex items-center space-x-1">
           <Button