Refactor chat footer layout and add upload button styling

swuecho · Aug 28, 2024 · d2c5919 · d2c5919
1 parent adcbc46
commit d2c5919
Showing 1 changed file with 15 additions and 11 deletions.
diff --git a/web/src/views/chat/index.vue b/web/src/views/chat/index.vue
@@ -578,7 +578,7 @@ const handleUsePrompt = (_: string, value: string): void => {
     </main>
     <footer :class="footerClass">
       <div class="w-full max-w-screen-xl m-auto">
-        <div class="flex items-center justify-between space-x-2">
+        <div class="flex items-center justify-between space-x-1">
           <HoverButton :tooltip="$t('chat.clearChat')" @click="handleClear">
             <span class="text-xl text-[#4b9e5f] dark:text-white">
               <SvgIcon icon="icon-park-outline:clear" />
@@ -610,23 +610,20 @@ const handleUsePrompt = (_: string, value: string): void => {
               <SvgIcon icon="fluent:bot-add-24-regular" />
             </span>
           </HoverButton>
-
-          <HoverButton @click="showUploadModal = true" :tooltip="$t('chat.uploadFiles')">
-            <span class="text-xl text-[#4b9e5f]">
-              <SvgIcon icon="clarity:attachment-line" />
-            </span>
-          </HoverButton>
-
           <NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption"
             :on-select="handleSelectAutoComplete">
             <template #default="{ handleInput, handleBlur, handleFocus }">
-              <NInput id="message_textarea" v-model:value="prompt" type="textarea" :placeholder="placeholder"
+              <NInput id="message_textarea" class="input-field"  v-model:value="prompt" type="textarea" :placeholder="placeholder"
                 data-testid="message_textarea" :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
                 @input="handleInput" @focus="handleFocus" @blur="handleBlur" @keypress="handleEnter" />
             </template>
           </NAutoComplete>
-
-          <NButton id="send_message_button" data-testid="send_message_button" type="primary"
+          <button class="upload-button" @click="showUploadModal = true">
+            <span class="text-xl text-[#4b9e5f]">
+              <SvgIcon icon="clarity:attachment-line" />
+            </span>
+          </button>
+          <NButton id="send_message_button" class="!ml-4" data-testid="send_message_button" type="primary"
             :disabled="sendButtonDisabled" @click="handleSubmit">
             <template #icon>
               <span class="dark:text-black">
@@ -640,3 +637,10 @@ const handleUsePrompt = (_: string, value: string): void => {
     </footer>
   </div>
 </template>
+
+<style lang="css">
+.upload-button {
+  margin-left: -2rem !important;
+  z-index: 10;
+}
+</style>