From 280179828a6e5fea17c3f116e8b2beb6dc255153 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 15 Jul 2026 02:11:10 -0400
Subject: [PATCH] refac

---
 .../admin/Settings/ExternalKnowledge.svelte   | 11 ++++++++--
 .../components/channel/MessageInput.svelte    | 20 +++++++++----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/admin/Settings/ExternalKnowledge.svelte b/src/lib/components/admin/Settings/ExternalKnowledge.svelte
index 6f97fd5713..27f08e2cdd 100644
--- a/src/lib/components/admin/Settings/ExternalKnowledge.svelte
+++ b/src/lib/components/admin/Settings/ExternalKnowledge.svelte
@@ -411,7 +411,7 @@
 <Modal bind:show={showSourceModal} size="sm">
 	<div>
 		<div class="flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
-			<h1 class="text-lg font-normal self-center ">
+			<h1 class="text-lg font-normal self-center">
 				{editingItem ? $i18n.t('Edit Knowledge Connection') : $i18n.t('Add Knowledge Connection')}
 			</h1>
 
@@ -790,7 +790,14 @@
 
 <div class="flex w-full flex-col justify-between text-xs">
 	<div class="mb-2 flex items-center justify-between">
-		<div class="text-gray-600 dark:text-gray-400">{$i18n.t('Sources')}</div>
+		<div class="flex items-center gap-2 leading-none text-gray-600 dark:text-gray-400">
+			<div>{$i18n.t('External Knowledge Sources')}</div>
+			<span
+				class="inline-flex items-center text-[0.625rem] font-normal uppercase leading-none text-gray-400 dark:text-gray-600"
+			>
+				{$i18n.t('Experimental')}
+			</span>
+		</div>
 
 		<Tooltip content={$i18n.t('Add Connection')}>
 			<button
diff --git a/src/lib/components/channel/MessageInput.svelte b/src/lib/components/channel/MessageInput.svelte
index ec00a944d0..ae753e4fb1 100644
--- a/src/lib/components/channel/MessageInput.svelte
+++ b/src/lib/components/channel/MessageInput.svelte
@@ -802,7 +802,7 @@
 					>
 						<div
 							id="message-input-container"
-							class="flex-1 flex flex-col relative w-full shadow-lg rounded-3xl border border-gray-50 dark:border-gray-850/30 hover:border-gray-100 focus-within:border-gray-100 hover:dark:border-gray-800 focus-within:dark:border-gray-800 transition px-1 bg-white/90 dark:bg-gray-400/5 dark:text-gray-100"
+							class="flex-1 flex flex-col relative w-full shadow-lg rounded-3xl border border-gray-50 dark:border-gray-850/30 hover:border-gray-100 focus-within:border-gray-100 hover:dark:border-gray-800 focus-within:dark:border-gray-800 transition px-0.5 bg-white/90 dark:bg-gray-400/5 dark:text-gray-100"
 							dir={$settings?.chatDirection ?? 'auto'}
 						>
 							{#if replyToMessage !== null}
@@ -892,9 +892,9 @@
 								</div>
 							{/if}
 
-							<div class="px-2.5">
+							<div class="px-2">
 								<div
-									class="scrollbar-hidden rtl:text-right ltr:text-left bg-transparent dark:text-gray-100 outline-hidden w-full pt-2.5 pb-[5px] px-1 resize-none h-fit max-h-96 overflow-auto"
+									class="scrollbar-hidden rtl:text-right ltr:text-left bg-transparent dark:text-gray-100 outline-hidden w-full pt-2 pb-0.5 px-1 resize-none h-fit max-h-96 overflow-auto"
 								>
 									{#key $settings?.richTextInput && $settings?.showFormattingToolbar}
 										<RichTextInput
@@ -980,8 +980,8 @@
 								</div>
 							</div>
 
-							<div class=" flex justify-between mb-2.5 mx-0.5">
-								<div class="ml-1 self-end flex space-x-1 flex-1">
+							<div class=" flex justify-between mt-0.5 mb-2 mx-0.5 max-w-full">
+								<div class="ml-1 self-end flex items-center flex-1 min-w-0">
 									<slot name="menu">
 										{#if acceptFiles}
 											<InputMenu
@@ -992,7 +992,7 @@
 											>
 												<button
 													id="input-menu-button"
-													class="bg-transparent hover:bg-white/80 text-gray-800 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5 outline-hidden focus:outline-hidden"
+													class="bg-transparent hover:bg-gray-100 text-gray-700 dark:text-white dark:hover:bg-gray-800 rounded-full size-[1.875rem] flex justify-center items-center outline-hidden focus:outline-hidden shrink-0"
 													type="button"
 													aria-label="More"
 												>
@@ -1012,12 +1012,12 @@
 									</slot>
 								</div>
 
-								<div class="self-end flex space-x-1 mr-1">
+								<div class="self-end flex space-x-1 mr-1 shrink-0 gap-[0.5px]">
 									{#if content === ''}
 										<Tooltip content={$i18n.t('Record voice')}>
 											<button
 												id="voice-input-button"
-												class=" text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 transition rounded-full p-1.5 mr-0.5 self-center"
+												class=" text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 transition rounded-full p-[5px] mr-0.5 self-center"
 												type="button"
 												on:click={async () => {
 													try {
@@ -1067,7 +1067,7 @@
 											<div class=" flex items-center">
 												<Tooltip content={$i18n.t('Stop')}>
 													<button
-														class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5"
+														class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-[5px]"
 														on:click={() => {
 															onStop();
 														}}
@@ -1094,7 +1094,7 @@
 														id="send-message-button"
 														class="{content !== '' || files.length !== 0
 															? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
-															: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 self-center"
+															: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-[5px] self-center"
 														type="submit"
 														disabled={content === '' && files.length === 0}
 													>