From 9e589731f099a30ea96970a717d4ef26c49837ad Mon Sep 17 00:00:00 2001
From: Suryavir Kapur <52126281+suryavirkapur@users.noreply.github.com>
Date: Tue, 19 Mar 2024 15:35:55 +0400
Subject: [PATCH] frontend: adds attach button (#55)

---
 frontend/src/components/ChatInterface.css |  6 +++++-
 frontend/src/components/ChatInterface.tsx | 16 ++++++++++++++++
 frontend/src/components/CodeEditor.tsx    |  1 +
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ChatInterface.css b/frontend/src/components/ChatInterface.css
index f4e6bd3133..f49b94a6e1 100644
--- a/frontend/src/components/ChatInterface.css
+++ b/frontend/src/components/ChatInterface.css
@@ -43,7 +43,7 @@
     padding: 10px;
     border: none;
     border-radius: 5px;
-    margin-right: 10px;
+    margin: 0 10px;
     background-color: #3c3c3c;
     color: #fff;
   }
@@ -59,4 +59,8 @@
   
   .button-text {
     font-size: 16px;
+  }
+
+  .input-container svg {
+    height: 16px;
   }
\ No newline at end of file
diff --git a/frontend/src/components/ChatInterface.tsx b/frontend/src/components/ChatInterface.tsx
index 14294838eb..1ce806ff5b 100644
--- a/frontend/src/components/ChatInterface.tsx
+++ b/frontend/src/components/ChatInterface.tsx
@@ -56,6 +56,22 @@ function ChatInterface(): JSX.Element {
         ))}
       </div>
       <div className="input-container">
+        <button className="attach-button" type="button" aria-label="file">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M9 7C9 4.23858 11.2386 2 14 2C16.7614 2 19 4.23858 19 7V15C19 18.866 15.866 22 12 22C8.13401 22 5 18.866 5 15V9C5 8.44772 5.44772 8 6 8C6.55228 8 7 8.44772 7 9V15C7 17.7614 9.23858 20 12 20C14.7614 20 17 17.7614 17 15V7C17 5.34315 15.6569 4 14 4C12.3431 4 11 5.34315 11 7V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V9C13 8.44772 13.4477 8 14 8C14.5523 8 15 8.44772 15 9V15C15 16.6569 13.6569 18 12 18C10.3431 18 9 16.6569 9 15V7Z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
         <input
           type="text"
           value={inputMessage}
diff --git a/frontend/src/components/CodeEditor.tsx b/frontend/src/components/CodeEditor.tsx
index 76544d9ef2..7811e7f856 100644
--- a/frontend/src/components/CodeEditor.tsx
+++ b/frontend/src/components/CodeEditor.tsx
@@ -9,6 +9,7 @@ function CodeEditor(): JSX.Element {
   return (
     <Editor
       height="100%"
+      theme="vs-dark"
       defaultLanguage="javascript"
       defaultValue="// Welcome to OpenDevin!"
       onChange={handleEditorChange}