From fbf9b3f1bbed4d29fd2b6ad6be4a708fdc9b219a Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 12 Sep 2025 13:38:02 +0400
Subject: [PATCH] refac: styling

---
 src/lib/components/chat/MessageInput.svelte |  3 ++-
 src/lib/components/icons/Photo.svelte       | 27 +++++++++++++--------
 src/lib/components/icons/Terminal.svelte    | 23 ++++++++++++++++++
 3 files changed, 42 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/components/icons/Terminal.svelte

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 046085beb3..e2fd03d8a5 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -70,6 +70,7 @@
 	import InputVariablesModal from './MessageInput/InputVariablesModal.svelte';
 	import Voice from '../icons/Voice.svelte';
 	import { getSessionUser } from '$lib/apis/auths';
+	import Terminal from '../icons/Terminal.svelte';
 	const i18n = getContext('i18n');
 
 	export let onChange: Function = () => {};
@@ -1848,7 +1849,7 @@
 																? 'm-1'
 																: 'focus:outline-hidden rounded-full'}"
 														>
-															<CommandLine className="size-4" strokeWidth="1.75" />
+															<Terminal className="size-3.5" strokeWidth="2" />
 															<span
 																class="hidden @xl:block whitespace-nowrap text-ellipsis leading-none normal-case pr-0.5"
 																>{$i18n.t('Code Interpreter')}</span
diff --git a/src/lib/components/icons/Photo.svelte b/src/lib/components/icons/Photo.svelte
index 2933ba6339..26296db7c6 100644
--- a/src/lib/components/icons/Photo.svelte
+++ b/src/lib/components/icons/Photo.svelte
@@ -4,18 +4,25 @@
 </script>
 
 <svg
-	class={className}
-	stroke-width={strokeWidth}
-	aria-hidden="true"
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
 	viewBox="0 0 24 24"
->
-	<path
-		stroke="currentColor"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+	aria-hidden="true"
+	><path
+		d="M21 7.6V20.4C21 20.7314 20.7314 21 20.4 21H7.6C7.26863 21 7 20.7314 7 20.4V7.6C7 7.26863 7.26863 7 7.6 7H20.4C20.7314 7 21 7.26863 21 7.6Z"
 		stroke-linecap="round"
 		stroke-linejoin="round"
-		stroke-width="2"
-		d="m3 16 5-7 6 6.5m6.5 2.5L16 13l-4.286 6M14 10h.01M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"
-	/>
-</svg>
+	></path><path
+		d="M18 4H4.6C4.26863 4 4 4.26863 4 4.6V18"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path><path d="M7 16.8L12.4444 15L21 18" stroke-linecap="round" stroke-linejoin="round"
+	></path><path
+		d="M16.5 13C15.6716 13 15 12.3284 15 11.5C15 10.6716 15.6716 10 16.5 10C17.3284 10 18 10.6716 18 11.5C18 12.3284 17.3284 13 16.5 13Z"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path></svg
+>
diff --git a/src/lib/components/icons/Terminal.svelte b/src/lib/components/icons/Terminal.svelte
new file mode 100644
index 0000000000..be4c5d02d9
--- /dev/null
+++ b/src/lib/components/icons/Terminal.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+	aria-hidden="true"
+	><path d="M13 16H18" stroke-linecap="round" stroke-linejoin="round"></path><path
+		d="M6 8L10 12L6 16"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path><path
+		d="M2 18V6C2 4.89543 2.89543 4 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18Z"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path></svg
+>