refine chat uploader

Author: Jicheng Lu

src/lib/scss/custom/pages/_chat.scss

@@ -304,16 +304,20 @@
     padding-right: 1rem;
 }
 
+.chat-uploader {
+    padding-right: 3em;
+}
+
 // obsolete
 .chat-input-links {
     position: absolute;
     right: 3px;
-    top: 50%;
+    top: 55%;
     transform: translateY(-50%);
     width: 3em;
     li {
         span {
-            font-size: 16px;
+            font-size: 160% !important;
             line-height: 36px;
             padding: 0px 4px;
             display: inline-block;

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -1042,41 +1042,42 @@
 
 					<div class={`chat-input-section css-animation ${!loadEditor ? 'chat-input-hide' : 'fade-in-from-none'}`}>
 						<div class="row">
-							{#if loadTextEditor}
-								<div class="col-auto">
-									<button
-										type="submit"
-										class="btn btn-primary btn-rounded waves-effect waves-light"
+							<div class="col-auto">
+								<button
+									type="submit"
+									class="btn btn-primary btn-rounded waves-effect waves-light"
+									disabled={isSendingMsg || isThinking}
+									on:click={startListen}
+								>
+									<i class="mdi mdi-{microphoneIcon} md-36" />
+								</button>
+							</div>
+							<div class="col">
+								<div class="position-relative">
+									<ChatTextArea
+										className={`chat-input ${loadFileEditor ? 'chat-uploader' : ''}`}
+										bind:text={text}
 										disabled={isSendingMsg || isThinking}
-										on:click={startListen}
-									>
-										<i class="mdi mdi-{microphoneIcon} md-36" />
-									</button>
-								</div>
-								<div class="col">
-									<div class="position-relative">
-										<ChatTextArea
-											className={`chat-input`}
-											bind:text={text}
-											disabled={isSendingMsg || isThinking}
-											editor={lastBotMsg?.rich_content?.editor || ''}
-											onKeyDown={e => onSendMessage(e)}
-										/>
-									</div>
-								</div>
-								<div class="col-auto">
-									<button
-										type="submit"
-										class="btn btn-primary btn-rounded chat-send waves-effect waves-light"
-										disabled={!!!_.trim(text) || isSendingMsg || isThinking}
-										on:click={() => sentTextMessage()}
-									><span class="d-none d-md-inline-block me-2">Send</span>
-										<i class="mdi mdi-send" />
-									</button>
+										editor={lastBotMsg?.rich_content?.editor || ''}
+										onKeyDown={e => onSendMessage(e)}
+									/>
+									{#if loadFileEditor}
+										<div class="chat-input-links">
+											<ChatImageUploader />
+										</div>
+									{/if}
 								</div>
-							{:else if loadFileEditor}
-								<ChatImageUploader />
-							{/if}
+							</div>
+							<div class="col-auto">
+								<button
+									type="submit"
+									class="btn btn-primary btn-rounded chat-send waves-effect waves-light"
+									disabled={!!!_.trim(text) || isSendingMsg || isThinking}
+									on:click={() => sentTextMessage()}
+								><span class="d-none d-md-inline-block me-2">Send</span>
+									<i class="mdi mdi-send" />
+								</button>
+							</div>
 						</div>
 					</div>
 				</div>

src/routes/chat/[agentId]/[conversationId]/chatImage/chat-image-uploader.svelte

@@ -54,7 +54,7 @@
                 fileLimit={fileUploadLimit}
                 on:drop={e => handleFileDrop(e)}
             >
-                <span><i class="mdi mdi-file-document-outline" /></span>
+                <span><i class="bx bx-image-add" /></span>
             </FileDropZone>
         </li>
     </ul>