From 3378ba9f862da385927e4162f1df4f3d39df658a Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Mon, 27 Nov 2023 14:36:31 -0600
Subject: [PATCH] style improvements chatbot

---
 src/components/FileEditorContainer.tsx |  6 +++++-
 src/components/TitleBar.tsx            | 15 ++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/FileEditorContainer.tsx b/src/components/FileEditorContainer.tsx
index 990647de..52d8c004 100644
--- a/src/components/FileEditorContainer.tsx
+++ b/src/components/FileEditorContainer.tsx
@@ -29,7 +29,11 @@ const FileEditorContainer: React.FC<FileEditorContainerProps> = ({}) => {
 
   return (
     <div>
-      <TitleBar onFileSelect={onFileSelect} toggleChatbot={toggleChatbot} />
+      <TitleBar
+        onFileSelect={onFileSelect}
+        chatbotOpen={showChatbot}
+        toggleChatbot={toggleChatbot}
+      />
 
       <div className="flex" style={{ height: "calc(100vh - 30px)" }}>
         <div className="w-[40px]">
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index d8de4a27..558c7e27 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -1,4 +1,4 @@
-import { MdSearch } from "react-icons/md"; // Material Design search icon
+import { MdChatBubbleOutline, MdSearch } from "react-icons/md"; // Material Design search icon
 import { HiOutlinePlusCircle } from "react-icons/hi"; // Heroicons plus circle
 import { HiSearch } from "react-icons/hi"; // Outlined search icon
 import { HiOutlineSearch } from "react-icons/hi"; // Solid search icon
@@ -8,10 +8,15 @@ import { MdChatBubble } from "react-icons/md";
 
 interface TitleBarProps {
   onFileSelect: (path: string) => void;
+  chatbotOpen: boolean;
   toggleChatbot: () => void;
 }
 
-const TitleBar: React.FC<TitleBarProps> = ({ onFileSelect, toggleChatbot }) => {
+const TitleBar: React.FC<TitleBarProps> = ({
+  onFileSelect,
+  chatbotOpen,
+  toggleChatbot,
+}) => {
   return (
     <div
       id="customTitleBar"
@@ -32,7 +37,11 @@ const TitleBar: React.FC<TitleBarProps> = ({ onFileSelect, toggleChatbot }) => {
           className="bg-transparent border-none cursor-pointer"
           onClick={toggleChatbot}
         >
-          <MdChatBubble className="text-gray-600" size={24} />
+          {chatbotOpen ? (
+            <MdChatBubble className="text-gray-600" size={24} />
+          ) : (
+            <MdChatBubbleOutline className="text-gray-600" size={24} />
+          )}
         </button>
       </div>
     </div>