From fde8e6dbd1e0145b1cfa5dcb0f9c99d1bf5dded2 Mon Sep 17 00:00:00 2001
From: Kwanghyun On <kwanghyun.on@gmail.com>
Date: Thu, 24 Oct 2024 21:28:24 +0900
Subject: [PATCH 1/2] Add chat button

---
 .../chat-view/chat-input/ChatUserInput.tsx         | 14 +++++++++-----
 .../chat-view/chat-input/SubmitButton.tsx          | 12 ++++++++++++
 .../chat-view/chat-input/VaultSearchButton.tsx     |  9 +++++----
 styles.css                                         | 13 +++++++++----
 4 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 src/components/chat-view/chat-input/SubmitButton.tsx

diff --git a/src/components/chat-view/chat-input/ChatUserInput.tsx b/src/components/chat-view/chat-input/ChatUserInput.tsx
index b1e9aa4..ecc1f7b 100644
--- a/src/components/chat-view/chat-input/ChatUserInput.tsx
+++ b/src/components/chat-view/chat-input/ChatUserInput.tsx
@@ -45,6 +45,7 @@ import OnMutationPlugin, {
 import UpdaterPlugin, {
   UpdaterPluginRef,
 } from './plugins/updater/UpdaterPlugin'
+import { SubmitButton } from './SubmitButton'
 import { VaultSearchButton } from './VaultSearchButton'
 
 export type ChatUserInputRef = {
@@ -342,11 +343,14 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
         </LexicalComposer>
         <div className="smtcmp-chat-user-input-controls">
           <ModelSelect />
-          <VaultSearchButton
-            onClick={() => {
-              handleSubmit(true)
-            }}
-          />
+          <div className="smtcmp-chat-user-input-controls-buttons">
+            <SubmitButton onClick={() => handleSubmit()} />
+            <VaultSearchButton
+              onClick={() => {
+                handleSubmit(true)
+              }}
+            />
+          </div>
         </div>
       </div>
     )
diff --git a/src/components/chat-view/chat-input/SubmitButton.tsx b/src/components/chat-view/chat-input/SubmitButton.tsx
new file mode 100644
index 0000000..c041e69
--- /dev/null
+++ b/src/components/chat-view/chat-input/SubmitButton.tsx
@@ -0,0 +1,12 @@
+import { CornerDownLeftIcon } from 'lucide-react'
+
+export function SubmitButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button className="smtcmp-chat-user-input-submit-button" onClick={onClick}>
+      <div className="smtcmp-chat-user-input-submit-button-icons">
+        <CornerDownLeftIcon size={12} />
+      </div>
+      <div>Chat</div>
+    </button>
+  )
+}
diff --git a/src/components/chat-view/chat-input/VaultSearchButton.tsx b/src/components/chat-view/chat-input/VaultSearchButton.tsx
index 152b1a3..e33f285 100644
--- a/src/components/chat-view/chat-input/VaultSearchButton.tsx
+++ b/src/components/chat-view/chat-input/VaultSearchButton.tsx
@@ -14,17 +14,18 @@ export function VaultSearchButton({ onClick }: { onClick: () => void }) {
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <button
-              className="smtcmp-chat-user-input-vault-search-button"
+              className="smtcmp-chat-user-input-submit-button"
               onClick={onClick}
             >
-              <div className="smtcmp-chat-user-input-vault-search-button-icons">
+              <div className="smtcmp-chat-user-input-submit-button-icons">
                 {Platform.isMacOS ? (
                   <Command size={10} />
                 ) : (
                   <ChevronUp size={12} />
                 )}
-                <ArrowBigUp size={14} />
-                <CornerDownLeftIcon size={10} />
+                {/* TODO: Replace with a custom icon */}
+                <ArrowBigUp size={12} />
+                <CornerDownLeftIcon size={12} />
               </div>
               <div>Vault Search</div>
             </button>
diff --git a/styles.css b/styles.css
index d589b19..61fdf72 100644
--- a/styles.css
+++ b/styles.css
@@ -216,12 +216,18 @@ button:not(.clickable-icon).smtcmp-chat-list-dropdown {
   justify-content: space-between;
   align-items: center;
   height: var(--size-4-4);
+
+  .smtcmp-chat-user-input-controls-buttons {
+    display: flex;
+    gap: var(--size-4-2);
+    align-items: center;
+  }
 }
 
-.smtcmp-chat-user-input-controls .smtcmp-chat-user-input-vault-search-button {
+.smtcmp-chat-user-input-controls .smtcmp-chat-user-input-submit-button {
   display: flex;
   align-items: center;
-  gap: var(--size-2-3);
+  gap: var(--size-4-1);
   font-size: var(--font-smallest);
   color: var(--text-muted);
   background-color: transparent;
@@ -237,10 +243,9 @@ button:not(.clickable-icon).smtcmp-chat-list-dropdown {
     color: var(--text-normal);
   }
 
-  .smtcmp-chat-user-input-vault-search-button-icons {
+  .smtcmp-chat-user-input-submit-button-icons {
     display: flex;
     align-items: center;
-    gap: 0.5px;
   }
 }
 

From 276f7b5724e6e600c75f81a8b6de810b8e480c59 Mon Sep 17 00:00:00 2001
From: Kwanghyun On <kwanghyun.on@gmail.com>
Date: Thu, 24 Oct 2024 21:54:29 +0900
Subject: [PATCH 2/2] Rename button

---
 src/components/chat-view/chat-input/ChatUserInput.tsx       | 4 ++--
 .../{VaultSearchButton.tsx => VaultChatButton.tsx}          | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename src/components/chat-view/chat-input/{VaultSearchButton.tsx => VaultChatButton.tsx} (87%)

diff --git a/src/components/chat-view/chat-input/ChatUserInput.tsx b/src/components/chat-view/chat-input/ChatUserInput.tsx
index ecc1f7b..e9a626a 100644
--- a/src/components/chat-view/chat-input/ChatUserInput.tsx
+++ b/src/components/chat-view/chat-input/ChatUserInput.tsx
@@ -46,7 +46,7 @@ import UpdaterPlugin, {
   UpdaterPluginRef,
 } from './plugins/updater/UpdaterPlugin'
 import { SubmitButton } from './SubmitButton'
-import { VaultSearchButton } from './VaultSearchButton'
+import { VaultChatButton } from './VaultChatButton'
 
 export type ChatUserInputRef = {
   focus: () => void
@@ -345,7 +345,7 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
           <ModelSelect />
           <div className="smtcmp-chat-user-input-controls-buttons">
             <SubmitButton onClick={() => handleSubmit()} />
-            <VaultSearchButton
+            <VaultChatButton
               onClick={() => {
                 handleSubmit(true)
               }}
diff --git a/src/components/chat-view/chat-input/VaultSearchButton.tsx b/src/components/chat-view/chat-input/VaultChatButton.tsx
similarity index 87%
rename from src/components/chat-view/chat-input/VaultSearchButton.tsx
rename to src/components/chat-view/chat-input/VaultChatButton.tsx
index e33f285..69fdf32 100644
--- a/src/components/chat-view/chat-input/VaultSearchButton.tsx
+++ b/src/components/chat-view/chat-input/VaultChatButton.tsx
@@ -7,7 +7,7 @@ import {
 } from 'lucide-react'
 import { Platform } from 'obsidian'
 
-export function VaultSearchButton({ onClick }: { onClick: () => void }) {
+export function VaultChatButton({ onClick }: { onClick: () => void }) {
   return (
     <>
       <Tooltip.Provider delayDuration={0}>
@@ -27,12 +27,12 @@ export function VaultSearchButton({ onClick }: { onClick: () => void }) {
                 <ArrowBigUp size={12} />
                 <CornerDownLeftIcon size={12} />
               </div>
-              <div>Vault Search</div>
+              <div>Vault Chat</div>
             </button>
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Content className="smtcmp-tooltip-content" sideOffset={5}>
-              Search through your entire vault
+              Chat with your entire vault
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>