From 816cdb79488da982305d49b1f30d3f56932d3336 Mon Sep 17 00:00:00 2001
From: Cole McCracken <colemccracken@gmail.com>
Date: Wed, 20 Dec 2023 14:24:39 -0800
Subject: [PATCH] Cole/fix codeblock (#65)

---
 packages/openassistants-react/package.json             |  2 +-
 .../src/components/chat-message.tsx                    | 10 +++-------
 .../src/components/ui/codeblock.tsx                    |  8 ++++----
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/openassistants-react/package.json b/packages/openassistants-react/package.json
index 4a83dc5..fe0ceb9 100644
--- a/packages/openassistants-react/package.json
+++ b/packages/openassistants-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@definitive-io/openassistants-react",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
   "module": "dist/openassistants-react.esm.js",
   "main": "dist/index.js",
diff --git a/packages/openassistants-react/src/components/chat-message.tsx b/packages/openassistants-react/src/components/chat-message.tsx
index 7da7026..7dbe111 100644
--- a/packages/openassistants-react/src/components/chat-message.tsx
+++ b/packages/openassistants-react/src/components/chat-message.tsx
@@ -78,8 +78,6 @@ export function OpenAssistantsChatMessage({
   isLoading,
   ...props
 }: DefinitiveChatMessageProps) {
-  const defaultCollapsed = false; // useful for testing
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
   const [isEditing, setIsEditing] = useState(false);
   const [editedMessageContent, setEditedMessageContent] = useState<string>('');
   const content = getContent(message);
@@ -152,9 +150,7 @@ export function OpenAssistantsChatMessage({
         {!isEditing && (
           <div>
             <MemoizedReactMarkdown
-              className={`prose break-words prose-p:leading-relaxed prose-pre:p-0 ${
-                collapsed ? 'collapsed' : ''
-              }`}
+              className={`prose break-words prose-p:leading-relaxed prose-pre:p-0`}
               remarkPlugins={[remarkGfm]}
               components={{
                 p({ children }) {
@@ -184,14 +180,14 @@ export function OpenAssistantsChatMessage({
                   }
                   return (
                     <div>
-                      {!collapsed && (
+                      {
                         <CodeBlock
                           key={Math.random()}
                           language={(match && match[1]) || ''}
                           value={String(children).replace(/\n$/, '')}
                           {...props}
                         />
-                      )}
+                      }
                     </div>
                   );
                 },
diff --git a/packages/openassistants-react/src/components/ui/codeblock.tsx b/packages/openassistants-react/src/components/ui/codeblock.tsx
index 49b2999..ac90bc5 100644
--- a/packages/openassistants-react/src/components/ui/codeblock.tsx
+++ b/packages/openassistants-react/src/components/ui/codeblock.tsx
@@ -89,13 +89,13 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
   };
 
   return (
-    <div className="codeblock relative w-full font-sans">
+    <div className="relative w-full font-sans bg-gray-200">
       <div className="flex w-full items-center justify-between px-6 py-2 pr-4">
-        <span className="text-xs lowercase">{language}</span>
+        <span className="text-xs lowercase text-primary">{language}</span>
         <div className="flex items-center space-x-1">
           <Button
             variant="ghost"
-            className="hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
+            className="text-primary text-xs hover:bg-gray-300 hover:text-primary"
             onClick={downloadAsFile}
             size="icon"
           >
@@ -105,7 +105,7 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
           <Button
             variant="ghost"
             size="icon"
-            className="text-xs hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
+            className="text-primary text-xs hover:bg-gray-300 hover:text-primary"
             onClick={onCopy}
           >
             {isCopied ? <IconCheck /> : <IconCopy />}